How to use TouchableWithoutFeedback in React Native?

May 10, 2022 . Admin

Hi Guys,

Are you looking for example of react native TouchableWithoutFeedback example. This article will give you a simple example of how to use TouchableWithoutFeedback in react native. if you want to see an example of TouchableWithoutFeedback example in react native then you are in the right place. I’m going to show you about how to create a TouchableWithoutFeedback button in react native. So, let's follow a few step to create example of how to use TouchableWithoutFeedback component using react native.

Here I will give you many example of how to implement TouchableWithoutFeedback component in react native.

TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View. Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.

Step 1: Download React Native Project

Let us begin the tutorial by installing a new react native application. if you have already created the project, then skip the following step.

expo init TouchableWithoutFeedback 
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';

const OnPress = () => {
    alert('Mywebtuts.com');
}

const App = () => {
    return (
        
             OnPress()}
            >
                
                    
                        Click Me
                    
                
            
        
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    buttonView: {
        backgroundColor:'blue',
        paddingVertical:10,
        paddingHorizontal:20,
    },
    buttonText: {
        color:'white',
        fontSize:18,
    },
});

export default App;
Run React Native Project

In the last step run your project using the below command.

expo start
Output:

It will help you...

#React Native