What is rendering prop pattern in React Native ?

React Native, a powerful JavaScript framework for building mobile applications, offers various patterns for component composition and code reuse. One such pattern is the "render props" technique. This article will explore the render props pattern, its implementation in React Native, and how it enhances code reusability and component flexibility.

What are Render Props?

The render props pattern is a technique for sharing code between React components using a prop whose value is a function. Instead of implementing its own render logic, a component receives a function prop that it calls to determine what to render. This approach allows for greater flexibility and reusability of component logic.

Key Benefits of Render Props:

1. Code Reusability: Easily share component logic across multiple components.

2. Flexibility: Dynamically change what is rendered based on the parent component's needs.

3. Separation of Concerns: Keep the rendering logic separate from the component's main functionality.

Setting Up a React Native Project with Expo

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.

To demonstrate the render props pattern, we'll create a React Native project using Expo. Expo provides a set of tools and services that simplify the development process for React Native applications.

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.

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: