Blog

Registering Component in React Native : Part 2

April 16, 2019/ stw / Javascript frameworks, Reactnative / 0 comments

Registering component process in react native, open your project folder. In root you can see index.js and App.js . In older version files name are index.ios.js and index.android.js. But it does not matter if you are coding for android you can use index.android.js and if you are coding for IOS you can use index.ios.js

In updated installation index.ios.js and index.android.js are removed and index.js and app.js is added as root file

So If you have index.android.js , please use this file as your root android file and as i have index.js and app.js i will use app.js as root file

Index.js : This file use to import App component from app.js file

App.js: this file has code which is used to display landing screen of app

So I am going to use app.js to start our application . in app.js remove all code and write following code

import React, { Component } from 'react';

This code is importing React and Component from react which we will use later in our app. Use of importing Component is  to extends class of our component.

Now we will import design element component View and text using react native so we will write second line

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

View and Text these component help us to design our application. We can apply css to it . View work as container and text work as to write text in it

Now we will register our component so

class YoutubeVideo extends Component {
    render() {
        return (
            <View>
           <Text>Youtube Video</Text>
          </View>
        )
      }
}

Now we will export this component by adding line blow

export default YoutubeVideo;

So your complete code will look like this

import React, { Component } from 'react';

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


class YoutubeVideo extends Component {

    render() {

        return (

        <View>

        <Text>Youtube Video</Text>

        </View>

       );

     }

}


export default YoutubeVideo;

In above code you can see we created a component YoutubeVideo and export it for import on another file, If you will not use export you can’t import it on another file for use

Now we will import and register this component in index.js file

Open index.js file

Now change App import to YoutubeVideo

import App from './App';

You will see code like this

Change to

import YoutubeVideo from './App';

One important thing is here as you can see code is written … from ‘./App’; . Actually we do not use .js extension when we import any component from any file . we just write file name only so App.js is written only as App

Now we will register our component to our application

So now you can see code below AppRegistry. AppRegistry use to register component with app . like we have main component YoutubeVideo so we will register this main component with our app. So to do this we will change last line of AppRegistry

AppRegistry.registerComponent('youtube_video', () => App);

You can see line like this . But we have imported our component as YoutubeVideo so we will change App to YoutubeVideo. Now our line should look like this

AppRegistry.registerComponent('youtube_video', () => YoutubeVideo);

youtube_video this is our project name which we created using react init command above

Now our main component is created and registered to app

Open simulator and click r button two times

Now you can a your text on screen which we added in app.js file using <Text></Text>

So your screen is ready with your component to move further

So your complete code will look like this