React Native Hello World example step by step Android

0

React is popular Javascript Library and React Native combines the best parts of native development with React. Today, We are going to see React Native Hello World example step by step. We are going to learn Android Hello World example using React Native.

Requirements

First of all, You have to install the Android Studio on your system and other requirements by following this article. Because We are going to create an Android Application using React Native.

React Native Hello World example step by step Android

So, Everything is fine. Let’s create the first React Native application by following the command.

npx react-native init HelloWorld

After, Creating the React Application Let’s goto inside the application directory by following the command.

cd HelloWorld

React Native application is ready for use. First of all, We should set the Android SDK directory path.

Let’s create a new file name local.properties inside the android directory. Then open the file and set the Android SDK path like below.

sdk.dir = /Users/USERNAME/Library/Android/sdk

// For Window Operating system
sdk.dir = /C:/Android/sdk

Just change the Android SDK path as per your system.

Now, Let’s open the App.js file and let’s write the Hello World code like

import React, { Component } from 'react';
import{
  Text,
  View,
  StyleSheet
} from 'react-native';

class HelloWorld extends Component{
  render(){
    return(
      <View style={styles.viewCenter}>
        <Text style={styles.textFontSize}>Hello World!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  viewCenter : {
    flex : 1,
    justifyContent : "center",
    alignItems : "center",
  },

  textFontSize : {
    fontSize : 32,
  }

});

export default HelloWorld;

Finally, We are ready with the first Hello World example. Now, Let’s run the React Native application by following the command.

npx react-native run-android

It will launch the Application inside the Android Emulator and the output like

React Native Hello World example step by step Android

If you face any issue after following the code please write the comment below. We are always ready for help.

Share.

Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.