I want to make dropdown, but the Picker is giving error in React Native

Question

I want to make a dropdown but the picker in this code is not working. How the dropdown can be made? this code runs all other things like (Text etc) but when i add picker it gives an error. So, how to make dropdown then?

import { useState } from "react";
import { View, Picker, StyleSheet, Text} from "react-native";

export default function app() {

  const [pickerval, setPickerval] = useState('java')

  return(
    <View style={styles.container}>
      <Text>helo</Text>

      <Picker style={styles.picker} selectedValue = {pickerval} onValueChange={(itemValue) => setPickerval(itemValue)}  >
        
        <Picker.Item label= "java" value= "java" />
        <Picker.Item label= "a" value= "a" />
        <Picker.Item label= "d" value= "d" />

      </Picker>

    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }

})

Answer 1

Use this package,

import RNPickerSelect from 'react-native-picker-select';

Example code:

 import RNPickerSelect from 'react-native-picker-select'; <RNPickerSelect placeholder = {{label: "Select Topic"}} onValueChange={(value) => console.log(value)} items={[ {label: 'Grammar', value: '1'}, {label: 'Poems', value: '2'}, {label: 'Biography', value: '3'}, {label: 'Meaning', value: '4'}, ]} />

Answer 2

you can try this example, as per React Native Picker Guideline they removed Picker and moved to separate here

import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import {Picker} from '@react-native-picker/picker';

const PickerExample = () => {
  const [pickerval, setPickerval] = useState('java');

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>helo</Text>

        <Picker
          style={styles.picker}
          selectedValue={pickerval}
          onValueChange={itemValue => setPickerval(itemValue)}>
          <Picker.Item label="java" value="java" />
          <Picker.Item label="a" value="a" />
          <Picker.Item label="d" value="d" />
        </Picker>
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  picker: {flex: 1},
});
export default PickerExample;