Newby Coder header banner

Basic React Native App

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcApp)

react-native init NcApp

This creates a directory named NcApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

App Code

Find App.js file inside app directory

Replace its content with following code, which is for an application which displays some text and an image

There's an attempt to briefly go-through this code, below it

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

export default class App extends React.Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text style={styles.text}>Basic App in React Native</Text>
            <Text style={styles.text}>With an Image</Text>
            source={{uri: ''}}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'white',
  image: {
      position: 'absolute',
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
      zIndex: -1,
  text: {
      fontSize: 26,
      fontWeight: 'bold',
      textAlign: 'center',
      margin: 10,

Run instructions

Running in Android

cd into project directory (here NcBlurApp)

cd NcBlurApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android in project directory:

react-native run-android

Running in ios

cd into project directory (here NcBlurApp)

cd NcBlurApp

Go to ios directory inside project directory and install any required CocoaPods dependencies using pod command

cd ios && pod install && cd ..

Enter following command in project directory:

react-native run-ios

This can take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work