React Native app create - Hello World

In this tutorial we will see how easy is to create a Hello World using React Native. React Native is a framework that allows you to create native Android, iOS (iPhone / iPad), and web applications using Facebooks famous React JavaScript library. React Native is a great way to get into native mobile development. Its pretty similar to React so if you have used that, it will be a breeze to learn. That being said, I have created this tutorial to greatly reduce the time it takes to go from no knowledge no the framework all the way to putting up your own hello world app.

Follow the steps to create Hello World program in React Native.

Step 1

Download and Install NodeJS

Step 2

Open Command Prompt (windows) and Install the Expo CLI command line utility.

npm install -g expo-cli

Step 3

Lets create a new React Native project HelloWorld.

expo init HelloWorld

Step 4

Go to HelloWorld folder using Command Prompt.

cd HelloWorld

Step 5

Run the application.

npm start

Step 6

Download and Install Expo client from Android or IOS phone using Play Store and App Store.

Step 7

Scan the QR code generated with the Expo app. Example -

Step 8

Download and Install Visual Studio Code.

Step 9

Go to project folder and Open Visual Studio Code by using below command.

code .

Open App.js and make modification as shown below and save. Now Expo app will automatically reload the changes.

App.js

import { StatusBar } from 'expo-status-bar';
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',
  },
});

techStackGuru