Navigation between screen in react native - reactjs

Question

So I try to navigate between 2 screens. I created a button on the tab bar(right)
but the problem is that it always says that is undefined.
Here is the code:
static navigationOptions = {
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => this.props.navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}

Answer 1

You can use react-native-router-flux (npm install --save react-native-router-flux)
just make one Navigator.js file and define each page you wanted to navigate.
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';
const Navigator = () => {
return (
<Router>
<Scene key="root">
<Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial />
<Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
</Scene>
</Router>
);
};
export default Navigator;
now in your App.js file add this:
import Navigator from './src/Navigator.js';
export default class App extends Component<Props> {
render() {
return (
<Navigator />
);
}
}
now in your login.js when you click on login button write this:
import { Actions } from 'react-native-router-flux';
onLoginClick() {
Actions.feedscreen();
}
Thats it.. happy coding.

Answer 2

Looking at https://reactnavigation.org/docs/4.x/redux-integration/#setparams-from-your-screen, probably you should do:
static navigationOptions = ({navigation}) => ({
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
When using this inside a static property or method it will refer to the class itself and not the instance of the component.

Answer 3

using react-navigation v5 component base api :
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("home")} />
</View>
);
}
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("details")} />
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
or with old v4 api:
// Other code for HomeScreen here...
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
// Other code for App component here...
Inside these components you can asses navigation prop, which consists of helper functions for navigating.Some frequently used one are
naviagtion.navigate("screenName") //navigates to new screen
navigation.goBack() // go backs to previous screen
navigation.push("screen name") // navigates to new screen with stack animation . this only works for stackNavigator
navigation.pop()// navigates to previous screen with stack animation . this only works for stackNavigator