import React, { useState } from 'react'; import { View, TextInput, StyleSheet, FlatList, Text, TouchableOpacity } from 'react-native'; const CustomerSearch = ({ customers = [], onSelectCustomer }) => { const [searchTerm, setSearchTerm] = useState(''); const [searchResults, setSearchResults] = useState([]); const handleSearch = (text) => { setSearchTerm(text); if (text.length > 0) { const results = customers.filter(customer => customer.name.toLowerCase().includes(text.toLowerCase()) || customer.id.toString().includes(text) || customer.mobile.includes(text) ); setSearchResults(results); } else { setSearchResults([]); } }; const handleCustomerSelect = (customer) => { onSelectCustomer(customer); setSearchTerm(''); setSearchResults([]); }; return ( {searchResults.length > 0 && ( item.id.toString()} renderItem={({ item }) => ( handleCustomerSelect(item)} > {item.name} ID: {item.id} | Mobile: {item.mobile} )} ItemSeparatorComponent={() => } /> )} ); }; const styles = StyleSheet.create({ container: { marginVertical: 10, position: 'relative', zIndex: 1, }, searchInput: { height: 40, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, paddingHorizontal: 10, backgroundColor: '#fff', }, resultsContainer: { position: 'absolute', top: 45, left: 0, right: 0, maxHeight: 200, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 8, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, }, resultItem: { padding: 10, }, resultText: { fontSize: 16, fontWeight: '500', }, resultSubText: { fontSize: 12, color: '#666', marginTop: 2, }, separator: { height: 1, backgroundColor: '#eee', }, }); export default CustomerSearch; import React, { useState } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import CustomerSearch from './CustomerSearch'; const CustomerSearchExample = () => { const [selectedCustomer, setSelectedCustomer] = useState(null); // Sample customer data const customers = [ { id: 1, name: 'John Doe', mobile: '1234567890' }, { id: 2, name: 'Jane Smith', mobile: '2345678901' }, { id: 3, name: 'Robert Johnson', mobile: '3456789012' }, { id: 4, name: 'Emily Davis', mobile: '4567890123' }, { id: 5, name: 'Michael Brown', mobile: '5678901234' }, ]; return ( {selectedCustomer && ( Selected Customer: Name: {selectedCustomer.name} ID: {selectedCustomer.id} Mobile: {selectedCustomer.mobile} )} ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5', }, selectedContainer: { marginTop: 20, padding: 15, backgroundColor: '#fff', borderRadius: 8, borderWidth: 1, borderColor: '#ddd', }, selectedTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10, }, selectedText: { fontSize: 16, marginBottom: 5, }, }); export default CustomerSearchExample; import React from 'react'; import { SafeAreaView, StatusBar } from 'react-native'; import CustomerSearchExample from './src/components/CustomerSearchExample'; const App = () => { return ( <> ); }; export default App;