how to disable some touchableopacity in react native-CodePudding

I display in numbers scrolling app in TouchableOpacity and I want some of the buttons to be disabled and some not how do I do that?

<ScrollView contentContainerStyle={styles.contentContainerStyle}>
      {hour.map((item, index) => {
        return (
          <TouchableOpacity 
            // delayPressIn={}
            disabled={
              isDisable
            }
            style={styles.item}
            key={index}
            onPress={() => {
              setShow(true);
            }}>
            <Text style={styles.text}> {item}</Text>
          </TouchableOpacity>
        );
      })}
    </ScrollView>

CodePudding user response：

Assuming that the hours array is like this [1, 2, 3, 4, 5, 6, 7, ...] You can include an array of numbers you want to disable in the disabled condition

in this example TouchableOpacity will be disabled for numbers 1, 3, 5, 7 because it will check for the condition when the item is 1 then it will check if 1 is in that array if it is then the condition will be true and it will be like disabled={true} and if the item is 2 then condition will be false because 2 is not in that array and it will be like disabled={false}

your disabled condition will look something like this so you have to list the numbers you want to disable TouchableOpacity for will be in this array

 disabled={[1,3,5,7].includes(item)} // TouchableOpacity will be disabled for numbers 1, 3, 5, 7

Example:

<ScrollView contentContainerStyle={styles.contentContainerStyle}>
      {hour.map((item, index) => {
        return (
          <TouchableOpacity 
            // delayPressIn={}
            disabled={[1,3,5,7].includes(item)} 
            // TouchableOpacity will be disabled for numbers 1, 3, 5, 7
            style={styles.item}
            key={index}
            onPress={() => {
              setShow(true);
            }}>
            <Text style={styles.text}> {item}</Text>
          </TouchableOpacity>
        );
      })}
    </ScrollView>

CodePudding user response：

when disabled property set to true the TouchableOpacity will be disabled