Ways to turn off the touchable opacity功能

Question

Ways to turn off the touchable opacity功能

Is there a way to temporarily disable a touchable opacity for a minute after it is pressed?

let enable = true;
<TouchableOpacity
     style={styles.btnSolid}
     onPress={() => {
        resetUserPswd(auth, Email, navigation);
        enable = false;
        setTimeout(() => (enable = true), 60000); // 60 seconds
     }}
     disabled={!enable}
>
    <Text style={styles.btnTextSolid}>Send Email</Text>
</TouchableOpacity>

Thank you in advance.

javascript typescript react-native touchableopacity

Answer 1

Answer №1

Implement setTimeout in your code as shown below:

  import { useEffect, useState } from 'react';
  
  const [isChecked, setIsChecked] = useState(false);
  const [isClicked, setIsClicked] = useState(false);

  useEffect(() => {
    if (isChecked || !isClicked) {
       return;
    }
    const timer = setTimeout(() => {
      setIsChecked(true);
    }, 60000);
    return () => clearTimeout(timer);
  }, [isClicked]);
  
  <TouchableOpacity
    style={styles.btnSolid}
    onPress={() => {
      resetPassword(auth, email, navigation);
      setIsClicked(true);
    }}
    disabled = {isChecked}
  >
    <Text style={styles.btnTextSolid}>Reset Password</Text>
  </TouchableOpacity>

Answer 2

Implement setTimeout in your code as shown below:

  import { useEffect, useState } from 'react';
  
  const [isChecked, setIsChecked] = useState(false);
  const [isClicked, setIsClicked] = useState(false);

  useEffect(() => {
    if (isChecked || !isClicked) {
       return;
    }
    const timer = setTimeout(() => {
      setIsChecked(true);
    }, 60000);
    return () => clearTimeout(timer);
  }, [isClicked]);
  
  <TouchableOpacity
    style={styles.btnSolid}
    onPress={() => {
      resetPassword(auth, email, navigation);
      setIsClicked(true);
    }}
    disabled = {isChecked}
  >
    <Text style={styles.btnTextSolid}>Reset Password</Text>
  </TouchableOpacity>

Ways to turn off the touchable opacity功能

Answer №1

Similar questions

Tips for transforming typed words into fun emoji characters

Retrieve the title and display it as a caption using JavaScript

Utilize Office Scripts to update values across numerous worksheets

Enhance Your Jekyll Site with the Minimal Mistakes Theme Plugin

Angular 2 TypeScript: Accelerating the Increment Number Speed

Maintain checkbox selection even after the page is refreshed

Invalidating the express response object due to a TypeError issue

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

Is it possible to open a PDF file in a new tab using Angular 4?

Interacting with icons using TouchableOpacity and onPress functionality

How can you prompt a component again in React Native after a specified number of days have passed?

Problem with JavaScript regular expressions and enumeration

Using this.forceUpdate to efficiently update state within React-Router-DOM's Link component

CSS Gallery Indicator: Enhancing Your Website's Visual Appeal

Submitting an HTML form with no input data

What is the best way to access the items generated within a v-for loop?

How about this sentence: "Automatically select a radio button after verifying the associated sentence (label)

The Angular project failed to run properly following the ng build command

Utilize the split functionality only when the character you want to split by is found in

Achieve the central element while scrolling on the window