I have an API and I need to set the Touchable Opacity separately for each item. I have done it already. but now I need to disable some Touchable Opacity. Like what I am trying to do is if Status and Check in Api both are True then the User can move to next and colour of it is red. screen by pressing on that touchable opacity but if one of them is false then the touchable opacity will be disabled and user can't move to next screen and colour of it will be grey I don't know how to do it because I am very new in these kind of functionality in React-native I read different questions and answers but unfortunately that doesn't help me.

Api Response

const results = [
   {
            Id: "IySO9wUrt8",
            Name: "Los Stand",
            Category: "Mexican",
            Status: true,
            Check: true,
        },
    {
            Id: "IySO9wUrt8",
            Name: "Los Stand 2",
            Category: "Burger",
            Status: true,
            Check: true,
        },
     {
            Id: "IySO9wUrt8",
            Name: "Los Stand 3",
            Category: "BBq",
            Status: true,
            Check: true,
        },
      ];

You can edit code in Expo Snack

My Expo code for live editing

CodePudding user response：

TouchableOpacity has a disabled property, so you should use it. It will prevent onPress from executing and navigating the user.

As for the styling, you can check the style using the same login.

<TouchableOpacity disabled={!result.Status || !result.Check} style={{ background: (!result.Status || !result.Check) ? 'grey' : 'red' }}>