React Native TouchableHighlight Component Example Tutorial

Hi Guys,

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

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

TouchableHighlight is a component that is used to provide a wrapper to Views in order to make them respond correctly to touch-based input. On press down the TouchableHighlight component has its opacity decreased which allows the underlying View or other component’s style to get highlighted.

This component must have only one child component. If there is more than one child component then wrap them inside a View component. It is necessary that there be a child component of TouchableHighlight.

TouchableHighlight Props:

1) onPress: It is used to specify a function that is called when the touch is released.

2) activeOpacity: It is used to specify the opacity value of the wrapped View when the touch is active. It takes a value between 0 and 1 and the default value is 0.85.

3) underlayColor: It is used to specify the color of the underlay that is shown when the touch is active.

4) style: It is used to specify the style of the TouchableHighlight component

Step 1 - Create project

In the first step run the following command for create a project.

expo init TouchableHighlight 

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, StatusBar, TouchableHighlight } from 'react-native';

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

const App = () => {
    return (
        <View style={styles.container}>
            <View style={styles.titleView}>
                <Text style={styles.title}>React Native TouchableHighlight Example</Text>
            </View>
            <TouchableHighlight 
                onPress={() => OnPress()}
                activeOpacity={0.5}
                underlayColor={'red'}    
            >
                <View style={styles.button}>
                    <Text style={styles.text}>Button</Text>
                </View>
            </TouchableHighlight>
            <StatusBar backgroundColor={'blue'}/>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    titleView: {
        marginBottom:40,
        backgroundColor:'red',
        paddingVertical:20,
        paddingHorizontal:10,
    },
    title:{
        fontSize:20,
        color:'white',
    },
    button: {
        backgroundColor: 'blue',
        paddingHorizontal:35,
        paddingVertical:15,
    },
    text: {
        color:'white',
        fontSize:20,
    },
});

export default App;

Step 3 - Run project

In the last step run your project using bellow command.

expo start

Output

It will help you...