CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Jasper Huang
Jasper Huang

Reputation: 569

React Native Navigation Access Navigation from Stack.Screen

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?

Upvotes: 1

Views: 813

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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>
        ),
      })}
    />

Upvotes: 2

Related Questions