Creating a Screen with React Native

Reading Time: 2 minutes

Screens in React Native function as standalone objects constructed with various components. In this example, I will show you how to create a Screen.

First, create a screens folder where we will place the screens. Inside this folder, create a .js file called Login.js.

Inside the Login.js file, we will have the following:

import React from "react";
import { Text } from "react-native";

//Button component
const Login = () => {

    return (
            <Text>"Login Screen"</Text>   
    )
};

export default Login;

As you can see, it is an exact copy of App.js. This represents a screen.

To use it in another screen, for example, to load it within App.js, we need to add the following to our App.js file:

import React from "react";
import { View } from "react-native";

//Import screens
import Login from './screens/Login';

//Create a component named APP
const App = () => {

    return (
        <View >
            <Login />
        </View>)
};

export default App;

As you can see, the first thing we did was to import the screen we created:

Once imported, we can use it within the render of the const App by adding it as follows:

And with this, our screen is loaded within App.js.

This is important because each screen will have its own design and styles within the screen object itself.

DevCodeLight