React Native Smart Components

In this article, we are going to learn about Smart components in React Native. The smart component is one of the categories of React Components so before diving into the smart components detail. A Component is one of the core building blocks of React and React-Native. The component is a block of code that can be reused again, making it is easier for developers to create UI. It is easier to understand the code because of Components. To organize the react-native applications we have to split the components into dumb and smart components so that it becomes easier for us to handle state changes and data flow.

Smart Components: It is the class-based component that is responsible for handling and managing the state of the application. They have constructor() functions in which they define their own state. They are also known as container components.

Syntax: Following is the syntax of the Smart Component

class App extends Component {
    constructor(props){
        // Code
    }
}

Characteristics of Smart Component:

• They are used for passing down the application data to child components
• They know everything about lifecycle methods, calling APIs or libraries.
• They do not include styling.
• They are stateful. It manages the state of the application.
• They know when to render and re-render the component.

Installation: Here we will use the Expo CLI version that will much smoother to run your React Native applications. Follow the below steps one by one to set up your React native environment.

Step 1: Open your terminal and run the below command.

npm install -g expo-cli

Step 2: Now expo-cli is globally installed so you can create the project folder by running the below command.

expo init "projectName"

Step 3: Now go into the created folder and start the server by using the following command.

cd "projectName"
npm start 

Project Structure: It will look like this.

Example: In this example, we are passing data from the smart component to the child component.

App.js

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Welcome To GFG',
    };
  }

  render() {
    const { data } = this.state;
    return (
      <View>
        <Child dataFromParent={data} />
      </View>
    );
  }
}
class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.dataFromParent,
    };
  }

  render() {
    const { data } = this.state;
    return <Text style={styles.text}>{data}</Text>;
  }
}

const styles = StyleSheet.create({
  text: {
    color: 'green',
    fontSize: 25,
  },
});

Start the server by using the following command.

npm run android

Output: