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',
        
        
          }
        });

When I try to add <DropDownPicker></DropDownPicker> in view. — sanket kheni
– sanket kheni, Commented Feb 4, 2021 at 11:50

Konstantin · Accepted Answer · 2021-02-04 12:13:32Z

2

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

answered Feb 4, 2021 at 12:13

Konstantin

1,4688 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sanket kheni Over a year ago

where to pu this this.state = { country: 'uk' }

Konstantin Over a year ago

nono, that was just an example - adapt it to your data. Add the data you want to show in your dropdown picker.

Collectives™ on Stack Overflow

How to create drop-down in React-native?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related