Home » React JS

How to use Touchable High Light Component in React Native?

In this article, I will show you how to use touchablehighlight (Touchable high light) component in react native?
Submitted by Godwill Tetah, on February 09, 2020

Touchable highlight in reacts native works like buttons that take an event handler.

It is very easy to use and straight forward.

In the code below, we will create a touchable high light zone and create an event that will be called when the area is touched or clicked.

Just like in React JS, we, first of all, begin by importing the component, in this case, we are importing from react-native.

In your App.js File, type the following,

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

export default class App extends Component {
  
  onPress = () => {
    console.log ('area has been pressed');
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
         style={styles.button}
         onPress={this.onPress}
        >
         <Text> click or touch here to see </Text>
        </TouchableHighlight>
        
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 10
  },
  countText: {
    color: '#FF00FF'
  }
})

The touchable highlight has an opening and closing tag, and also uses an event handler.

Clicking on the sentence above will print a phrase on the console.

Touchable highlight accepts style as an attribute and also uses other attributes that can be found on the documentation of react native’s official website.

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!