How to Disable TouchableOpacity Component in React Native

TouchableOpacity is one of the most used components in React Native projects. The reason is simple, TouchableOpacity is much more flexible and highly customizable than components such as Button.

As I mentioned in the title, you can either disable or enable TouchableOpacity according to your requirement. All you need to use is the disabled prop of Touchable Opacity. Just make disabled={true} and you are ready to go!

See the code given below.

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

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        disabled={true}
        onPress={() => console.log('pressed')}>
        <Text> Button</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'cyan',
    borderRadius: 8,
    padding: 10,
    height: 40,
  },
});

export default App;

Same wise, you can also disable the Pressable component.

Have more doubts about the disabled prop? Then just have a look at the official docs here.