What I want: put a touchable icon left side that will navigate to my drawer navigator once pressed and the title in the middle then in the right side an icon that has future purposes once clicked
What I tried doing:
I tried to put the navigationOptions under the MainScreen it still doesn’t work.
This is my code in my AppNavigation.js
const primaryNav = createStackNavigator({
LaunchScreen: { screen: LaunchScreen },
MainScreen: {
screen: MainScreen,
},
}, {
// Default config for all screens
headerMode: 'none',
initialRouteName: 'MainScreen',
navigationOptions: {
headerStyle: styles.header,
title: 'TY, Next',
headerStyle:{
backgroundColor: "Transparent",
marginRight: 20,
marginLeft: 20,
},
headerRight: (
<TouchableOpacity>
<Icon2 name="sc-telegram" color={Colors.red} size={30} />
</TouchableOpacity>
),
headerLeft: (
<TouchableOpacity>
<Icon name="bars" color={Colors.red} size={25}/>
</TouchableOpacity>
),
}
})
Any idea why my code isn’t running? There’s no title of Ty next not even the 2 icons that I added. I am using igniteCLI for react native.
3
Answers
I made it work by using the following codes in my screen.
Use Icon instead of Icon2
if you are using version with 3x
defaultNavigationOptions
instead of navigationOptions
Because that methods are deprecated in ‘navigationOptions’.
headerRight: <SomeElement />
will be removed in a future version.As like
headerRight: () => <SomeElement />