Touches In React Native

What is Touches in React Native?

 

Button component in React Native comes with very limited properties and do not support much when it comes to the the appearance of the control. To overcome this problems, React Native offer touchable components. We can use these touchable components to add highlight, opacity, and other attributes to a control.

• TouchableHighlight
  
• TouchableOpacity
  
• TouchableNativeFeedback
  
• TouchableWithoutFeedback
  

TouchableHighlight

 

When a user presses a control with this component, the background of this component will get darker/lighter. underlayColor property - displays color on touch active.

 

How to use

 

To use this component, first import TouchableHighlight in code.

import {TouchableHighlight} from 'react-native'

For render, apply it on a control.

<TouchableHighlight>
      <Text>Login</Text>
</TouchableHighlight>

Example

 

Create a custom button using TouchableHighlight.

 

Step 1

 

Create a demo React Native project. Use this link for guidance.

   

Step 2

 

Open project in VS Code or in your favorite IDE.

 

Step 3

 

Create a custom button component. For that, add a JavaScript file with name “TouchableButton.js” in your project and add below code. 

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

class TouchableButton extends Component {
    handleOnPress = () => {
        Alert.alert('Alert',
            'Hi, React Native!',
            [
                { text: 'Cancel' },
                { text: 'OK' },
            ],
            { cancelable: false })
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.button} onPress={this.handleOnPress} underlayColor="yellow" >
                    <Text style={styles.btnTextStyle}> Click Me </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#2980b6',
        padding: 10,
        borderRadius: 20,
    },
    btnTextStyle: {
        color: '#fff',
        textAlign: 'center',
        fontWeight: '700',
        fontSize: 25,
    }
})

export default TouchableButton;

You can see the in the code above, I have imported TouchableHighlight component from react native library for creating a custom button. Similarly, StyleSheet for button style and another component as well for the same.

 

Step 4

 

Open App.js file and remove existing code from it. Now, we need to import that created custom button component into it.

 

Add below lines of code into App.js file. 

import React, { Component } from "react";
import TouchableButton from "./TouchableButton";

class App extends Component {

  render () {
    return (
      <TouchableButton />
    );
  }
}

export default App;

Output

 

 

TouchableOpacity

 

Opacity of an element will change, when the user touched this component/element. Default opacity is 0.2 and we can change the opacity of an element by setting a value of activeOpacity property.

 

How to use

 

Import TouchableHighlight in code,

import {TouchableOpacity} from 'react-native'

For Render,

< TouchableOpacity>
        <Text>Login</Text>
</ TouchableOpacity>

TouchableNativeFeedback

 

When a user presses this element/component, it will add a ripple effect to the background of an element/component. This component works only for Android OS.

 

How to use

 

Import TouchableHighlight in code,

import {TouchableNativeFeedback} from 'react-native'

For Render,

<TouchableNativeFeedback>
        <Text>Login</Text>
</ TouchableNativeFeedback>

TouchableWithoutFeedback

 

This component should be used when a user wants to fire an action or handle touch on element press or touch, but doesn’t want to show any animation or feedback. onPress, onPressIn, onPressOut are some important properties of this component.

 

How to use

      

Import TouchableWithoutFeedback in code,

import {TouchableWithoutFeedback} from 'react-native'

For Render,

<TouchableWithoutFeedback>
        <Text>Login</Text>
</ TouchableWithoutFeedback>

Example

 

By using the same example of TouchableHighlight component, we are going to create new custom buttons with TouchableOpacity, TouchableNativeFeedback and TouchableWithoutFeedback components.

 

Step 1

 

import TouchableOpacity, TouchableNativeFeedback and TouchableWithoutFeedback components into “TouchableButton.js” file.

 

Step 2

 

Replace below lines of code in “TouchableButton.js” file and run the application to check the output. 

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, Alert } from "react-native";

class TouchableButton extends Component {
    handleOnPress = () => {
        Alert.alert('Alert',
            'Hi, React Native!',
            [
                { text: 'Cancel' },
                { text: 'OK' },
            ],
            { cancelable: false })
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={this.handleOnPress} activeOpacity={0.1}>
                    <Text style={styles.btnTextStyle}> Button - TouchableOpacity </Text>
                </TouchableOpacity>
                <TouchableNativeFeedback onPress={this.onPress}
                    background={TouchableNativeFeedback.SelectableBackground()}>
                    <View style={[styles.button, styles.buttonNativeFeedback]}>
                        <Text style={styles.btnTextStyle} >Button - TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback onPress={this.onPress}>
                    <View style={[styles.button, styles.buttonWithoutFeedback]}>
                        <Text style={styles.btnTextStyle}>Button - TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    button: {
        alignItems: 'center',
        backgroundColor: '#2980b6',
        padding: 10,
        borderRadius: 20,
        margin: 10
    },
    buttonTouchableOpacity: {
        backgroundColor: '#2980b6',

    },
    buttonNativeFeedback: {
        backgroundColor: '#00ff00',

    },
    buttonWithoutFeedback: {
        backgroundColor: '#B08B83',

    },
    btnTextStyle: {
        color: '#fff',
        textAlign: 'center',
        fontWeight: '700',
        fontSize: 15,
    }
})

export default TouchableButton;

Output - for Android platform

Output - for iOS platform

 

Summary

 

In this article, I discussed what is touches and types of components for touches in React Native. Also, we saw how to create a custom button and how to use it in React Native.