title: How to create drop-down in React-native?
body: <p>I want to add a dropdown in my view.
  I am new to rnative please help.</p>
  <p>I also added a comment where I am trying to add a dropdown. I tried this <a href="https://www.npmjs.com/package/react-native-dropdown-picker" rel="nofollow noreferrer">https://www.npmjs.com/package/react-native-dropdown-picker</a> but it Just giving me some error.</p>
  <p>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';</p>
  <pre><code>    export default function App() {
      
          const [search, setSearch] = useState(''); //add this line
          
        return (      
          
          &lt;SafeAreaView&gt;
            &lt;View style={styles.container}&gt;
              &lt;TextInput 
                onChangeText={(text) =&gt; setSearch(text)}
                
                placeholder=&quot;Search&quot;
                style={styles.searchbox}                        
              &gt;&lt;/TextInput&gt;   
      
            &lt;View style={styles.makecentral} &gt;   
              {search.length &lt; 1 ? &lt;Image               
                  style={styles.tinyLogo}
                  source={require('./assets/icons8_search_200px_3.png')}        
                /&gt; : ( 
                    null  //add clear text image and clear search text
                    
                )}
            
            &lt;/View&gt;
                  &lt;View style={{flexDirection:'row'}}&gt;
      
                    &lt;View elevation={2}  style={{flex:3,backgroundColor:'#ffffff',height:40,marginTop:10,marginLeft:'2.5%',borderBottomLeftRadius:5,borderTopLeftRadius:5}}&gt;
                      &lt;Text style={{textAlign:'center',fontSize:20,color:'#FF7B00',marginTop:7}}&gt;
                        Category
                      &lt;/Text&gt;
                    &lt;/View&gt;
                    
                    &lt;View elevation={2} style={{backgroundColor:'#FF7B00',height:40,flex:5,marginTop:10,borderTopRightRadius:5,borderBottomRightRadius:5,marginRight:'2.5%'}}&gt;
  
                     //here..I want to add a dropdown..
         
                    &lt;/View&gt;
      
                  
                  &lt;/View&gt;
      
          &lt;/View&gt;
          &lt;/SafeAreaView&gt;
        );
      }
      
      
      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',
      
      
        }
      });
  </code></pre>