After creation of React Native application we can see below folder structure.

Folder Structure

packages.json

This file contains all dependencies for project.

package.json

node_modules 

It has all the dependencies and sub-dependencies of our project

index.js

it is starting point for the application

App.js

This will the code willl show on UI

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow strict-local

 */

 

import React from 'react';

import {

  SafeAreaView,

  StyleSheet,

  ScrollView,

  View,

  Text,

  StatusBar,

} from 'react-native';

 

import {

  Header,

  LearnMoreLinks,

  Colors,

  DebugInstructions,

  ReloadInstructions,

} from 'react-native/Libraries/NewAppScreen';

 

const App: () => React$Node = () => {

  return (

    <>

      <StatusBar barStyle="dark-content" />

      <SafeAreaView>

        <ScrollView

          contentInsetAdjustmentBehavior="automatic"

          style={styles.scrollView}>

          <Header />

          {global.HermesInternal == null ? null : (

            <View style={styles.engine}>

              <Text style={styles.footer}>Engine: Hermes</Text>

            </View>

          )}

          <View style={styles.body}>

            <View style={styles.sectionContainer}>

              <Text style={styles.sectionTitle}>Step One</Text>

              <Text style={styles.sectionDescription}>

                Edit <Text style={styles.highlight}>App.js</Text> to change this

                screen and then come back to see your edits.

              </Text>

            </View>

            <View style={styles.sectionContainer}>

              <Text style={styles.sectionTitle}>See Your Changes</Text>

              <Text style={styles.sectionDescription}>

                <ReloadInstructions />

              </Text>

            </View>

            <View style={styles.sectionContainer}>

              <Text style={styles.sectionTitle}>Debug</Text>

              <Text style={styles.sectionDescription}>

                <DebugInstructions />

              </Text>

            </View>

            <View style={styles.sectionContainer}>

              <Text style={styles.sectionTitle}>Learn More</Text>

              <Text style={styles.sectionDescription}>

                Read the docs to discover what to do next:

              </Text>

            </View>

            <LearnMoreLinks />

          </View>

        </ScrollView>

      </SafeAreaView>

    </>

  );

};

 

const styles = StyleSheet.create({

  scrollView: {

    backgroundColor: Colors.lighter,

  },

  engine: {

    position: 'absolute',

    right: 0,

  },

  body: {

    backgroundColor: Colors.white,

  },

  sectionContainer: {

    marginTop: 32,

    paddingHorizontal: 24,

  },

  sectionTitle: {

    fontSize: 24,

    fontWeight: '600',

    color: Colors.black,

  },

  sectionDescription: {

    marginTop: 8,

    fontSize: 18,

    fontWeight: '400',

    color: Colors.dark,

  },

  highlight: {

    fontWeight: '700',

  },

  footer: {

    color: Colors.dark,

    fontSize: 12,

    fontWeight: '600',

    padding: 4,

    paddingRight: 12,

    textAlign: 'right',

  },

});

 

export default App;

 

 

Simple Hello world example

import React from 'react';

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

 

export default class App extends React.Component {

  render() {

    return (

      <View>

        <Text>Hello World</Text>

      </View>

    );

  }

}

 

 


Subscribe For Daily Updates