sort/components/native/dropdown.tsx

import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, FlatList } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; // Optional for adding icons

const CustomPicker = ({ label, options, selectedValue, onValueChange }:any) => {
    const [isVisible, setIsVisible] = useState(false);

    const handleSelect = (item:any) => {
        onValueChange(item.value);
        setIsVisible(false);
    };

    let optionSet = options.map((s:any, i:any)=>{
        s.key = i;
        return s;
    }) 

    return (
        <View style={{width:"100%"}}>
            <TouchableOpacity
                style={{
                    height: 35,
                    width: '100%',
                    flexDirection:'row',
                    justifyContent: 'center',
                    borderRadius: 5,
                    borderBottomWidth:0.5,
                    borderBottomColor:'white',
                    borderStyle:'dashed'
                }}
                onPress={() => setIsVisible(true)}
            >
                <View style={{flex:1}}>
                    <Text style={{ color: 'white', fontSize: 20, fontWeight:'600' }}>
                        {(optionSet.find((option:any) => option.value === selectedValue)?.label || (label ? label : 'SELECT CUSTOMER')).toUpperCase()}
                    </Text>
                </View>
                <Ionicons
                    name="chevron-down-outline"
                    size={24}
                    color={"white"}
                    style={{ marginRight: 15 }}
                />
            </TouchableOpacity>

            <Modal
                visible={isVisible}
                transparent={true}
                animationType="slide"
            >
                <TouchableOpacity
                    style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
                    onPress={() => setIsVisible(false)}
                >
                    <View
                        style={{
                            backgroundColor: '#fff',
                            margin: 20,
                            borderRadius: 10,
                            padding: 10,
                        }}
                    >
                        <FlatList
                            data={optionSet}
                            keyExtractor={(item) => item.key}
                            renderItem={({ item }) => (
                                <TouchableOpacity
                                    style={{
                                        flexDirection: 'row',
                                        alignItems: 'center',
                                        paddingVertical: 10,
                                        paddingHorizontal: 20,
                                        borderBottomWidth: 1,  // Add bottom border to each item
                                        borderBottomColor: '#ccc',  // Set border color
                                    }}
                                    onPress={() => handleSelect(item)}
                                >
                                    <Ionicons
                                        name="checkmark-circle"
                                        size={24}
                                        color={item.value === selectedValue ? "#333" : "#ccc"}
                                        style={{ marginRight: 15 }}
                                    />
                                    <Text style={{ color: '#333', fontSize: 16, fontWeight: '900' }}>
                                        {item.label}
                                    </Text>
                                </TouchableOpacity>
                            )}
                        />
                    </View>
                </TouchableOpacity>
            </Modal>
        </View>
    );
};

export default CustomPicker;