How to create drop-down in React-native?

Question

I want to add a dropdown in my view.

I also added a comment where I am trying to add a dropdown. I tried this https://www.npmjs.com/package/react-native-dropdown-picker but it Just giving me some error.

 import React, {  useState } from 'react'; //import useState
    import DropDownPicker from 'react-native-dropdown-picker';
    import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
        
        
        
        export default function App() {
        
            const [search, setSearch] = useState(''); //add this line
            
          return (      
            
            <SafeAreaView>
              <View style={styles.container}>
                <TextInput 
                  onChangeText={(text) => setSearch(text)}
                  
                  placeholder="Search"
                  style={styles.searchbox}                        
                ></TextInput>   
        
              <View style={styles.makecentral} >   
                {search.length < 1 ? <Image               
                    style={styles.tinyLogo}
                    source={require('./assets/icons8_search_200px_3.png')}        
                  /> : ( 
                      null  //add clear text image and clear search text
                      
                  )}
              
              </View>
                    <View style={{flexDirection:'row'}}>
        
                      <View elevation={2}  style={{flex:3,backgroundColor:'#ffffff',height:40,marginTop:10,marginLeft:'2.5%',borderBottomLeftRadius:5,borderTopLeftRadius:5}}>
                        <Text style={{textAlign:'center',fontSize:20,color:'#FF7B00',marginTop:7}}>
                          Category
                        </Text>
                      </View>
                      
                      <View elevation={2} style={{backgroundColor:'#FF7B00',height:40,flex:5,marginTop:10,borderTopRightRadius:5,borderBottomRightRadius:5,marginRight:'2.5%'}}>

                       //here..I want to add a dropdown..
           
                      </View>
        
                    
                    </View>
        
            </View>
            </SafeAreaView>
          );
        }
        
        
        const styles = StyleSheet.create({
          container: {    
            backgroundColor: '#fff',    
            
          },
        
          searchbox:{
            backgroundColor:'#f2f2f2',
            marginTop : StatusBar.currentHeight+5,
            height : 50,
            marginLeft:10,
            marginRight : 10,
            borderRadius : 20,
            textAlignVertical:'center',
            textAlign : 'center',
            alignItems:'center',        
          },
        
          tinyLogo: {
            position : 'absolute',
            width: 30,
            height: 30,
            opacity: 0.5,
            marginTop: -40,    
          },
        
          makecentral: {
            alignItems:'center',
            marginRight:80,    
          },
        
          category:{
            backgroundColor:'#f2f2f2',
            height:50,
            width:'90%',
            alignContent:'center',
        
        
          }
        });

Answer 1

It seems from your answer that you are not providing items to your DropDownPicker, therefore it crashes. You can't just give an empty component.

As per docs, it should look something like:

<DropDownPicker
    items={[
        {label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true},
        {label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" />},
        {label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" />},
    ]}
    defaultValue={this.state.country}
    containerStyle={{height: 40}}
    style={{backgroundColor: '#fafafa'}}
    onChangeItem={item => this.setState({
        country: item.value
    })}
/>

items are actually the only prop which is required.

Please refer here