Picker DropDown example in react native

• Create Components folder under src folder
• Add PickerDropDown.js file and add below Code

import React from "react";

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

export default class PickerDropDown extends React.Component {

  state = { choosenLabel: "", choosenindex: "" };

  render() {

    return (

      <View style={styles.container}>

        <Text>Picker DropDown Example</Text>

        <Text>{this.state.choosenLabel}</Text>

        <Text>{this.state.choosenindex}</Text>

        <Picker

          selectedValue={this.state.choosenLabel}

          onValueChange={(itemValue, itemIndex) =>

            this.setState({ choosenLabel: itemValue, choosenindex: itemIndex })

          }

        >

          <Picker.Item label="Hello" value="word1" />

          <Picker.Item label="React" value="word2" />

          <Picker.Item label="Native" value="word3" />

          <Picker.Item label="How" value="word4" />

          <Picker.Item label="are" value="word5" />

          <Picker.Item label="you" value="word6" />

        </Picker>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: "center",

    flexDirection: "column"

  }

});

• Open App.js file and update code as below\

import React from 'react';

import { View,StyleSheet } from 'react-native';

import PickerDropDown from './src/Component/PickerDropDown'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <PickerDropDown/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: