How to Disable TouchableOpacity Component in React Native

By Rashid •  Updated on: January 5th, 2023 • 

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}>
        onPress={() => console.log('pressed')}>
        <Text> Button</Text>

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.


Keep Reading