CODEWITHSUNDEEP
androidreact-native
Jeff P Chacko
Jeff P Chacko

Reputation: 5018

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?

Upvotes: 216

Views: 293626

Answers (16)

Naqeeb Rajput
Naqeeb Rajput

Reputation: 9

just use this

     <TouchableOpacity  disabled={currentImageIndex === 0}> //currentImageIndex is just a condition when button is disable.
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>

Upvotes: 0

Julien Deniau
Julien Deniau

Reputation: 5040

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>

Upvotes: 438

AIK
AIK

Reputation: 528

You can use the disabled prop in TouchableOpacity when your input does not match the string

<TouchableOpacity disabled = { stringMatched ? false : true }>
    <Text>Some Text</Text>
</TouchableOpacity>

where stringMatched is a state.

Upvotes: 2

Abdullah
Abdullah

Reputation: 563

Here is the simplest solution ever:

You can add onPressOut event to the TouchableOpcaity and do whatever you want to do. It will not let user to press again until onPressOut is done

Upvotes: 0

Shahmeer Khan
Shahmeer Khan

Reputation: 160

So it is very easy to disable any button in react native

<TouchableOpacity disabled={true}>
    <Text> 
          This is disabled button
   </Text>
</TouchableOpacity>

disabled is a prop in react native and when you set its value to "true" it will disable your button

Happy Cooding

Upvotes: 5

Bisma Azher
Bisma Azher

Reputation: 749

Use disabled true property

<TouchableOpacity disabled={true}> </TouchableOpacity>

Upvotes: 0

Danish Hassan
Danish Hassan

Reputation: 163

To disable Text you have to set the opacity:0 in Text style like this:

<TouchableOpacity style={{opacity:0}}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

Upvotes: 2

Anja Ishmukhametova
Anja Ishmukhametova

Reputation: 1564

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>

Upvotes: 7

Ammar Ismaeel
Ammar Ismaeel

Reputation: 803

I think the most efficient way is to wrap the touchableOpacity with a view and add the prop pointerEvents with a style condition.

<View style={this.state.disabled && commonStyles.buttonDisabled}        
      pointerEvents={this.state.disabled ? "none" : "auto"}>
  <TouchableOpacity
    style={styles.connectButton}>
  <Text style={styles.connectButtonText}">CONNECT </Text>
  </TouchableOpacity>
</View>

CSS: 

buttonDisabled: {
    opacity: 0.7
  }

Upvotes: 1

keerthi c
keerthi c

Reputation: 71

You can enable and disable button or by using condition or directly by default it will be disable : true

 // in calling function of button 
    handledisableenable()
        {
         // set the state for disabling or enabling the button
           if(ifSomeConditionReturnsTrue)
            {
                this.setState({ Isbuttonenable : true })
            }
          else
          {
             this.setState({ Isbuttonenable : false})
          }
        }

<TouchableOpacity onPress ={this.handledisableenable} disabled= 
     {this.state.Isbuttonenable}>

    <Text> Button </Text>
</TouchableOpacity>

Upvotes: 0

Xdabier
Xdabier

Reputation: 1

Here's my work around for this I hope it helps : 

<TouchableOpacity
    onPress={() => {
        this.onSubmit()
    }}
    disabled={this.state.validity}
    style={this.state.validity ?
          SignUpStyleSheet.inputStyle :
          [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}>
    <Text style={SignUpStyleSheet.buttonsText}>Sign-Up</Text>
</TouchableOpacity>

in SignUpStyleSheet.inputStyle holds the style for the button when it disabled or not, then in style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]} I add the opacity property if the button is disabled.

Upvotes: 0

Cory McAboy
Cory McAboy

Reputation: 332

I was able to fix this by putting a conditional in the style property.

const startQuizDisabled = () => props.deck.cards.length === 0;

<TouchableOpacity
  style={startQuizDisabled() ? styles.androidStartQuizDisable : styles.androidStartQuiz}
  onPress={startQuiz}
  disabled={startQuizDisabled()}
>
  <Text 
    style={styles.androidStartQuizBtn} 
  >Start Quiz</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
androidStartQuiz: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1
},
androidStartQuizDisable: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1,
    opacity: 0.4
},
androidStartQuizBtn: {
    color: "white",
    fontSize: 24
}
})

Upvotes: 1

Tallboy
Tallboy

Reputation: 13467

Just do this

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

Upvotes: 60

Chris Geirman
Chris Geirman

Reputation: 9684

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)...

Upvotes: 4

Eyal Eizenberg
Eyal Eizenberg

Reputation: 4033

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.

Upvotes: 3

Fomahaut
Fomahaut

Reputation: 1212

You can build an CustButton with TouchableWithoutFeedback, and set the effect and logic you want with onPressIn, onPressout or other props.

Upvotes: 1

Related Questions