Create Your First App Using React Native

In this article, you’ll learn the basics of creating a React Native app with Expo.

Prerequisites:

• Node.js must be installed.
• npx must be installed
• Any code editor like Visual Studio Code
• Basic knowledge of React concepts, like JSX, components, state, and props.

You also need to install Expo. Expo provides a set of tools to make your mobile development with React Native easier.

npm install -g expo-cli

• On your phone, you must lastly install Expo Go. Both iOS and Android devices may use it.
• By installing Expo Go on your phone, you’ll be able to test your app directly on your phone as you make changes.

Let’s get start with creating a new react-native application.

• To create an application in React-Native first of all you need to install Visual Studio Code Editor. It is helpful to create application in React-Native. You can also use other editors also.
• The following command should be entered into your terminal to start a new React Native project:

expo init awesomeproject

• You’ll be asked to choose the kind of project you want to create, choose blank.
• The project will be setup and the basic requirements needed to build a React Native app will be installed when you select blank.
• After the setup is done,  Go to that new application using the following command:

cd awesomeproject

• Now, open the App.js file. Change the code in the App function

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <>
      <View style={styles.container}>
        <Text>Hello World!!!</Text>
        <StatusBar style="auto" />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

• The HTML from the app.js will appear on the web. Any changes you make to the app.js file will now be immediately visible on the site.

Output: