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)
- Tab Navigator inside Stack Navigator Cause Re-Render when do redux action HOT 3
- How to change the pressColor of a drawer menu item? HOT 5
- Title overlaps when the title length increases HOT 5
- `useLinkProps` not generating correct link in browser HOT 4
- **人请看:作为一名资深5年的RN告诉你这个烂库别用,尤其是新手 HOT 2
- In Android 14, app gets restarted when navigating from portrait to landscape screen HOT 2
- React Navigator URLs specified in linking are being ignored when matching urls HOT 9
- Navigate to Screen with Scrollview and back to current screen with ScrollView, cause scroll stuck (not smooth) HOT 3
- react-native-drawer-layout: right drawer stuck in open position. Won't close. HOT 7
- Stack header accessibility issue: tab order HOT 2
- Error using setParams and setOptions, rollback to version @react-navigation/[email protected] is mandatory HOT 11
- Error from useBottomTabBarHeight() limits its usage. HOT 5
- Regression in material top tabs scrolling behavior in RN 0.73 HOT 2
- Drawer headerRight button also opens in the headerLeft. HOT 2
- React native bottom tab bar pushing itself up when opening keyboard HOT 3
- ReactNavigation doesn't build on ReactNative 0.73.5 on iOS (on Android everything is ok) HOT 1
- React native tabview stuck on iOS while switching tabs HOT 3
- Screen presentation type "modal" flickers when opening datepicker on iPhone SE (2022)
- Header focus issue on AndroidTV HOT 1
- 'createDrawerNavigator' is crashing the app
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.