CODEWITHSUNDEEP
javascriptreactjsreact-nativevalidationreact-native-elements
Vivek Mahajan
Vivek Mahajan

Reputation: 115

How to apply an action on disabled button press in react native elements Button component?

Let's say there is a form with an input. The submit button is disabled until there is an input in the input element.

When the user enters the input, the submit button is enabled and the user can easily submit the form. But in case when there is no input and the user press the disabled submit button, the onDisabledPress() handler should be taken into action.

Upvotes: 0

Views: 1662

Answers (3)

Nguyễn Khương
Nguyễn Khương

Reputation: 371

It's just about your logic there is no need for external function. You will need a state to tell the button the way it should render, I called it is submitable. When submitable is true, the button will have active style, and when false it should use disabled style. For example:

const submitable = state.formInput1.length > 0 && state.formInput2.length > 0;

return (
   <TouchableOpacity
      style={submitable ? styles.active : styles.disabled}
      onPress={()=> {
         if (submitable) {
            console.log("Success")
         } else {
            console.log("You must input all required field")
         }
      }}
   ><Text>Submit</Text></TouchableOpacity>
)

const styles = {
   active: {
      backgroundColor: 'blue',
   },
   disabled: {
      backgroundColor: 'gray',
      opacity: 0.5,
   }
}

Upvotes: 1

shubham choudhary
shubham choudhary

Reputation: 3120

I discovered that there is a event in react native which you can fire even when touch is disabled.

It is used as

   onTouchStart={() => {
            console.log('yoo, button is touched');
     }}

Upvotes: 0

Manish
Manish

Reputation: 5066

First of all Disabled means no action can take place on the button or no event will be triggered for a disabled button.

What I can understand from your use case is that, you want the button to look like a disabled button and when the user passes the button instead of onPress onDisabledPress function should be called.

The only possible way of doing that is below.

  1. Keep a flag that holds the disabled state of the button say buttonDisabled
  2. Based on the the above flag apply the CSS styling to the button that makes it look like a disabled button (e.g greyed out)
  3. When this button is pressed the onPress even handler will be called. Add this below piece of code to that handle
    onPressHandler(){
    // make sure below lines are the first lines to execute in the onPressHandler
    if(this.state.buttonDisabled){
       this.onDisabledPress();
       return;
    }
    }
    onDisabledPress(){
     // disabled handler
    }

This will do the trick.

Upvotes: 1

Related Questions