Telegram API Question posted in
A comprehensive official documentation can be found here.

navigationOptions headerLeft,headerRight and title not working? – Telegram

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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,
    };
}

  2. 0

    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>
),
    Login or Signup to reply.
  3. 0

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

    • headerRight: () => <SomeElement />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search