58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import { View, StyleSheet } from "react-native";
|
|
import { Picker, PickerProps } from "@react-native-picker/picker";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
export const PickerItem = Picker.Item;
|
|
|
|
interface CustomPickerProps extends PickerProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const CustomPicker = ({
|
|
selectedValue,
|
|
onValueChange,
|
|
children,
|
|
}: CustomPickerProps) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Picker
|
|
selectedValue={selectedValue}
|
|
onValueChange={(itemValue, itemIndex) => {
|
|
onValueChange?.(itemValue, itemIndex);
|
|
}}
|
|
style={[styles.pickerStyle, { appearance: "none" } as any]}
|
|
>
|
|
{children}
|
|
</Picker>
|
|
<Ionicons
|
|
name="chevron-down"
|
|
size={20}
|
|
color="#333"
|
|
style={styles.customIcon}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
pickerStyle: {
|
|
height: 50,
|
|
width: "100%",
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
cursor: "pointer",
|
|
},
|
|
customIcon: {
|
|
position: "absolute",
|
|
right: 12,
|
|
top: "50%",
|
|
transform: [{ translateY: -10 }],
|
|
pointerEvents: "none",
|
|
},
|
|
});
|