¿Cómo agregar una ondulación táctil 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.

Enfoque: En este artículo. veremos cómo mostrar un Touchable Ripple en react native. Siempre que el usuario toque el texto ‘presionarme’, se creará un efecto dominó y se mostrará un mensaje de alerta. Touchable Ripple es algo que debería responder a los toques. Mejora la apariencia de la aplicación al mostrar un comportamiento de ondulación a los toques del usuario. Usaremos la biblioteca react-native-paper para este propósito. Veremos el enfoque paso a paso.

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

Paso 1: Cree un proyecto nativo de reacción usando el siguiente comando

npx react-native init DemoProject

Paso 2: Estamos usando la biblioteca de papel nativo de reacción para crear un efecto dominó. Instale el papel nativo de reacción usando el siguiente comando.

npm install react-native-paper

Podemos usar el componente TouchableRipple directamente desde la biblioteca de papel nativo reactivo.

Paso 3: Cree una carpeta de componentes dentro de su proyecto. Dentro de los componentes, la carpeta crea un archivo RippleEffect.js

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 4: escribe el siguiente código dentro del archivo RippleEffect.js .

import React from "react";
import {View , StyleSheet, Alert} from 'react-native';
import {Text, TouchableRipple } from "react-native-paper";
  
const TouchableRippleEffect = () => {
  
    return(
        <View style={styles.container} >
        <TouchableRipple onPress={() => 
        Alert.alert("Welcome to Geeks for Geeks ")}  
                         rippleColor="green">
          <Text > Press me</Text>
        </TouchableRipple>
        </View>
      )
}
  
export default TouchableRippleEffect ;
  
const styles = StyleSheet.create({
    container :{
         
       paddingTop:"30%",
       paddingLeft:"20%"
    }
})

Paso 5: Ahora importe este archivo a su App.js

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

Paso para ejecutar la aplicación: Ahora, guarde sus archivos y escriba el siguiente comando.

npx react-native run-android

Producción:

Referencias: https://reactnativepaper.com