TouchableHighlight in React Native with example

Introduction :

On Android and iOS, if you tap one button, the opacity of it decreases during the time you pressed it down. TouchableHighlight is used to implement similar effects. It decreases the opacity of the wrapped view on pressed.

You will have to play with colors to find out the best combination. Note that it should have only one child. If you want to have several child components, wrap them in a view.

Props :

Following props are available for this view :

[number] activeOpacity :

It defines the opacity of the wrapped view when touch is active. The default is 0.85 and it should be always between 0 to 1.

[function] onHideUnderlay :

Function that is called after the underlay is hidden.

[function] onShowUnderlay :

Function that is called after the underlay is shown.

[View.style] style :

Style of the TouchableHighlight.

[color] underlayColor :

When the touch is active, it is the color of the underlay that will show through.

[bool] hasTVPreferredFocus :

Apple TV preferred focus.

[bool] nextFocusDown, nextFocusUp, nextFocusRight, nextFocusLeft :

TV next focus down, up, right, left.

[Bool] testOnly_pressed :

Handy for snapshot tests.

Example program :

Let’s take a look at the below example program :

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

export default function ExampleProgram() {
  const onPress = () => {};

  return (
    <View style={styles.container}>
      <TouchableHighlight
        underlayColor={'#283593'}
        style={styles.touchable}
        onPress={onPress}>
        <Text style={styles.text}>Click Me</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    margin: 12,
  },
  touchable: {
    alignItems: 'center',
    backgroundColor: '#7986cb',
    padding: 10,
  },
  text: {
    color: 'white',
  },
});

Here, the we are using one backgroundColor and one underlayColor for the TouchableHighlight view. Once you click on it, it will change the color as like below :