¿Cómo crear un Snackbar en react native usando material design?

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.
• Node.js debe estar instalado en su sistema (instalar).
• Jdk y Android Studio para probar su aplicación en el emulador (instalar).

Enfoque: en este artículo, veremos cómo crear una barra de bocadillos en React Native. Para crear una barra de bocadillos, usaremos la biblioteca de diseño de materiales, es decir , react-native-paper . Las barras de refrigerios son mensajes o comentarios sobre una operación, excepto que brindan acciones para interactuar. Snackbar se mostrará en la parte inferior de la pantalla y se puede deslizar para descartarlos.

En nuestro proyecto, simplemente mostraremos un botón y, al hacer clic en el botón, aparecerá la barra de bocadillos en la parte inferior de la pantalla. vamos a la implementación 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 crea un archivo Snackbar.js

Estructura del proyecto: Se verá así.

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

En Snackbar.js, hemos importado elementos de Snackbar directamente desde la biblioteca de reactivos nativos en papel. Utiliza los siguientes accesorios:

• visible: Puede ser verdadero o falso para mostrar u ocultar el Snackbar
• acción: etiquete y presione devolución de llamada para el botón de acción. Debe contener las siguientes propiedades:
  • label – Etiqueta del botón de acción
  • onPress: devolución de llamada que se llama cuando se presiona el botón de acción.
• onDismiss: es una función de devolución de llamada que se llama cuando se descarta Snackbar. El accesorio visible debe actualizarse cuando se llama.

Nombre de archivo: Snackbar.js

import React, { useState } from "react";
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import { Snackbar, Button } from "react-native-paper";
  
const screenHeight = Dimensions.get('window').height;
const SnackbarComponent = () => {
    const [snackVisible, setSnackVisible] = useState(false);
  
    return (
        <View style={styles.container}>
            <View style={styles.btn}>
                <Button mode="contained" 
                    onPress={() => setSnackVisible(!snackVisible)}>
                    Press
                </Button>
            </View>
  
            <Snackbar
                visible={snackVisible}
                onDismiss={() => setSnackVisible(false)}
                action={{ label: 'Proceed' }}>
                Welcome to GeeksForGeeks
            </Snackbar>
        </View>
    )
}
export default SnackbarComponent;
  
const styles = StyleSheet.create({
    container: {
  
        flexDirection: "column-reverse",
        justifyContent: "flex-end",
        height: screenHeight,
    },
    btn: {
        marginVertical: 50,
        alignItems: "center"
    }
})

Ahora, importe este archivo a su App.js

Nombre de archivo: App.js

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