Disabling buttons on react native

Question

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

User · Answer

Here s my work around for this I hope it helps      lt TouchableOpacity     onPress       gt            this onSubmit              disabled  this state validity      style  this state validity             SignUpStyleSheet inputStyle              SignUpStyleSheet inputAndButton   opacity  0 5    gt       lt Text style  SignUpStyleSheet buttonsText  gt Sign-Up lt  Text gt   lt  TouchableOpacity gt    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

User · Answer

I was able to fix this by putting a conditional in the style property   const startQuizDisabled        gt  props deck cards length     0    lt TouchableOpacity   style  startQuizDisabled     styles androidStartQuizDisable   styles androidStartQuiz    onPress  startQuiz    disabled  startQuizDisabled     gt     lt Text      style  styles androidStartQuizBtn      gt Start Quiz lt  Text gt   lt  TouchableOpacity gt   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

User · Answer

TouchableOpacity receives activeOpacity  You can do something like this   lt TouchableOpacity activeOpacity  enabled   0 5   1  gt   lt  TouchableOpacity gt    So if it s enabled  it will look normal  otherwise  it will look just like touchablewithoutfeedback

User · Answer

this native-base there is solution     lt Button     block     disabled   learnedWordsByUser length      style    marginTop  10        onPress  learnedWordsByUser length  amp  amp       gt          onFlipCardsGenerateNewWords learnedWordsByUser        onFlipCardsBtnPress           gt       lt Text gt Let s Review lt  Text gt   lt  Button gt

User · Answer

So it is very easy to disable any button in react native  lt TouchableOpacity disabled  true  gt       lt Text gt             This is disabled button     lt  Text gt   lt  TouchableOpacity gt   disabled is a prop in react native and when you set its value to  quot true quot  it will disable your button Happy Cooding

User · Answer

Use disabled true property  lt TouchableOpacity disabled  true  gt   lt  TouchableOpacity gt

User · Answer

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

User · Answer

Just do this   lt TouchableOpacity activeOpacity  disabled   1   0 7  onPress   disabled  amp  amp  onPress  gt     lt View gt       lt Text gt  text  lt  Text gt     lt  View gt   lt  TouchableOpacity gt

User · Answer

TouchableOpacity extents TouchableWithoutFeedback  so you can just use the disabled property    lt TouchableOpacity disabled  true  gt     lt Text gt I m disabled lt  Text gt   lt  TouchableOpacity gt   React Native TouchableWithoutFeedback  disabled documentation The new Pressable API has a disabled option too    lt Pressable disable  true  gt        pressed      gt         lt Text gt I m disabled lt  Text gt        lt  Pressable gt

User · Answer

I think the most efficient way is to wrap the touchableOpacity with a view and add the prop pointerEvents with a style condition    lt View style  this state disabled  amp  amp  commonStyles buttonDisabled                pointerEvents  this state disabled    none     auto   gt     lt TouchableOpacity     style  styles connectButton  gt     lt Text style  styles connectButtonText   gt CONNECT  lt  Text gt     lt  TouchableOpacity gt   lt  View gt    CSS    buttonDisabled        opacity  0 7

User · Answer

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                           lt TouchableOpacity onPress   this handledisableenable  disabled         this state Isbuttonenable  gt        lt Text gt  Button  lt  Text gt   lt  TouchableOpacity gt

User · Answer

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

User · Answer

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

User · Answer

To disable Text you have to set the opacity 0 in Text style like this    lt TouchableOpacity style   opacity 0   gt     lt Text gt I m disabled lt  Text gt   lt  TouchableOpacity gt

[react-native] Disabling buttons on react native

Examples related to react-native