Dumb Components in React Native

In this article, we are going to learn about Dumb components in React Native. The dumb component is one of the categories of React Components, so before diving into the dumb component details. Let’s know a little bit about components. A Component is one of the core building blocks of React. The component is a piece of code that is reusable. Every application in React or react-native is made up of components. With the help of components, the task of creating UIs becomes much easier. We work on every component independently and merge them all in a parent component to create our final UI.

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. 

Now let’s learn about Dumb Component.

Dumb Components

Dumb components are the most reusable components whose only work is to render something to the view, or we can say the DOM. Dumb components mainly focus on a presentation, which is why it is also called Presentational components. Once the presentation is done, the component is done with it. They are only concerned about how things look. We can write a dumb component in one place and use it several times in the application. Doing so will save a lot of time. If we want to change anything, we need to update the code in only one place, and all screens using that dumb component will also get updated. This component does not contain any business logic. It only has the render() method. The dumb component also does not know anything about the state or any lifecycle hooks. It can receive data and a callback from the parents via props. Below is the syntax of the dumb component.

Syntax:

const Function = (props) => {
   return(
       //  ...code of creating any element
    )
}

Characteristics of Dumb Components:

• Focus on the UI: Dumb components mainly focus on how things look. So almost all UI components like buttons, inputs, modals, etc should be considered dumb components.
• Accepting props: Dumb components accept props to receive data and the callback function from the parent component. This makes them dynamic and reusable.
• The state is rarely included: Dumb component does not include state, the only time it includes state is to manipulate the UI itself not the data.
• No dependencies: Dumb components do not require any dependencies on the rest of the app.
• Easy Testing:  It is easy to test dumb components as it only takes props and returns the UI. It does not have any complex logic or state for data.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: “Your Project is ready!” as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press “a” as mentioned in the image below.
  • For Physical Device, Download the “Expo Go” app from the Play Store. Open the app, and you will see a button labeled “Scan QR Code.” Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you’re using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

– Import libraries: Import required libraries at the top of the file.

// Importing necessary libraries
// Importing React and React Native components
import React from "react";
// Importing StyleSheet, Text, and View from react-native
import { StyleSheet, Text, View } from "react-native";

– Dumb Component: Create a “Dumb Component”, which have a Text component wrapped with a Container.

// Creating a functional component
const GFG = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Geeksforgeeks</Text>
    </View>
  );
};

– Style Sheet: Create a Style sheet for the container and text in the dumb component.

// Creating a stylesheet
const styles = StyleSheet.create({
  container: {
    backgroundColor: "green",
    alignItems: "center",
  },
  text: {
    fontSize: 25,
    backgroundColor: "white",
    margin: 10,
    borderRadius: 5,
  },
});

– Call Components: Call the created dumb components in the main App Component and export the App.

// Creating the main App component
export default function App() {
  return (
    // Using the GFG component multiple times
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <GFG />
      <GFG />
      <GFG />
    </View>
  );
}

In this example, we have created the dumb component named GFG and used it three times in the APP function. 

Complete Source Code:

App.js:

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

// Creating a functional component
const GFG = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Geeksforgeeks</Text>
    </View>
  );
};

// Creating a stylesheet
const styles = StyleSheet.create({
  container: {
    backgroundColor: "green",
    alignItems: "center",
  },
  text: {
    fontSize: 25,
    backgroundColor: "white",
    margin: 10,
    borderRadius: 5,
  },
});

// Creating the main App component
export default function App() {
  return (
    // Using the GFG component multiple times
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <GFG />
      <GFG />
      <GFG />
    </View>
  );
}

Output: