TouchableWithoutFeedback in React Native – Code Example

In this article we will cover the most important aspects of TouchableWithoutFeedback component.

1. It allows to raise click event for enclosed component. Like the onPress will be called when component is touched –

<TouchableWithoutFeedback onPress={() => alert('Component1 Pressed!')}>
  <Component1 />
</TouchableWithoutFeedback>

2. Doesn’t show any visual change in appearance when the component is clicked.

3. React Native do not recommend using this. Better to use pressable.

4. It accepts a single component as child. If you want to render multiple components then wrap them in a View. Like this –

<TouchableWithoutFeedback onPress={() => alert('Some Child Pressed!')}>
  <View>
    <Component1 />
    <Component2 />
  </View>
</TouchableWithoutFeedback>

5. You should pass the props to the underlying component and React Native components. Like this –

const Component1 = (props) => {
  return <Text {...props}>You can press this text</Text>
}

<TouchableWithoutFeedback onPress={() => alert('Component1 Pressed!')}>
  <Component1 />
</TouchableWithoutFeedback>

6. You can disable the touch sound using touchSoundDisabled=true prop in Android apps.

7. If you want to capture long press with some delay, then use delayLongPress prop and provide milliseconds value.

8. To disable all the interactions with TouchableWithoutFeedback, use disabled=true prop.

Code Example

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

const TouchableWithoutFeedbackExample = () => {
  const [countOnPress, setCountOnPress] = useState(0);
  const [countOnLongPress, setCountOnLongPress] = useState(0);
  const [countOnLongPressDelay, setCountOnLongPressDelay] = useState(0);
  const [countOnPressDisabled, setCountOnPressDisabled] = useState(0);

  const onPress = () => {
    setCountOnPress(countOnPress + 1);
  };

  const onLongPress = () => {
    setCountOnLongPress(countOnLongPress + 1);
  }

  const onLongPressDelay = () => {
    setCountOnLongPressDelay(countOnLongPressDelay + 1);
  }

  const onPressDisabled = () => {
    setCountOnPressDisabled(countOnPressDisabled + 1);
  };

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count onPress: {countOnPress}</Text>
        <Text style={styles.countText}>Count onLongPress: {countOnLongPress}</Text>
      </View>
      <TouchableWithoutFeedback
       onPress={onPress}
       onLongPress={onLongPress}
      >
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableWithoutFeedback>

      <View style={styles.countContainer}>
        <Text style={styles.countText}>Count onLongPress After 3 sec: {countOnLongPressDelay}</Text>
      </View>
      <TouchableWithoutFeedback
       onLongPress={onLongPressDelay}
       delayLongPress={3000}
      >
        <View style={styles.button}>
          <Text>Long press will work in 3 sec</Text>
        </View>
      </TouchableWithoutFeedback>

      <View style={styles.countContainer}>
        <Text>Press on below button will not work. disabled=true</Text>
        <Text style={styles.countText}>Count onPress: {countOnPressDisabled}</Text>
      </View>
      <TouchableWithoutFeedback
       onPress={onPressDisabled}
       disabled={true}
      >
        <View style={styles.button}>
          <Text>Press Disabled</Text>
        </View>
      </TouchableWithoutFeedback>
    </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 TouchableWithoutFeedbackExample;

Output –

In the above image we can see three buttons. 1st is with default values of onPress and onLongPress. 2nd button has a custom delay of 3 seconds in long press. The third button is disabled.

Live Demo

Conclusion

TouchableWithoutFeedback should be used when you want to add click listener to a component but do not want to provide any visual change on click. Use this component only when necessary otherwise pressable should be used.