Button linking to a screen in headerRight tab

  1. SDK Version: 36.0.0
  2. Platforms(Android/iOS/web/all): Expo client on iOS and iOS simulator

I’m trying to create a simple button in header bar who push a new screen.
Like this with a back button : https://reactnavigation.org/docs/en/stack-navigator.html

I can’t access navigation.navigate in App.js, it’s undefined.
I already have a BottomTabNavigator but my new button is placed on headerRight in Stack.Navigator in App.js.
The new screen must cover the 5 bottom tabs.

I think that my structure is not the right one to do what I want…
I find a lot of things but nothing is suitable for this SDK version.

App.js

return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        <NavigationContainer ref={containerRef} initialState={initialNavigationState}>
          <MyStack />
        </NavigationContainer>
      </View>
    );

MyStack

  function MyStack(props) {
    const {navigation} = props;
    return (
      <Stack.Navigator>

        <Stack.Screen
          name="Root"
          component={BottomTabNavigator}
          options={{
            headerRight: ({ navigation }) => (
              <View>
                <TouchableHighlight
                  onPress={() => navigation.navigate('Profile')}
                  style={styles.headerIconRight}
                  underlayColor={Colors.tabBar}
                >
                  <MaterialCommunityIcons name="shield-account" color={Colors.tabIconDefault}  size={26} />
                </TouchableHighlight>
              </View>
            ),
          }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }

Icon on the top right

Thanks for the help

Okay, got it!
Hope this will help other people.

In App.js, I cleaned MyStack

  function MyStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={BottomTabNavigator}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }

I added headerRight options in BottomTabNavigator in navigation/BottomTabNavigator.js,created by the default expo tabs project.

export default function BottomTabNavigator({ navigation, route }) {
  // Set the header title on the parent stack navigator depending on the
  // currently active tab. Learn more in the documentation:
  // https://reactnavigation.org/docs/en/screen-options-resolution.html
  navigation.setOptions({
    headerTitle: getHeaderTitle(route),
    headerTitleStyle: {
      color: Colors.tabIconDefault,
      fontFamily: 'league-gothic',
      fontSize: 32
    },
    headerStyle: {
      backgroundColor: Colors.tabBar,
      borderBottomWidth: 0,
      shadowOffset: { height: 0, width: 0 }
    },
    headerTintColor: {
      color: Colors.tabIconDefault,
    },
    headerRight: () => (
      <View>
        <TouchableHighlight
          onPress={() => navigation.navigate('Profile')}
          style={styles.headerIconRight}
          underlayColor={Colors.tabBar}
        >
          <MaterialCommunityIcons name="shield-account" color={Colors.tabIconDefault}  size={26} />
        </TouchableHighlight>
      </View>
    ),
  });

I still do not know how to have navigator in App.js but anyway, this does not seem to me to be the right way to go.

Hi

Perhaps the following snack will help?

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.