Skip to content
Related Articles

Related Articles

How to add a divider in react-native using react-native-paper library ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 28 Feb, 2022

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

Approach: In this article, we will see how to add a divider in react-native using react-native-paper library. We will add a divider in between each array items so that they will look like they are separated from each other. Divider is used to separate contents by adding a thin line in between them.

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Start the server using the following:

npx react-native run-android

Step 4: Now go to your project and create a components folder. Inside components folder, create a file DividerExample.js. 

Project Structure: It will look like this.

Example: Write down the code in respective files.

DividerExample.js




import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Divider } from 'react-native-paper';
  
const cars = [
  'Hyundai Venue',
  'Tata Nexon',
  'Hyundai Creta',
  'Kia Carens',
  'Renault Kiger',
  'Maruti Suzuki Ertiga',
];
  
const CreateDivider = () => {
  return (
    <>
      {cars.map((item) => {
        return (
          <View style={styles.parent}>
            <Text style={styles.text}>{item}</Text>
            <Divider />
          </View>;
        );
      })}
    </>
  );;
};
  
export default CreateDivider;
  
const styles = StyleSheet.create({
  parent: {
    margin: 15,
  },
  text: {
    fontSize: 20,
  },
});

App.js




import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CreateDivider from './components/DividerExample';
  
const App: () => Node = () => {
  return (
       <View>
          <CreateDivider />
       </View>
  );
};
  
export default App;

Step to run the application: Run the application using the following command: 

npx react-native run-android

Output:

Reference: https://reactnativepaper.com/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!