How to add a Touchable Ripple in react-native ?

Last Updated : 14 Mar, 2022

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; 