How to create multiple screens on React Native? - react-native

Question

import React from 'react';
import {TextInput, StyleSheet, Text, View } from 'react-native';
import {Button} from 'react-native-elements';
import { Navigation } from 'react-native-navigation';
import Signup from "./Signup";
export default function App() {
return (
<View style={styles.container}>
<Text style={{marginTop: 0}}>Junior Facebook</Text>
<TextInput placeholder="Email" style={{width: 80, height: 30}}/>
<TextInput placeholder="Password" style={{width:80, height: 30}}/>
<Button title="Log In">Log In</Button>
<Button title="Sign Up">Sign Up</Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am trying to make a new screen called "Signup". How can I?
Thank you
I heard I can use react navigation so I googled it but it does not work either.
Please help me out here,

Answer 1

You need to install Stack Navigator module to do this.
Create Stack navigator with screen like below code. (here i have used signin Page and signup Page, Please change to your pages and also import).
import this stack navigator into app.js file and wraps it with navigation container;
Link to official docs
Stack Navigator
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import SignIn from "../screens/auth/SignIn";
import SignUp from "../screens/auth/SignUp";
const AuthStack = () => {
const AuthStack = createStackNavigator();
return (
<AuthStack.Navigator>
<AuthStack.Screen
name="Sign In"
component={SignIn}
options={{
headerTitle: "",
headerTransparent: true
}}
/>
<AuthStack.Screen
name="Sign Up"
component={SignUp}
options={{
headerTitle: "",
headerTransparent: true
}}
/>
</AuthStack.Navigator>
);
};
export default AuthStack;
App.js
import other stuff;
import { NavigationContainer } from "#react-navigation/native";
import AuthStackScreen from "./routes/AuthStack";
export default App = () => {
return (
<SafeAreaView>
<NavigationContainer>
<AuthStackScreen />
</NavigationContainer>
</SafeAreaView>
);
SignIn.js
const SignIn = ({navigation}) => {
return (
<button onClick={navigation.navigate("Sign Up")}>Click to Navigate</button>
);
}
Package.json
"#react-native-community/masked-view": "0.1.5",
"#react-navigation/native": "^5.0.5",
"#react-navigation/stack": "^5.0.5",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7",
"react-native-webview": "7.4.3"