CODEWITHSUNDEEP
react-native
keinz
keinz

Reputation: 103

navigationOptions headerLeft,headerRight and title not working?

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.

Upvotes: 1

Views: 7236

Answers (3)

Ahmet Dogan
Ahmet Dogan

Reputation: 11

Because that methods are deprecated in 'navigationOptions'. headerRight: <SomeElement /> will be removed in a future version. As like

  • headerRight: () => <SomeElement />

Upvotes: 0

keinz
keinz

Reputation: 103

I made it work by using the following codes in my screen. 

static navigationOptions = ({ navigation }) => {
    const {state} = navigation;
    const {} = state;
    return {
        headerStyle:{
            backgroundColor: "Transparent",
            marginRight: 20,
            marginLeft: 20,
        }, 
        headerLeft: (
            <TouchableOpacity>
                    <Icon name="bars" color={Colors.red} size={25}/>
            </TouchableOpacity>
        ),
        headerLeftStyle: styles.drawerIcon,
        headerRight: (
            <TouchableOpacity>
                    <Icon2 name="sc-telegram" color={Colors.red} size={30} />
            </TouchableOpacity>
        ),
        headerRightStyle: styles.planeIcon,
        headerTransparent:  true,
    };
}

Upvotes: 2

Sapan Kumar Das
Sapan Kumar Das

Reputation: 1

Use Icon instead of Icon2 if you are using version with 3x defaultNavigationOptions instead of navigationOptions

headerRight: (
   <TouchableOpacity>
  //-->I changed here  <Icon name="sc-telegram" color={Colors.red} size={30} /> 
   </TouchableOpacity>
),

Upvotes: 0

Related Questions