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>
            <Image
            source={{uri: 'https://images.freeimages.com/images/large-previews/a0d/autumn-tree-1382832.jpg'}}
            style={styles.image}/>
         </View>
      );
   }
}

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

• import keyword is been used to import Components required for the application

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

  A react native application is a child of React.Component and is required to be exported from app.js file

  Text, View, Image are native display components

  Stylesheet is used to define styles for react native components

• A class App is been declared as child of React.Component and is the default export for app.js

  export default class App extends React.Component

  This App is then imported in index.js file and is registered as the default default component for current application

  export keyword can enable a class, function, variable etc as usable by other classes or files

• render()

  function of a React.Component provides the component(s) to be displayed

• Above code uses View component as a container for Text and Image components of react-native package

  Like React, React Native uses ES6 (a Javascript variant) features for classes and functions and uses JSX (Typescript) for markup

• When assigning values to the attributes of a JSX component, double brackets ({{ }}) are used toprovide colon (:) separated key value pairs, single brackets ({ }) forvariables or constants and square bracket enclosed in curly braces for lists ({[ ]})
• Stylesheet is used to create variables for style properties which correspond to CSS properties, but follow camelCase naming unlike CSS

  A javascript object with style properties or a stylesheet variable can be provided as value to style attribute of a react native component

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