React-Native: Expo stops when I add Picker item

Question

I'm new to react-native, I'm trying to use Picker item to selct from a dropdown, I'm using react hooks to set Picker items to be selectable, however Expo stops without warning when I add the code:

const HomeScreen3 = observer(() => 
{
  const [ options, setOptions ] = useState([ { id:1, title:'Titulo 1' }, { id:2, title:'Titulo 2' } ]);
  const [ selectedOption, setSelectedOption ] = useState({ id:1, title:'Titulo 1' });

  useEffect(() => {
    console.log('component mounted');
   }, []);
  
  return (
    <View style={{flex: 1, backgroundColor: '#fff', padding:10, position:'relative' }}>
    <ScrollView showsHorizontalScrollIndicator={false}>
    <Picker
          itemStyle={{ backgroundColor: "white", color: "black", borderColor:'rgba(0,0,0,0.2)', fontSize:16,  }}
          mode="dropdown"
          selectedValue={selectedOption}
          onValueChange={(value) => { setSelectedOption( value)}}>
          
              {options.map((item, index) => {
                  return (<Picker.Item label={item} value={item} key={index}/>) 
              })}
            
      </Picker>
    </ScrollView>
  </View>

export default HomeScreen3;

Answer 1

First of all, in Expo SDK 38 the import { Picker } from 'react-native'; is no longer working as expected.

Make sure you use import { Picker } from '@react-native-community/picker';

Here is the documentation for it: https://github.com/react-native-community/react-native-picker .

Second, the real problem I see is an issue with your code is that for the Picker.Item , here:

{options.map((item, index) => {
    return (<Picker.Item label={item} value={item} key={index}/>) 
})}

you are sending the complete objects in the label and item props. However, looking at the actual documentation, label accepts a string and value accepts string or integer - https://reactnative.dev/docs/picker-item

That means your Picker code should look like this:

<Picker
      itemStyle={{backgroundColor: "white", color: "black", borderColor:'rgba(0,0,0,0.2)', fontSize:16}}
      mode="dropdown"
      selectedValue={selectedOption}
      onValueChange={(value) => {setSelectedOption(value)}}>
          {options.map((item, index) => {
              return (<Picker.Item label={item.id} value={item.title} key={index}/>) 
          })}
  </Picker>

and the selectedOption should only store the id of the item like this:

const [ selectedOption, setSelectedOption ] = useState(1);

Answer 2

for expo use this works for me even is there a warn but works!

import { Picker } from 'react-native' 
// state
 const [picked, setPicked] = useState(1.15);

 <Picker
        selectedValue={picked}
        style={{ height: 50, width: 100 }}
        onValueChange={(itemValue, itemIndex) =>
          setPicked(itemValue)
        }>

        <Picker.Item label="Canda 5%" value={1.05} />
        <Picker.Item label="Japan 8%" value={1.08} />
        <Picker.Item label="USA 10%" value={1.10} />
        <Picker.Item label="Egypt 14%" value={1.14} />
        <Picker.Item label="Saudi Arabia 15%" value={1.15} />
        <Picker.Item label="China 16%" value={1.16} />
        <Picker.Item label="Algeria 17%" value={1.17} />
        <Picker.Item label="18%" value={1.18} />
        <Picker.Item label="German 19%" value={1.19} />
        <Picker.Item label="German 19%" value={1.20} />
      </Picker>