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.
