Order Screen template in react native expo

[tempcp001]

import React, { useState } from 'react';
import { FlatList, View } from 'react-native';
import OrderCard from './card';
import { Searchbar } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
const DUMMY_DATA = [
{ id: '1', userId: '10', price: '100', status: 'Delivered', timeLeft: '2 days', createdAt: new Date() },
{ id: '2', userId: '20', price: '200', status: 'Shipped', timeLeft: '3 days', createdAt: new Date() },
// Add more dummy data here
];
export default function OrdersScreen() {
const [searchQuery, setSearchQuery] = useState('');
const navigation = useNavigation();
const filteredOrders = DUMMY_DATA.filter(order =>
order.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
order.userId.toLowerCase().includes(searchQuery.toLowerCase())
);
const handleUpdate = (orderId) => {
// Handle update action
navigation.navigate('EditOrderScreen', { orderId });
};
return (
<View>
<View style={{ margin: 10, marginBottom: 0 }}>
<Searchbar
placeholder="Search"
onChangeText={setSearchQuery}
value={searchQuery}
theme={{
roundness: 20,
colors: {
primary: '#000',
text: '#000',
placeholder: '#000',
background: '#fff',
},
}}
/>
</View>
<FlatList
data={filteredOrders}
keyExtractor={item => item.id}
renderItem={({ item }) => <OrderCard order={item} handleUpdate={handleUpdate} />}
contentContainerStyle={{ padding: 10 }}
/>
</View>
);
}

Click to read more...