What is rendering prop pattern in React Native ?

React Native is a javascript-based language that is used for designing UI (User Interface). In this article, we will learn about rendering prop patterns in React Native.

The Render Props is a technique in ReactJS for sharing code between React components using a prop whose value is a function. The child component takes render props as a function and calls them instead of implementing its own render logic. In brief, we pass a function from the parent component to the child component as render props, and the child component calls that function instead of implementing its own logic.

To create a React-Native App, we will use the Expo CLI version that will much smoother to run your React Native applications.

Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

Below is the step-by-step implementation of the above approach.

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"

Project Structure: It will look like the following

Step to run the application: To execute React-Native Program use the following command.

npm start web

Example: In this example, a button is passed as a prop from Parent Component. An alert message is shown by pressing that button. 

Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

import * as React from 'react';
import { Button,Alert,Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

function ChildComponentWithProps(props) {
  return (
    <View>
      <Text>I am Child Component</Text>
      {props.renderProps()}
    </View>
  );
}

function ParentComponentPassingProps() {
  return (
    <ChildComponentWithProps
      // Passing render props to the child component
      renderProps={() => {
        return (
          <View>
             <Button
                title="Button from Parent"
                onPress={() => Alert.alert('Hi Geek!! ')}
              />
          </View>
        );
      }}
    />
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.GFG}>GeeksforGeeks</Text>
      <Text>Rendering prop pattern in React-native</Text>
      <ParentComponentPassingProps />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  GFG: {
    color: 'green',
    fontWeight: 'bold',
  },
});

Output: