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 UIs for both platforms.
Approach: In this article. we will see how to show a Touchable Ripple in react native. Whenever the user touches the ‘press me’ text, a ripple effect will be created and an Alert message will be displayed. Touchable Ripple is something that should respond to touches. It enhances the look and feels of the application by showing ripple behavior to user touches. We will use the react-native-paper library for this purpose. We will see the approach step-by-step.
Below is the step by step implementation:
Step 1: Create a react-native project using the following command
npx react-native init DemoProject
Step 2: We are using the react-native-paper library for creating a ripple effect, Install react-native-paper using the following command.
npm install react-native-paper
We can use the TouchableRipple component directly from the react-native-paper library.
Step 3: Create a components folder inside your project. Inside the components, folder create a file RippleEffect.js
Project Structure: It will look like the following.
Step 4: Write the following code inside RippleEffect.js file.
Javascript
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%" } }) |
Step 5: Now import this file to your App.js
Javascript
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; |
Step to run the application: Now, save your files and type the following command.
npx react-native run-android
Output:
References: https://reactnativepaper.com
