How to display dropdown in ReactNative?

React Native provides the Picker component (now deprecated) and modern alternatives for creating dropdown selections. This guide covers both approaches.

Basic Picker Syntax

The traditional Picker component follows this structure:

<Picker selectedValue={selectedElement} onValueChange={updateFunc}>
    <Picker.Item label="ItemLabel" value="ItemValue" />
    <Picker.Item label="ItemLabel" value="ItemValue" />
</Picker>

Import the Picker component from React Native:

import { Picker } from 'react-native'

Picker Properties

Example: User Selection Dropdown

Here's a complete example showing a user selection dropdown:

import React, { Component } from 'react';
import { View, Text, Picker, StyleSheet } from 'react-native';

class PickerExample extends Component {
    state = { user: '' }
    
    updateUser = (user) => {
        this.setState({ user: user })
    }
    
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>Select User:</Text>
                <Picker 
                    selectedValue={this.state.user} 
                    onValueChange={this.updateUser}
                    style={styles.picker}
                >
                    <Picker.Item label="Choose a user..." value="" />
                    <Picker.Item label="Steve" value="steve" />
                    <Picker.Item label="Ellen" value="ellen" />
                    <Picker.Item label="Maria" value="maria" />
                </Picker>
                <Text style={styles.selectedText}>
                    Selected: {this.state.user || 'None'}
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20,
        marginTop: 50
    },
    title: {
        fontSize: 18,
        marginBottom: 10
    },
    picker: {
        height: 50,
        width: '100%',
        marginBottom: 20
    },
    selectedText: {
        fontSize: 16,
        color: 'red',
        textAlign: 'center'
    }
});

export default PickerExample;

Modern Alternative: @react-native-picker/picker

Since Picker is deprecated in React Native 0.60+, use the community package:

npm install @react-native-picker/picker

import { Picker } from '@react-native-picker/picker';

// Usage remains the same as above examples

Functional Component Example

Here's the same functionality using React hooks:

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

const DropdownExample = () => {
    const [selectedUser, setSelectedUser] = useState('');
    
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Select User:</Text>
            <Picker
                selectedValue={selectedUser}
                onValueChange={(itemValue) => setSelectedUser(itemValue)}
                style={styles.picker}
            >
                <Picker.Item label="Choose a user..." value="" />
                <Picker.Item label="Steve" value="steve" />
                <Picker.Item label="Ellen" value="ellen" />
                <Picker.Item label="Maria" value="maria" />
            </Picker>
            <Text style={styles.selectedText}>
                Selected: {selectedUser || 'None'}
            </Text>
        </View>
    );
};

Key Points

• The original Picker is deprecated in React Native 0.60+
• Use @react-native-picker/picker for new projects
• Always provide a default empty option for better UX
• The onValueChange callback receives the selected value as first parameter
• Picker appearance varies between iOS and Android platforms

Conclusion

React Native dropdowns are created using Picker components. For modern apps, use the community package @react-native-picker/picker instead of the deprecated built-in Picker. Both class and functional component approaches work effectively for managing dropdown selections.