Button linking to a screen in headerRight tab

Expo SDK
1
  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 : Redirecting to https://reactnavigation.org/docs/stack-navigator

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

Capture d’écran 2020-02-20 à 21.28.01
Capture d’écran 2020-02-20 à 21.28.01322×570 11 KB

Thanks for the help

2

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.

3

Hi

Perhaps the following snack will help?

4

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