React Native Navigation Access Navigation from Stack.Screen - reactjs

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?

Answer 1

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