Deshabilitar botones en reaccionar nativo

Estoy creando una aplicación de Android usando react native y he usado el componente TouchableOpacity para crear botones.
Utilizo un componente de entrada de texto para aceptar texto del usuario y el botón solo debe habilitarse una vez que la entrada de texto coincida con una cadena determinada.
Puedo pensar en una forma de hacer esto al representar inicialmente el botón sin el contenedor TouchableOpactiy y volver a representar con el contenedor una vez que la cadena de entrada coincide.
Pero supongo que hay una manera mucho mejor de hacer esto. ¿Alguien puede ayudar?

TouchableOpacityextensiones TouchableWithoutFeedback, por lo que puede usar la disabledpropiedad:

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

Reaccionar Native TouchableWithoutFeedback #disabled documentación

Solo haz esto

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

Este parece ser el tipo de cosa que podría resolverse utilizando un Componente de orden superior. Sin embargo, podría estar equivocado porque me cuesta entenderlo al 100%, pero tal vez te sea útil (aquí hay un par de enlaces) ...

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

TouchableOpacity recibe activeOpacity. Puedes hacer algo como esto

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

Entonces, si está habilitado, se verá normal, de lo contrario, se verá como tocable sin retroalimentación.

esta base nativa hay solución:

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

Para deshabilitar el texto, debe establecer la opacidad: 0 en estilo de texto como este:

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

Puede crear un CustButton con TouchableWithoutFeedback, y establecer el efecto y la lógica que desee onPressIn, onPressoutu otros accesorios.

Pude solucionar esto poniendo un condicional en la propiedad de estilo.

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

Aquí está mi trabajo para esto, espero que ayude:

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

en SignUpStyleSheet.inputStylecontiene el estilo del botón cuando está deshabilitado o no, luego style={this.state.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}agrego la propiedad de opacidad si el botón está deshabilitado.

Puede habilitar y deshabilitar el botón o mediante la condición o directamente de forma predeterminada, se deshabilitará: verdadero

 // 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>

Creo que la forma más eficiente es envolver la TouchchableOpacity con una vista y agregar el puntero PropEvents con una condición de estilo.

<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
  }