React Native navigation v5 navigate to another screen from header - react-native

Question

I am currently following a tutorial that has an older version of navigator. I have update the code to use v5. When moving to a screen the navigation function is available as in
const CreateScreen = ({ navigation }) => {
I am then able to set the navigation with
onPress={() => navigation.navigate("home")
Please can someone show me how to expose the navigation function within the createStackNavigator function
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import IndexScreen from "./src/screens/IndexScreens"
import ShowScreen from "./src/screens/ShowScreen"
import CreateScreen from "./src/screens/CreateScreen"
import EditScreen from "./src/screens/EditScreen"
import { Provider} from "./src/context/BlogContext"
import { Feather } from '#expo/vector-icons';
import { EvilIcons } from '#expo/vector-icons';
const Stack = createStackNavigator();
const MyStack = () => (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={IndexScreen}
options={{
title: 'Blog Posts',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center",
headerRight: () => (
<TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
<Feather name="plus" size={30} />
</TouchableOpacity>
)
}}
/>
<Stack.Screen
name="Show"
component={ShowScreen}
options={{
title: 'Blog Post Detail',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center",
headerRight: () => (
<TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
<EvilIcons name="pencil" size={35} />
</TouchableOpacity>
)
}}
/>
<Stack.Screen
name="Create"
component={CreateScreen}
options={{
title: 'Create A Blog Post',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center"
}}
/>
<Stack.Screen
name="Edit"
component={EditScreen}
options={{
title: 'Edit Blog Post',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center"
}}
/>
</Stack.Navigator>
);
const App = () => (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
export default () => {
return <Provider>
<App />
</Provider>
}

Answer 1

change your options
options={{
title: 'Blog Posts',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center",
headerRight: () => (
<TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
<Feather name="plus" size={30} />
</TouchableOpacity>
)
}}
to
options={({ navigation }) => (
{
title: 'Blog Posts',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: "center",
headerRight: () => (
<TouchableOpacity style={{ marginRight: 15}} onPress={() => navigation.navigate("Show")}>
<Feather name="plus" size={30} />
</TouchableOpacity>
)
})}
Do the same with the options in Show stack screen.
Hope this helps!

Answer 2

Replace navigation.navigate("Show") with navigation.navigate("Create")