Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disabling buttons on react native

Tags:

react-native

People also ask

How do I disable a component in React Native?

To disable a View component in React Native, we can set the pointerEvents prop to 'none' . to set the inner view's pointerEvents prop to 'none' so that users can't interact with the content inside.

How do I turn off Pressable in React Native?

It is used to enable disable pressable button in react native. Disabled prop supports Boolean True False value. If we pass its value to True the it will disable the Pressable component and all the functions of pressable like onPress, onLongPress will not work.

How do you disable a button in a list in React?

To disable button in React, we can set the disabled prop. <button disabled={value}>button</button>; to set the disabled prop to the value state.


TouchableOpacity extents 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 disable={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>

Just do this

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>

This seems like the kind of thing that could be solved using a Higher Order Component. I could be wrong though because I'm struggling to understand it 100% myself, but maybe it'll be helpful to you (here's a couple links)...

  • http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm
  • http://jamesknelson.com/structuring-react-applications-higher-order-components/

this native-base there is solution:

<Button
    block
    disabled={!learnedWordsByUser.length}
    style={{ marginTop: 10 }}
    onPress={learnedWordsByUser.length && () => {
      onFlipCardsGenerateNewWords(learnedWordsByUser)
      onFlipCardsBtnPress()
    }}
>
    <Text>Let's Review</Text>
</Button>

TouchableOpacity receives activeOpacity. You can do something like this

<TouchableOpacity activeOpacity={enabled ? 0.5 : 1}>
</TouchableOpacity>

So if it's enabled, it will look normal, otherwise, it will look just like touchablewithoutfeedback.