Comments (22)
I haven't worked in this library for a while, but it looks like in the current docs
static navigationOptions = ({ navigation, screenProps }) => ({
title: "My Profile!",
headerRight: <Button title="Menu" onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }} />,
});
is almost the right way to go about it. You have the navigation
passed in with object destructuring with the navigationOptions
(static navigationOptions = ({ navigation, screenProps })
) which looks right according to the to docs. But you're also doing onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }}
and so in the context of navigation.navigate
you're using the locally scoped navigation
as opposed to the one from the navigationOptions
. The one you're using is probably the press event.
Try onPress={()=>{ navigation.navigate('DrawerOpen'); }}
from react-navigation.
The first prop in dynamic configuration is the navigation object. So it would look like
header: (navigation) => ({
title: 'Options',
right: <Button title='About' onPress={() => navigation.navigate('Options')} />
})
Ref: https://reactnavigation.org/docs/navigators/navigation-options
from react-navigation.
@zero88
Adding static navigationOptions = ({ **navigate,** navigation }) =>
and removing
headerRight: <Button title="Name" onPress={**()=>**{ navigation.navigate('viewname'); }} />,
is what fixed it for me
static navigationOptions = ({ navigate, navigation }) => ({
title: "Title",
headerRight: <Button title="Name" onPress={()=>{ navigation.navigate('viewname'); }} />,
})
from react-navigation.
@xero88
Change
(navigation) => {navigation.navigate('YourViewNameHere')
To
() => {navigation.navigate('YourViewNameHere')
That should work
from react-navigation.
You can try
const stackNavigatorConfig = {
initialRouteName: 'InititalRoute',
navigationOptions: ({ navigate, navigation }) => ({
headerRight: (
<TouchableOpacity
onPress={() => navigation.navigate('YourRoute')}
>
<Text>Click</Text>
</TouchableOpacity>
)
}),
}
from react-navigation.
@JakeDluhy so i tried
static navigationOptions=({navigation})=>({ title:"New Post", headerTintColot:'blue', header: (navigation) => ({ title: 'Options', right: <Button title='About' onPress={() => navigation.navigate('Options')} /> }) });
and i am getting this error
`Objects are not valid as a React child (found: object with keys {title, right}). If you meant to render a collection of children, use an array instead.
Check the render method of 'View'`
Please what am i doing wrong???
from react-navigation.
@dbarabashdev
navigationOptions: ({ navigate, navigation }) => ({
should be:
navigationOptions: (navigation) => ({
// and, futhermore...
const navigate = navigation.navigate;
since it's the navigation object which the function receives.
from react-navigation.
static navigationOptions = {
headerLeft: (<Image source={require('../images/category/menu.png')} style={ {'height':25, 'width':25}}/>),
title: 'Services',
headerTintColor: "white",
headerStyle: {
backgroundColor: '#e6097a',
},
};
Need on press event when press on headerleft button anyone help me
from react-navigation.
@JakeDluhy
I tried this too
static navigationOptions = ({ navigation, screenProps }) => ({ title: "My Profile!", headerRight: <Button title="Menu" onPress={(navigation)=>{ navigation.navigate('DrawerOpen'); }} />, });
but i am getting
Unhandled JS Exception: navigation.navigate is not a function
from react-navigation.
Works! Thanks for the help
from react-navigation.
Great! thanks @JakeDluhy
from react-navigation.
@JakeDluhy
Thanks a lot for this insight... that was the perfect way to go.. i was using the locally scoped navigation and it works pretty well now...
i really appreciate.
from react-navigation.
@JakeDluhy Your last line in the last comment did the trick! navigation
from the outermost scope (i.e.
static navigationOptions = ({navigation, screenProps})
ought to be used instead of the local one passed from the immediate local one. Thank you!
from react-navigation.
I put 'static navigationOptions' in react.componets for a screen,
it's no use.
only I pass navigationOptions in 'StackNavigator({...})' that work, but I cannot put a navigate button this way.
from react-navigation.
@ajaymalviya001 y not overlay a button with that image or make the image itself clickable... but i think its better if you add a button to the headerLeft, then overlay the button with the image...
moreso, why not use vector icons instead of image? well, unless they are localised for the customer.
My Proposed solution will be:
static navigationOptions = { headerLeft: ( <Button onPress={(navigation)=>{ navigation.navigate('DrawerOpen')}}> <Image source={require('../images/category/menu.png')} style={ {'height':25, 'width':25}}/> </Button>), title: 'Services', headerTintColor: "white", headerStyle: { backgroundColor: '#e6097a', }, };
from react-navigation.
I get 'navigation.navigate is not a function' error
from react-navigation.
@davidtoomey first argument of navigationOptions
navigate
doesn't seems needed to be there as navigate
coming from navigation
from react-navigation.
@dbarabashdev this works for me.....but other option like headerTitle or headerStyle did not work
from react-navigation.
Hi,
It's writing in the doc : https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
/* render function, etc */
}
from react-navigation.
@JakeDluhy Hey, thanks a lot for help.
from react-navigation.
Hi,
I'd like to ask for an example of invoking .navigate from with the left or right elements of a header. Something along the line of
header: ({ state, setParams }) => { // The navigation prop has functions like setParams, goBack, and navigate. let right = ( <Button title="Options" onPress={() => this.props.navigation.navigate('Options')} /> ); return { right }; },
where Options is another screen. The above doesn't work. I'm missing how to get hold of the navigation object.
Thanks
below line work fine ..............
Instead of declaring const navigation into constructor do this line
onPress={() => this.props.navigation.push('ProductList')}
Its working fine
from react-navigation.
You can try
const stackNavigatorConfig = { initialRouteName: 'InititalRoute', navigationOptions: ({ navigate, navigation }) => ({ headerRight: ( <TouchableOpacity onPress={() => navigation.navigate('YourRoute')} > <Text>Click</Text> </TouchableOpacity> ) }), }
It worked
from react-navigation.
Related Issues (20)
- Search bar is not rendering on initial load on Android HOT 2
- React Navigation v7 Issue: useIsFocused Not Firing on Initial Render after Authentication HOT 3
- [Material Top Tabs] The tab bar UI doesn't update when navigate to a tab of the navigator from an external screen HOT 2
- key prop warning package Material Top Tabs Navigator HOT 4
- Navigating from one stack to another using navigation HOT 2
- Having Status Bar theme flicker in iOS
- Calling `measure` on a view inside navigation screen sometime returns incorrect values on iOS HOT 4
- navigation broken if @react-navigation/material-top-tabs is used and animationEnabled in the Stack Navigator HOT 2
- Drawer menu gets stuck on infinite loop HOT 3
- Getting jumpy and flickery screen in ios but android working fine in react-native-tab-view HOT 2
- hide bottomTabBar not working on IOS "tabBarStyle: { display: 'none' }" HOT 1
- Error: You need to specify name or key when calling navigate with an object as the argument HOT 2
- White flicker on drawer@7 when having nested navigators on new architecture HOT 1
- useScrollToTop type doesnt work with FlashList ref
- Specifying initialParams on a bottom tab screen with a nested stack navigator causes screens to reappear after being closed. HOT 5
- NativeStack canGoBack is always true HOT 2
- In node_modules/@react-navigation/core/useNavigationBuilder.tsx HOT 1
- Bottom Tab Push itself up when keyboard is opening in both android and ios HOT 10
- Android RN 0.75.3, app crashes when returning to the previous screen HOT 4
- Navigating to another stack not working. HOT 2
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 react-navigation.