crazycharge-app/component/global/dropdown_select.tsx

import React, { useState } from 'react';
import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

interface DropdownOption {
    label: string;
    value: string;
}

interface DropdownSelectProps {
    dropdownOptions: DropdownOption[]; //receive an array of key-value pair objects for dropdown options. Example: { label: '男', value: 'male' },{ label:'女', value: 'female'}
    placeholder: string;
    maxHeight?: number;
    extendedStyle?: StyleProp<ViewStyle>;
    onSelect: (value: string) => void;
}

const DropdownSelect: React.FC<DropdownSelectProps> = ({
    dropdownOptions,
    placeholder,
    maxHeight,
    extendedStyle,
    onSelect
}) => {
    const [value, setValue] = useState<string | null>(null);
    const [isFocus, setIsFocus] = useState(false);

    return (
        <View style={styles.container}>
            <Dropdown
                data={dropdownOptions}
                style={[styles.dropdown, extendedStyle]}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                itemTextStyle={{ color: '#888888' }}
                containerStyle={{ borderRadius: 12 }}
                search={false}
                maxHeight={maxHeight ? maxHeight : 150}
                labelField="label"
                valueField="value"
                placeholder={!isFocus ? placeholder : '...'}
                searchPlaceholder="Search..."
                value={value}
                autoScroll={false}
                onFocus={() => setIsFocus(true)}
                onBlur={() => setIsFocus(false)}
                onChange={(item) => {
                    setValue(item.value);
                    setIsFocus(false);
                    onSelect(item.value);
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        maxWidth: '100%',
        position: 'relative'
    },

    dropdown: {
        flex: 1,
        borderColor: '#bbbbbb',
        borderWidth: 1,
        borderRadius: 12,
        zIndex: 10000,
        paddingRight: 15
    },
    selectedTextStyle: {
        color: '#888',
        fontSize: 16,
        paddingLeft: 6
    },
    placeholderStyle: {
        color: '#888',
        paddingLeft: 6
    }
});

export default DropdownSelect;