0

I want to set the title of the TabNavigator as 'Stylebook' with a button.

However, the screens which are children of TabNavigator change the 'title'. I think it's overriding the 'title' prop. How can I avoid it?

enter image description here

This is TabNavigator (my TabBar is in the StackNavigator)

export default TabNavigator(
 {
   Category: {
     screen: StylebookCategoryScreen
   },
   All: {
     screen: StylebookAllScreen
   }
 } ,{
  navigationOptions: ({ navigation }) => ({
    title: 'Stylebook',
    headerRight: (
      <Button onPress={() => navigation.navigate('Wardrobe')}
        title="Wardrobe"
      />
    )
 })
});

StylebookAllScreen is almost identical with StylebookCategoryScreen.

class StylebookAllScreen extends Component {
  static navigationOptions = {
   title:'All'
  }

  render() {
    return (
      <View>
        <Text>StylebookALLScreen</Text>
        <Text>StylebookALLScreen</Text>
      </View>
    )
  }
}

export default StylebookAllScreen;

I can also change whole structure of the navigator, if I can fix this.

Thanks!

merry-go-round
  • 4,533
  • 10
  • 54
  • 102
  • I think if you remove the `title` from the tab screens, this won't happen. The tabs get the name you define in the navigator by default, so that should be fine. – Kraylog Sep 16 '17 at 15:29
  • @NimrodArgov That was close, but not right. When I remove `title` from tab screens, those titles are changed to 'STYLEBOOK'; 'all' -> 'stylebook', 'category' -> 'stylebook'. – merry-go-round Sep 16 '17 at 15:34
  • Is your hierarchy `StackNavigator -> TabNavigator -> Component`? – Kraylog Sep 16 '17 at 15:36
  • It's `TabNavigator -> StackNavigator -> TabNavigator -> Component`. Um.. it's similar – merry-go-round Sep 16 '17 at 15:37

1 Answers1

1

You have to put your StylebookAllScreen component into a StackNavigator and then put that into your TabNavigator. Putting it into a StackNavigator allows you to set props like 

navigationOptions: ({navigation}) => ({
      title: "Stylebook",
    }),

With headerLeft or headerRight you can add a Component (such as a Button to the left/right of your headline.

Try something like this:

const StylebookStack = StackNavigator({
    StylebookAllScreen: {
        screen: Map,
        navigationOptions: ({ navigation }) => ({
            title: "Stylebook",
            headerTitleStyle: {
                ....
            },
        }),
    },
});

And then put that into your TabNavigator

export default TabNavigator(
 {
   Category: {
     screen: StylebookCategoryScreen
   },
   All: {
     screen: StylebookStack // <--- HERE
   }
 } ,{
  navigationOptions: ({ navigation }) => ({
    title: 'Stylebook',
    headerRight: (
      <Button onPress={() => navigation.navigate('Wardrobe')}
        title="Wardrobe"
      />
    )
 })
});
four-eyes
  • 10,740
  • 29
  • 111
  • 220
  • I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:26