¿Cómo agregar un divisor en react-native usando la biblioteca de react-native-paper?

React native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de reactjs .
• Html, css y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, veremos cómo agregar un divisor en react-native usando la biblioteca de react-native-paper . Agregaremos un divisor entre cada elemento de la array para que parezca que están separados entre sí. El divisor se usa para separar contenidos agregando una línea delgada entre ellos.

A continuación se muestra la implementación paso a paso:

Paso 1: Cree un proyecto en react-native usando el siguiente comando:

npx react-native init DemoProject

Paso 2: instale el papel nativo reactivo con el siguiente comando:

npm install react-native-paper

Paso 3: Inicie el servidor usando lo siguiente:

npx react-native run-android

Paso 4: Ahora ve a tu proyecto y crea una carpeta de componentes. Dentro de la carpeta de componentes, cree un archivo DividerExample.js. 

Estructura del proyecto: Se verá así.

Ejemplo: Anote el código en los archivos respectivos.

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,
  },
});

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;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando: 

npx react-native run-android

Producción:

Referencia: https://reactnativepaper.com/