React native UI example/template. Restaurant product list with image, name, description, price and action buttons

import React, { useState } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity, FlatList } from 'react-native';


const ProductCard = ({ item, onIncrement, onDecrement }) => {
  return (
    <View style={styles.productCard}>
      <Image source={{ uri: item.image }} style={styles.productImage} />
      <View style={styles.productInfo}>
        <Text style={styles.productName}>{item.name}</Text>
        <Text style={styles.productDescription}>{item.description}</Text>
        <Text style={styles.productPrice}>${item.price.toFixed(2)} <Text style={styles.productPriceText}>per item</Text></Text>
      </View>
      <View style={styles.productAmount}>
        <TouchableOpacity style={styles.amountButton} onPress={onDecrement}>
          <Text style={styles.amountButtonText}>-</Text>
        </TouchableOpacity>
        <Text style={styles.amountText}>{item.amount}</Text>
        <TouchableOpacity style={styles.amountButton} onPress={onIncrement}>
          <Text style={styles.amountButtonText}>+</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const App = () => {
  const [products, setProducts] = useState([
    { id: 1, name: 'Hamburger', description: 'Juicy beef patty on a fresh bun with all the fixings', price: 5.99, image: 'https://source.unsplash.com/900x900/?burger', amount: 0 },
    { id: 2, name: 'Pizza', description: 'Freshly made pizza with your choice of toppings', price: 9.99, image: 'https://source.unsplash.com/900x900/?pizza', amount: 0 },
    { id: 3, name: 'Salad', description: 'Fresh greens and veggies with your choice of dressing', price: 4.99, image: 'https://source.unsplash.com/900x900/?salad', amount: 0 },
    { id: 4, name: 'Fries', description: 'Crispy and delicious, perfect as a side or on their own', price: 2.99, image: 'https://source.unsplash.com/900x900/?fries', amount: 0 },
    { id: 5, name: 'Ice Cream', description: 'Rich and creamy, the perfect dessert any time of day', price: 3.99, image: 'https://source.unsplash.com/900x900/?icecream', amount: 0 },
    
    { id: 6, name: 'Big Hamburger', description: 'Juicy beef patty on a fresh bun with all the fixings', price: 5.99, image: 'https://source.unsplash.com/900x900/?burger', amount: 0 },
    { id: 7, name: 'Big Pizza ', description: 'Freshly made pizza with your choice of toppings', price: 9.99, image: 'https://source.unsplash.com/900x900/?pizza', amount: 0 },
    { id: 8, name: 'Big Salad', description: 'Fresh greens and veggies with your choice of dressing', price: 4.99, image: 'https://source.unsplash.com/900x900/?salad', amount: 0 },
    { id: 9, name: 'Big Fries', description: 'Crispy and delicious, perfect as a side or on their own', price: 2.99, image: 'https://source.unsplash.com/900x900/?fries', amount: 0 },
    { id: 10, name: 'Big Ice Cream', description: 'Rich and creamy, the perfect dessert any time of day', price: 3
//LOGIN TO SEE THE REST OF THE CODE.==, =====: '=====://======.========.===/=======/?========', ======: = },
  ]);

  ===== =============== = (====) => {
    ===========(
      ========.===((=======) =>
        =======.== === ====.== ? { ...=======, ======: =======.====== + = } : =======
      )
    );
  };

  ===== =============== = (====) => {
    ===========(
      ========.===((=======) =>
        =======.== === ====.== ? { ...=======, ======: ====.===(=, =======.====== - =) } : =======
      )
    );
  };

  ===== ================= = ({ ==== }) => (
    <=========== ====={====} ============{() => ===============(====)} ============{() => ===============(====)} />
  );

  ====== (
    <==== ======{======.=========}>
      <========
        ====={========}
        ======{======.===========}
        ==========={=================}
        ============={(====) => ====.==.========()}
        ======================{{ =================: ==, =============: === }}
      />
      <================ ======{======.==============}>
        <==== ======{======.==================}>========</====>
      </================>
    </====>
  );
};

===== ====== = ==========.======({
  =========: {
    ====: =,
    ===============: '#======',
    ==========:==,
  },
  ===========: {
    ====: =,
    ==========: ==,
  },
  ===========: {
    =============: '===',
    ==============: '=====-=======',
    ==========: '======',
    ===============: '#===',
    ============: =,
    ===========: '#===',
    =============: =.=,
    ============: { =====: =, ======: = },
    ============: =,
    =======: ==,
    ============: ==,
  },
  ============: {
    =====: ==,
    ======: ==,
    ============: ==,
    ===========: ==,
  },
  ===========: {
    ====: =,
    ===========: ==,
  },
  ===========: {
    ========: ==,
    ==========: '====',
    ============: =,
  },
  ==================: {
    ========: ==,
    =====: '#===',
    ============: =,
  },
  ============: {
    ========: ==,
    ==========: '====',
    =====: '#======',
  },
  ================: {
    ========: ==,
    ==========: '======',
    =====: '#===',
  },
  =============: {
    =============: '===',
    ==========: '======',
  },
  ============: {
    =====: ==,
    ======: ==,
    ===============: '#======',
    ============: ==,
    ==============: '======',
    ==========: '======',
  },
  ================: {
    =====: '#===',
    ========: ==,
  },
  ==========: {
    ========: ==,
    ==========: '====',
    ================: ==,
  },
  ==============: {
    ========: '========',
    ======: ==,
    ====: ==,
    =====: ==,
    ===============: '#======',
    ============: =,
    =======: ==,
    ==========: '======',
  },
  ==================: {
    =====: '#===',
    ========: ==,
    ==========: '====',
  },
});

====== ======= ===;