React Native Class based Components

Hi guys. In the last article, we discussed how to add styles in React Native. In this article, we will discuss how to create React Native Class based Components.

Before we begin, let’s discuss the difference between class based component and functional based component.

React Native Functional based Components

Functional based component is a great way to introduce you to React Native. But its functionality is little bit limited. In functional based components, you put data in one end and JSX comes in the other end. That’s the only thing it can do. There’s no capability to do more complex tasks such as fetch data or initiate more complicated operations. We normally use functional based components for representational needs like displaying some content to the user. It’s only ability is to present static data.

React Native Class based Components

React Native Class based Components are more complex and more code to be written. But they have more functionalities which functional based components doesn’t have. They can be used for fetching data, easier to use to write large components and also easier to organize large amounts of data because we gets a nice class type structure where you can add many helper methods in there. These types of components are called class based because it is based on ES6 classes(ES6 is the new version of JavaScript) that extends a base class called Component.

Let’s create a class based component. Before that we need to create a file structure because if you are building a project, you should have a nice file structure.

Creating a file structure for your project

First create a folder inside your project folder named ‘src’. Inside that folder, create another folder named ‘components’. Now move App.js from its current position to inside ‘src’ folder. Now your file structure should be as following.

File Structure of the project

Now you have changed the position of App.js file. So, you have to change index.js file according to that. You have to change the path of import statement of App.js file inside index.js file.

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Now we are done with creating file structure for now. Let’s build a class based component now.

Creating a class based component

First, create a javaScript file inside components folder and name it ‘DataList.js’. Inside that file, write the following code.

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

class DataList extends Component {
    render(){
        return(

        );
    }
}

export default DataList;

Here, just like in class based components we have to import the two react native libraries. As I mentioned before we extend a base class called Component. That means we are borrowing bunch of functionalities from that class. For that, as you can see in the first line of code, we have imported Component class from react library. Inside that class based component, we write a render method and return method inside the render method. We have to export the component at the end as well. This is how you create a React Native Class based Components. Let’s add some JSX into that code.

import React, { Component } from 'react';
import { Text } from 'react-native';

class DataList extends Component {
    render(){
        return(
            <Text>Class based Components has more functionalities.</Text>
        );
    }
}

export default DataList;

We have finished coding a basic class based component now. But, if you run the app now, you wouldn’t see any change in the UI because we didn’t import it in App.js. We know index.js is the only file that runs in mobile app as I have mentioned in a previous chapter. App.js have been imported into index.js. So, to show DataList.js, we need to import it in App.js. Add the following import statement in App.js.

import DataList from './components/DataList';

Now, we have to add the DataList component inside return method in App.js, as a JSX element.

To keep one root element, wrap the current JSX elements with another View tag in App.js as given below.

const App = () => {
  return (
    <View>
      <View style={styles.viewStyle}>
        <Text style={styles.textStyle}>Hello World!</Text>
      </View>
      <DataList/>
    </View>
  );
}

We added View tag as a root element and entered DataList component inside that. This is how you import a component inside another component. Now, let’s run our app again.

Class based components - Emulator

Well, we have got what we wanted. We have previous header section as well as new DataList class component.

I have given you the whole code of App.js, DataList.js and index.js below.

DataList.js
import React, { Component } from 'react';
import { Text } from 'react-native';

class DataList extends Component {
    render(){
        return(
            <Text>Class based Components has more functionalities.</Text>
        );
    }
}

export default DataList;
App.js
//Import a library to help to create a component.
import React from 'react';
import { Text, View } from 'react-native';
import DataList from './components/DataList';

//Create the component.
const App = () => {
  return (
    <View>
      <View style={styles.viewStyle}>
        <Text style={styles.textStyle}>Hello World!</Text>
      </View>
      </DataList>
    </View>
  );
}

const styles = {
  viewStyle: {
    backgroundColor: '#04A5FA',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  textStyle: {
    fontSize: 20,
    fontWeight: 'bold'
  }
}

//Render it to the device.
export default App;
index.js
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () =&gt; App);

This is only the creation of class based components. We will learn more about class based components and what it can do, in the future articles.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *