Multiple Condition based disable of button in react-native project using expo

Question

I have created an application in expo which has a form of various fields and otp verification using mail and mobile number. The submit button should be disabled initially and should only be enabled if the values are entered and both the OTPs are verified.Can someone help with the state flags in react-native?

Answer 1

I will assume that you're using the native Button component from react-native.

1. Use the disabled prop of your button component. If set to true, it disables all interactions for the button.

<Button disabled={true} />

2. In a more complex scenario, you can set the disabled prop to a state variable like this.

<Button disabled={buttonStatus} />

Here is a working example based on the TextInput component.

import React, { Component } from "react";
import { TextInput, Button } from "react-native";

const App = () => {
  const [value, onChangeText] = React.useState("");
  const [value2, onChangeText2] = React.useState("");

  const [buttonStatus, setButtonStatus] = React.useState(true);

  const inputChangeHandler = () => {
    if (value.length > 0 && value2.length > 0) {
      setButtonStatus(false);
    }
  };

  return (
    <>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={(text) => onChangeText(text)}
        onChange={inputChangeHandler}
        value={value}
      />
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={(text) => onChangeText2(text)}
        onChange={inputChangeHandler}
        value={value2}
      />

      <Button
        disabled={buttonStatus}
        title="Learn More"
        color="#841584"
        accessibilityLabel="Learn more about this purple button"
      />
    </>
  );
};

export default App;

If you want to update the status of the button in real-time, use the onChange prop of TextInput, or if you want to update the status when the input focus is out of focus use onBlur.

Here is a live demo on Expo