react native select
import React from 'react';
import { View, Text, Button, Image, StyleSheet } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import { useForm, Controller } from 'react-hook-form';
const App = () => {
const { control, handleSubmit } = useForm();
// Options with paths to images in the asset folder
const options = [
{ label: 'SF/VIDAL 2022', value: 'SF/VIDAL 2022', icon: require('./assets/icons/chocolate.png') },
{ label: 'SF/VIDAL 2023', value: 'SF/VIDAL 2023', icon: require('./assets/icons/strawberry.png') },
{ label: 'SF/VIDAL 2024', value: 'SF/VIDAL 2024', icon: require('./assets/icons/vanilla.png') },
];
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
return (
<View style={{ padding: 20 }}>
<Text style={{ fontSize: 18, marginBottom: 10 }}>Select Ice Cream Preference</Text>
<Controller
name="iceCreamType"
control={control}
defaultValue=""
render={({ field }) => (
<RNPickerSelect
{...field}
onValueChange={(value) => field.onChange(value)}
items={options}
placeholder={{
label: 'Select your ice cream...',
value: null,
}}
style={{
inputIOS: styles.pickerStyle,
inputAndroid: styles.pickerStyle,
}}
// Customizing item rendering using getItemLabel
getItemLabel={(item) => (
<View style={styles.itemContainer}>
<Image source={item.icon} style={styles.icon} />
<Text style={styles.itemText}>{item.label}</Text>
</View>
)}
/>
)}
/>
<Button title="Submit" onPress={handleSubmit(onSubmit)} />
</View>
);
};
const styles = StyleSheet.create({
pickerStyle: {
padding: 10,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4,
marginBottom: 20,
},
itemContainer: {
flexDirection: 'row',
alignItems: 'center',
padding: 10,
},
icon: {
width: 20,
height: 20,
marginRight: 10,
},
itemText: {
fontSize: 16,
},
});
export default App;
https://codesandbox.io/p/sandbox/react-hook-form-with-ui-library-forked-vmm4wg?file=%2Fsrc%2Findex.js%3A24%2C36
Comments
Post a Comment