What is the TouchableHighlight 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> // Child Component </TouchableHighlight>
- onPress: It is used to specify a function that is called when the touch is released.
- disabled: If its value is true disable all interactions. The default is ‘false’.
- style: It is used to specify the style of the TouchableHighlight component
- 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.
- underlayColor: It is used to specify the color of the underlay that is shown when the touch is active.
Now let’s start with the implementation:
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.
expo init TouchableHighlightDemo
Step 3: Now go into your project folder i.e. TouchableHighlightDemo
Project Structure: It will look like the following:
Example: Now let’s implement the TouchableHighlight. In the following example, we have a button, and when the user clicks on it, the TouchableHighlight functionality is demonstrated.
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.