React Native Navigation Access Navigation from Stack.Screen

Question

I have a stack navigator set up like this:

<Stack.Navigator initialRouteName="Friends">
        <Stack.Screen
          name="Friends"
          component={Friends}
          options={{
            title: "Friends",
            headerStyle: {
              backgroundColor: colors.white,
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "700",
              color: colors.red,
              fontSize: 20,
            },
            headerRight: () => (
              <TouchableOpacity
                style={{ marginRight: 20 }}
                onPress={() => /*NAVIGATE TO ADD FRIEND*/ }
              >
                <Ionicons name="md-person-add" size={20} color={colors.red} />
              </TouchableOpacity>
            ),
          }}
        />
        <Stack.Screen
          name="AddFriend"
          component={AddFriend}
          options={{
            title: "Add Friend",
            headerStyle: {
              backgroundColor: colors.white,
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "700",
              color: colors.red,
              fontSize: 20,
            },
          }}
        />
      </Stack.Navigator>

As you can see, I have a button on the right side of the header for the Friends screen, and when that button is clicked I'd like to navigate to the Add Friend screen.

However, I don't know how to access the navigation object that you'd typically access via props.navigation inside of the component passed into Stack.Screen.

How can I achieve this?

Guruparan Giritharan · Accepted Answer · 2020-08-08 14:11:26Z

2

You can access navigation like below, the options can be a function which takes navigation and route and arguments.

<Stack.Screen
      name="Friends"
      component={Friends}
      options={({navigation})=>({
        title: "Friends",
        headerStyle: {
          backgroundColor: colors.white,
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "700",
          color: colors.red,
          fontSize: 20,
        },
        headerRight: () => (
          <TouchableOpacity
            style={{ marginRight: 20 }}
            onPress={() => navigation.navigate('AddFriend') }
          >
            <Ionicons name="md-person-add" size={20} color={colors.red} />
          </TouchableOpacity>
        ),
      })}
    />

answered Aug 8, 2020 at 14:11

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Navigation Access Navigation from Stack.Screen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related