TouchableHighlight in React Native

It is just a wrapper for making touch work properly, and it is the conventional way of handling touch gestures. Today's most future-proof solution is pressable API. pressable manages all the touch inputs, and it is one of the core wrappers which is introduced in July 2022.

App.js code :

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


const TouchableHighlight_Example = () => {
  const [count, setCount] = useState(10);
  const on_Press = () => setCount(count + 10);


  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={on_Press}>
        <View style={styles.button}>
          <Text style={{fontsize:10}}>click Here</Text>
        </View>
      </TouchableHighlight>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>
          {count || null}
        </Text>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor:'pink',
    paddingHorizontal: 10
  },
  button: {
         padding: 25,
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    alignItems:'center',
    justifyContent:'center',
    borderWidth:1,
    padding: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 15,
    color:'red'
  },
  countText: {
    color: 'red',
    fontsize:25
  }
})
export default TouchableHighlight_Example;

Output:

Explanation :

Firstly We are importing components as per our need such as stylesheet, touchableopacity, text and view.

const TouchableHighlight_Example = () => {

const [count, setCount] = useState(10);

const on_Press = () => setCount(count + 10);

This is the responsive part which decides what will happen if the button is clicked. So as per code, it will be incremented by 10.

Ex- default value is 10. Once clicked, it will be 20, the next 30, etc.

Then we do the declaration of a button. Through touchable opacity, we are constructing a button. The text component defines the button's title. Styling is done using the stylesheet and there we have styled each component separately with neatness and less complication.