Edit Product Screen in React native expo

[tempcp001]

import React, { useState } from 'react';
import { FlatList, View } from 'react-native';
import { Searchbar } from 'react-native-paper';
import RestaurantCard from './card';
import { useNavigation } from '@react-navigation/native';
const ProductsScreen = () => {
const [searchQuery, setSearchQuery] = useState('');
const navigation = useNavigation();
const restaurants = [
// Dummy data. Replace this with actual data.
{ id: 1, name: 'Food Truck 1', title: 'Title 1', status: 'Open', zipcode: '12345', type: 'Italian', createdAt: new Date() },
{ id: 2, name: 'Food Truck 2', title: 'Title 2', status: 'Closed', zipcode: '67890', type: 'Mexican', createdAt: new Date() },
//...
];
const onChangeSearch = query => setSearchQuery(query);
const handleEdit = (restaurantId) => {
// Handle edit action
navigation.navigate('EditProductScreen');
};
const handleDelete = (restaurantId) => {
// Handle delete action
console.log(`Deleting restaurant with id ${restaurantId}`);
};
const viewReviews = (restaurantId) => {
// Handle delete action
navigation.navigate('ReviewsScreen');
};
const filteredRestaurants = restaurants.filter(restaurant => {
const { name, title, status, zipcode, type } = restaurant;
const lowerCaseQuery = searchQuery.toLowerCase();
return (
name.toLowerCase().includes(lowerCaseQuery) ||
title.toLowerCase().includes(lowerCaseQuery) ||
status.toLowerCase().includes(lowerCaseQuery) ||
zipcode.toLowerCase().includes(lowerCaseQuery) ||
type.toLowerCase().includes(lowerCaseQuery)
);
});
return (
<View>
<View style={{ margin: 10, marginBottom: 0 }}>
<Searchbar
placeholder="Search"
onChangeText={onChangeSearch}
value={searchQuery}
theme={{
roundness: 20,
colors: {
primary: '#000',
text: '#000',
placeholder: '#000',
background: '#fff',
},
}}
/>
</View>
<FlatList
data={filteredRestaurants}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<RestaurantCard restaurant={item} onEdit={handleEdit} onDelete={handleDelete} viewReviews={viewReviews} />
)}
contentContainerStyle={{ padding: 10 }}
/>
</View>
);
};
export default ProductsScreen;

Click to read more...