Disable TouchableOpacity

disable, remove press effect or do nothing on click of touchable

In certain conditions you might want to totally disable your button or in others just have the press effect but do nothing onPress event..

Let’s see how to do exactly those..

import { TouchableOpacity } from 'react-native';

First import TouchableOpacity from react-native and don’t do a mistake I did back in my time and let my app auto import it from gestures and that’s practically obsolete or buggy as I assume.

const [disabled,setDisabled]=useState(false)

So, here I declared a state variable to indicate if I want my button to be disabled or not you can conditionally make it true or false.

function App(props) {
return(

<TouchableOpacity
style={{backgroundColor:'black',width:'50%',height:50, justifyContent:'center'}}
disabled={disabled}
onPress={() => Alert.alert("Hello")}>
<Text style={{color:'white',textAlign:'center'}}> {disabled? 'Disabled':'Enabled'} </Text>
</TouchableOpacity>

we used a touchableOpacity and in disabled prop I passed my state and threw bunch of inline styles like a newbie(don’t do this kids.), now in next Button we can handle our state:

<Button title='Disable below button' onPress={()=>setDisabled(!disabled)}></Button>

Now we used a button and toggled our state onPress event.

show alert when enabled

As you can see on disabled it’s like a plain view no effect at-all.

You can use multiple ways to handle state totally depending on your requirement i.e. props or API results can control your state.

<TouchableOpacity
onPress={disabled? null : ()=>console.warn('enabled')}>

now, while the disabled props will totally disable your touchable, if you want to have user effect that it’s pressable but don’t want to perform any actions on so you can just pass null to your onPress event.

In this state you’ll have the press effect but nothing will be done.

So, that’s all from the series the basics that we have to go find in SOF answers not in articles. (and don’t mention documentation it’s for nerds we dont do that :D)