How to disable the Touchable Opacity for some specific item that comes from API in React Native

Question

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 the color 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 a user can't move to the next screen and the color of it will be grey I don't know how to do it because I am very new in this 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,
        },
      ];

My full code

App.js

import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  SafeAreaView,
} from 'react-native';
import { Card, TextInput, RadioButton } from 'react-native-paper';

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,
  },
];

export default function App() {

  const renderItem = ({ item }) => {

    return (
      <>
       <TouchableOpacity
        onPress={() =>
          navigation.navigate('NextScreen', {
            name: item.Name,
            phone: item.Phone,
          })
        }>
        <View
          style={{
            flexDirection: 'column',
            marginHorizontal: 10,
            marginVertical: 10,
            padding: 5,
            backgroundColor: 'grey',
            borderRadius: 15,
          }}>
          
          <View
            style={{
              flexDirection: 'column',
              alignSelf: 'flex-start',
              marginTop: 10,
              marginBottom: 10,
            }}>
            <Text
              style={{
                fontSize: 15,
                fontWeight: '900',
                color: '#424242',
              }}>
              {item.Name}
            </Text>
            <Text>{item.Phone}</Text>
          </View>
        </View>
      </TouchableOpacity>
   
      </>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.container}
        data={results}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: 'white',
  },
});

AssetExample.js

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';

export default function AssetExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Local files and assets can be imported by dragging and dropping them into the editor
      </Text>
      <Image style={styles.logo} source={require('../assets/snack-icon.png')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  paragraph: {
    margin: 24,
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  logo: {
    height: 128,
    width: 128,
  }
});

You can edit code in Expo Snack

My Expo code for live editing

Answer 1

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' }}>