React Native AppRegistry

As we know a component is a javascript function that returns some amount of JSX. But these components don’t run on their own we have to register them so that they can render on our devices. We have to specifically tell react-native an entry point from where it should start rendering.  

This entry point is specified with the help of “AppRegistry”. AppRegistry helps us to register the entry point of our react-native application. We have to register at least one component in our react application.

Prerequisite:

• Basic Knowledge of ReactJS and React Native.
• NodeJs should be installed in your system
• Basic Knowledge of HTML, CSS, and JS.

Let’s see the usage of AppRegistry with some examples.

Creating Application: Follow the below steps to create an application:

Step 1: The following command will install expo-cli when your terminal is open.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init Project

Step 3: Now go into your project folder i.e. Project

cd Project

Project Structure: The project structure should look like this:

Example 1: In Index.js we will be creating a functional component and registering it using AppRegistry. myComponent is a simple component returning Hello World! Learning AppRegistry!!!! message on the screen. 

index.js

import React from "react";
import { AppRegistry, StyleSheet, Text, View }
    from "react-native";

// import Constants from 'expo-constants';
// code for myComponent which is showing Hello World
function myComponent() {
    return (
        <View style={styles.container}>
            <Text style={styles.fontStyle}>
                Hello World! Learning AppRegistry!!!!
            </Text>
        </View>
    );
}

// Styles for Text and view
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        textAlign: 'center',
        backgroundColor: '#ecf0f1',
        padding: 8,
    },
    fontStyle: {
        margin: 24,
        fontSize: 30,
        fontWeight: 'bold',
        textAlign: 'center',
    },
});

// "project" is the name of the main react-native Folder
// the second argument is an arrow function
// returning myComponent defined above
AppRegistry.registerComponent("project", () => myComponent);

// runApplication() loads the javascript bundle and runs the app.
AppRegistry.runApplication("project", {
    rootTag: document.getElementById("root")
});

Step to run the application: Open the terminal and type the following command.

npm start

Output:

To define the entry point of our application we uses, AppRegistry.registerComponent()

AppRegistry.registerComponent("folderName", () => componentName);

• First argument: “folderName” is the main react-native application name
• Second argument: is a function returning the component which you want to render on the device.

Steps to Register a component:

• Import AppRegistry from react-native
• Create a component
• Register the component to the AppRegistry with the help of AppRegistry.registerComponent() function. 
• runApplication() loads the javascript bundle and runs the app. 

Example 2: Let’s create an individual component in a separate file and register it in the index.js file. App.js is exporting a functional component by default which in turn returns “Hello World!! Using AppRegistry”.

App.js

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


function App() {
    return (
        <View style={styles.app}>
            <View style={styles.header}>
                <Text style={styles.code}>
                    Hello World !! Using AppRegistry
                </Text>
            </View>
        </View>
    );
}

// Styles for Text and View components
const styles = StyleSheet.create({
    app: {
        marginHorizontal: "auto",
        maxWidth: 500
    },
    header: {
        padding: 20
    },
    code: {
        fontFamily: "monospace, monospace",
        fontSize: 30
    }
});

export default App;

index.js

import App from "./App";
import { AppRegistry, StyleSheet, Text, View }
    from "react-native";

// "project" is the name of the main react-native Folder
// the second argument is an arrow function returning
// App, which is imported above
AppRegistry.registerComponent("project", () => App);

// runApplication() loads the javascript bundle
// and runs the app.
AppRegistry.runApplication("project", {
    rootTag: document.getElementById("root")
});

Output: