How to change Opacity of button in conditional rendering in react native - react-native

Question

I am new to react native. I have created a form. in which I am rendering some buttons according to server response. Now I want to set opacity of button 50% means. I want that button should look like its a disabled Now. SO is it possible if yes then please help. thanks. I want to set that opacity in my 1st line of code
here is my code
{data.bank_account_details_data[0] != null && (
<TouchableOpacity>
<Card center middle shadow style={styles.category} >
OTHER INFORMATION
</Text>
</Card>
</TouchableOpacity>
)}

Answer 1

You can set the opacity of the TouchableOpacity with a ternary expression (like your first line) based on a condition within the style prop.
Simplified example:
export default function App() {
const [hasOpacity, setHasOpacity] = React.useState(false)
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {
setHasOpacity(!hasOpacity)
}}
activeOpacity={0.2}
style={{opacity: hasOpacity ? 0.5 : 1.0}}
>
<Text>Test</Text></TouchableOpacity>
</View>
);
}
https://snack.expo.io/a1Y-TU4XB
In your example, it might look like this:
<TouchableOpacity
activeOpacity={0.2}
style={{opacity: data.bank_account_details_data[0] != null ? 0.5 : 1.0}}
>

Answer 2

you can use something like this
<TouchableOpacity
// opacity value ranges from 0 to 1
activeOpacity={0.9} //opacity for on touch behaviour
style={{opacity:0.9}} // opacity for view behaviour
onPress={()=>{
console.log("i am here")
}}>
<Text style={{color:"#FFF"}}>This is opacity check</Text>
</TouchableOpacity>
instead of static value of opacity you can use state, props or value from backend as a variable as well