¿Cómo crear una superficie en react-native?

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 crear una superficie en react-native. La superficie es como un contenedor que utiliza la profundidad y la elevación. Cada vez que se renderiza, ofrece una vista similar a la de una tarjeta. podemos agregar la propiedad de elevación para darle la profundidad requerida. Se puede utilizar en diferentes escenarios, por ejemplo: Para mostrar avisos, próximos eventos, transmitir mensajes urgentes, etc. Podemos personalizar su tamaño según la necesidad.

En nuestro proyecto, inicialmente mostraremos un texto que tiene la capacidad de presionar. Al presionar ese texto, todos los próximos eventos aparecerán debajo en una vista de superficie. Veremos el enfoque paso a paso.

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: Cree una carpeta de componentes dentro de su proyecto. Dentro de la carpeta de componentes, cree un archivo SurfaceComponent.js 

Estructura del proyecto: Se verá así.

Implementación: Anote el código en los archivos respectivos.

Importaremos el componente de superficie directamente desde la biblioteca de papel nativo . Para aplicar el tema oscuro a la superficie, podemos usar DarkTheme de react-native-paper.

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
import { DarkTheme, Surface } from 'react-native-paper';
  
const SurfaceExample = () => {
    const [HideSurface, setHideSurface] = useState(true);
    const [events] = useState([
      'Singing show from 7pm to 8pm ',
      'Drama show from 8pm to 9pm',
      'Online Get-Together from 10pm to 11pm',;
    ]);
    let c = 0;
  
    return (
      <View>
        <Pressable onPress={() => setHideSurface(false)}>
          <Text style={styles.text}> Upcoming events</Text>
        </Pressable>
        {HideSurface ? (
          <></>
        ) : (
          events.map((event) => {
            return (
              <Surface style={styles.surface} theme={DarkTheme} key={c++}>
                <Text style={styles.surfaceText}>{event}</Text>
              </Surface>
            );;
          })
        )}
      </View>
    );;
};
  
export default SurfaceExample;
  
const styles = StyleSheet.create({
    text: {
      fontSize: 30,
      fontWeight: 'bold',
      margin: 20,
    },
  
    surface: {
      margin: 25,
      padding: 10,
      height: 80,
      width: 150,
      elevation: 6,
      borderRadius: 4,
    },
    surfaceText: {
      color: 'white',
    },
});

import React from "react";
import type { Node } from "react";
import { View } from "react-native";
import SurfaceExample from "./components/SurfaceComponent";
  
const App: () => Node = () => {
    return (
        <View>
            <SurfaceExample />
        </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: