Increase the duration of the touchableopacity

Question

In react-Native Im using TouchableOpacity as buttons, but they are not very clear that they have been pressed. Therefore I have used a Snackbar to make the feedback more visible.

But I would also like to increase the amount of ms that the button is "opacitied" to make it even more clear that the button has been pressed, and avoid users from clicking twice. Is there any way to do that?

Answer 1

Here is an example for you to delay the opacity effect to the button. I use TouchableHighlight for better demostration, it should be working while replace it by TouchableOpacity.

import React, {useState} from 'react';
import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';

const Demo = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(count + 1);

  return (
    <View style={styles.container}>
      <TouchableHighlight
        underlayColor={"red"}
        onPressOut={onPress} 
        delayPressOut={1000}
      >
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>{count}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
  countText: {
    color: '#FF00FF',
  },
});

export default Demo;