dropdownrectnative
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
type DropdownOption<T> = {
label: string;
value: T;
icon: any; // URL or local path to the icon
};
type DropdownIconsProps<T> = {
options: DropdownOption<T>[]; // Options with label, value, and icon
onValueChange: (value: T) => void; // Callback for when a value is selected
selectedValue: string | null; // The currently selected value
placeholder?: string; // Placeholder for the dropdown
};
function DropdownIcons<T>({
options,
onValueChange,
selectedValue,
placeholder = 'Select an option',
}: DropdownIconsProps<T>) {
// Custom render for dropdown items
const renderItem = (item: DropdownOption<T>) => (
<View style={styles.item}>
<Image
source={item.icon} // Can be a local require or remote URL
style={styles.icon}
resizeMode="contain"
/>
<Text style={styles.label}>{item.label}</Text>
</View>
);
return (
<View style={styles.container}>
<Dropdown
style={styles.dropdown}
placeholderStyle={styles.placeholder}
selectedTextStyle={styles.selectedText}
data={options} // The dropdown options
labelField="label" // Field for the label in options
valueField="value" // Field for the value in options
value={selectedValue} // Currently selected value
onChange={(item) => onValueChange(item.value)} // Handle value changes
placeholder={placeholder}
renderItem={(item) => renderItem(item)} // Custom render function for items
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginVertical: 10,
width: '90%',
},
dropdown: {
height: 50,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 8,
backgroundColor: '#fff',
},
placeholder: {
color: '#999',
fontSize: 16,
},
selectedText: {
fontSize: 16,
color: '#333',
},
item: {
flexDirection: 'row',
alignItems: 'center',
padding: 10,
},
icon: {
width: 20,
height: 20,
marginRight: 10,
},
label: {
fontSize: 16,
color: '#333',
},
});
export default DropdownIcons;
Comments
Post a Comment