androidreact-native

Disabling buttons on react native

I'm making an android app using react native and I've used TouchableOpacity component to create buttons.
I use a text input component to accept text from the user and the button should only be enabled once the text input matches a certain string.
I can think of a way to do this by initially rendering the button without the TouchableOpactiy wrapper and re-rendering with the wrapper once the input string matches.
But I'm guessing there is a much better way to do this. Can anyone help?

Solution

  • TouchableOpacity extends TouchableWithoutFeedback, so you can just use the disabled property :

    <TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

    React Native TouchableWithoutFeedback #disabled documentation

    The new Pressable API has a disabled option too :

    <Pressable disabled={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>