React Native Touchables

Touchable components provide the capability to capture the tapping functionality. The
touchables component can be implemented as an alternative of basic button, if they are
not look right for your app. Using these components, you build your own button.
Tapping on these components, you can display the feedback.

The touchables components do not provide any default styling, so you will need to do
your style for presenting nicely in the app.

Types of Touchable Components

There are four touchable components provided by React Native. Selection of this
component depends on the kind of feedback you want to provide:

o TouchableHighlight
o TouchableNativeFeedback
o TouchableOpacity
o TouchableWithoutFeedback.

React Native TouchableHighlight

The TouchableHighlight can be used where you would use a button or link on the web.
The background of this component becomes dark on pressing it.

Props
Props Type Requi Platf Description
red orm

activeOpacity number no Determines the opacity of wrapped view when

it is touched.

onHideUnderlay function no Calls instantly after the underlay is hidden.

onShowUnderlay function no Calls instantly after the underlay is shown.

 style View.styl no
e

underlayColor color no Show the underlay color when the touch is active.

hasTVPreferredFocu bool no iOS It focuses TV preferred, work only for iOS.

s

tvParallaxProperties object no iOS It is an object with properties which

control the Apple TV parallax effects.

React Native TouchableNativeFeedback

The TouchableNativeFeedback makes a view to response properly on touch. This
component works only for Android operating system. It uses native state drawable to
display the touch feedback.

It supports only a single View instance as a child node. It is implemented by replacing

the View with another instance of RCTView node.

Props
Props Type Required Description

background backgroundPropTyp no It determines the background drawable that is

e
going to be displayed as feedback.

useForeground bool no It adds the ripple effect to the foreground of the

view, instead of the background.

React Native TouchableOpacity

The TouchableOpacity wrapper is used to reduce the opacity of button. It allows
background to be seen while the user press down. The opacity of button will be
controlled by wrapping the children in an Animation.
Props
Props Type Required Platform Description

activeOpacity numbe no It determines the opacity of wrapped view when

r
it is touched.

tvParallaxProperties object no iO It is an object with property which is used to control the

S
Apple TV parallax effects.

hasTVPreferredFocu bool no iO It focuses TV preferred, it works on Apple TV only.

s S

Methods
Method Description

setOpacityTo() It animates the touchable to a new opacity.

React Native TouchableWithoutFeedback

The TouchableWithoutFeedback is used when the user wants to handle the tap
functionality but doesn't want to display any feedback.

Props
Props Type Required Description

hitSlop object no This defines how far your touch can start away from the button.

onAccessibilityTa functio no If accessible is set to true, the system invokes this function
p n
when the user performs accessibility tap gesture.

accessibilityHint string no It helps user to understand what will happen when

they perform an action on the accessibility element.

 accessibilityLabel node no It overrides the text, which is read by the screen reader

when users interact with the element.

delayLongPress number no It delays the onLongPress in milli-second calling onPressIn.

Some time user presses a view and holds it for the set of time. This long press is handled
by the function using onLongPress props of any of the above "Touchable" components.

CODE

import React, { Component } from 'react';

import { Alert,Platform,StyleSheet,Text,TouchableHighlight,TouchableOpacity,
TouchableNativeFeedback,TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {

_onPressButton() {
Alert.alert('You tapped the button!')
}

_onLongPressButton() {
Alert.alert('You long-pressed the button!')
}

render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
<TouchableOpacity onPress={this._onPressButton}>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</View>
</TouchableOpacity>
<TouchableNativeFeedback
onPress={this._onPressButton}
background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() :
''}>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableNativeFeedback</Text>
 </View>
</TouchableNativeFeedback>
<TouchableWithoutFeedback
onPress={this._onPressButton}
>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
</View>
</TouchableWithoutFeedback>
<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton}
underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Touchable with Long Press</Text>
</View>
</TouchableHighlight>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
paddingTop: 60,
alignItems: 'center'
},
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#5ead97'
},
buttonText: {
padding: 20,
color: 'white',
fontSize: 18
}
});

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

const TouchableHighlightExample = () => {

const [count, setCount] = useState(0);
const onPress = () => setCount(count + 1);

return (
<View style={styles.container}>
<TouchableHighlight onPress={onPress}>
<View style={styles.button}>
<Text>Touch 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",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
},
countText: {
color: "#FF00FF"
}
});

export default TouchableHighlightExample;

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

const App = () => {

const [count, setCount] = useState(0);
const onPress = () => setCount(prevCount => prevCount + 1);

return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});

export default App;