CODEWITHSUNDEEP
react-native
Sean Lee
Sean Lee

Reputation: 37

How to create multiple screens on React Native?

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,

Upvotes: 1

Views: 7827

Answers (1)

Ferin Patel
Ferin Patel

Reputation: 3968

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"

Upvotes: 1

Related Questions