Comments (6)
@ericvicenti if you pass a closure to useNavigationOptions()
then you get the benefit of the dynamic navigationOptions API today + the rest of the features you described.
Also, a context-based API would be super valuable to help deep children get a reference back up to the Navigator they're contained in.
One super painful thing today is that some screens are nested deeply:
ModalNavigator➡️BottomTab➡️Stack➡️TopTab➡️Target
It would be neat if Target
were capable of dynamically putting something in the top-right navigation bar position on the Stack
, or dynamically telling the BottomTab
to hide the tab bar.
Exposing a third parameter on the useNavigationOptions
tuple could give helpers to get up the tree.
Something like:
const [options, setNavigationOptions, useParentNavigationOptions] = useNavigationOptions();
const [stackOptions, setStackNavigationOptions, /* another level up if any */] = useParentNavigationOptions();
Ideally then, we'd be able to dynamically show-hide the bottom-tab-bar, no matter how nested our subscreen is.
Thoughts?
from hooks.
Yeah I think we could use suspense for something like this.
In your screen component:
const [options setNavigationOptions] = useNavigationOptions()
And in the header:
const { title } = useCurrentRouteNavigationOptions()
So if navigators were wrapped with <Suspense>
, useCurrentNavigationOptions would throw a promise when the options are missing, or the current active route key does not match the key of the current options. The screen would render afterward, provide options to useProvidedNavigationOptions
, resolving the suspense promise with the new options.
This doesn't actually sound that hard to implement, if you useNavigation
inside of these new hooks in order to know the current navigation state from the navigator, and to know the current route key from the screen.
from hooks.
I think conceptually an API like this will be great:
useNavigationOptions({
title: 'My app'
});
But wondering how would it work technically. What would do under the hood? Call a method on context which updates the navigator's state (like I was thinking with navigation.setOptions
)? Double rendering will still be an issue with this, no?
I was thinking if suspense will be useful with this where we could pause rendering new content until the options are set. But since I haven't used suspense yet, I don't have much idea of how feasible it will be.
from hooks.
We're not planning to add it to React Navigation 4. In React Navigation 5, you can do navigation.setOptions
:
function SelectionScreen({ navigation }) {
const [selectCount, setSelectCount] = React.useState(0);
navigation.setOptions({
title: selectCount > 0 : `${selectCount} items selected` : 'Select some items',
});
return <SelectionList onSelectCountChange={setSelectCount} />;
}
from hooks.
@slorber,
Will you have time to provide this useNavigationOptions hook?
Or I missed documentation about it, should I still have to use an old type
"MyComponent.navigationOptions = () =>" ?
from hooks.
@satya164 How to do the same in Typescript?
Getting error Property 'setOptions' does not exist on type 'StackScreenProps<MainStackParams, "MainScreen">'
from hooks.
Related Issues (20)
- Proper way to use react-navigation-hooks with storybook HOT 2
- Types are missing and causing errors HOT 18
- react-navigation-hooks v2 HOT 2
- setTopLevelNavigator support for hooks HOT 2
- Getting error 'from' expected HOT 2
- useFocusEffect should not retrigger on re-render HOT 8
- I can't define NavigationParams types with useNavigation HOT 1
- Reset Stack HOT 1
- Proposal: Ability to pass params for tabBarOnPress defaultHandler function HOT 1
- setParams entity change when is called HOT 1
- useFocusEffect should handle drawers HOT 4
- useNavigation shouldn't be in @react-navigation/native? HOT 3
- Open&Close Drawer HOT 1
- Hooks on the web - react-navigation is now directly imported HOT 3
- useNavigation give the warning "can't perform a React state update on an unmounted component" HOT 1
- Can I reproduce events like "onEnter/onExit" ? HOT 6
- "THIS ISSUE WAS DELETED AND BLOCKED"
- Include v5 patching for users converting from v4 to v5? HOT 1
- useNavigation not working HOT 1
- How i can re-render with useNavigationParam ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hooks.