Picker & DatePicker

Learn to use Picker and DatePicker components for selecting values from predefined options and choosing dates in React Native applications. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples

30 min•By Priygop Team•Last updated: Feb 2026

Picker Component

Picker is used to select a single value from a set of options. It renders a dropdown on Android and a wheel picker on iOS. For more advanced pickers, consider using community libraries like react-native-picker-select.

DatePicker Component

DatePicker allows users to select dates and times. The built-in DatePickerIOS is iOS-only, so for cross-platform date picking, use libraries like @react-native-community/datetimepicker.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Picker & DatePicker Example

Example

import React, { useState } from 'react';
import { 
  View, 
  Text, 
  Picker, 
  TouchableOpacity, 
  StyleSheet, 
  Platform,
  Alert 
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const PickerExample = () => {
  const [selectedCountry, setSelectedCountry] = useState('us');
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);

  const countries = [
    { label: 'United States', value: 'us' },
    { label: 'Canada', value: 'ca' },
    { label: 'United Kingdom', value: 'uk' },
    { label: 'Germany', value: 'de' },
    { label: 'France', value: 'fr' },
    { label: 'Japan', value: 'jp' },
  ];

  const handleDateChange = (event: any, selectedDate?: Date) => {
    setShowDatePicker(Platform.OS === 'ios');
    if (selectedDate) {
      setSelectedDate(selectedDate);
    }
  };

  const showDatePickerModal = () => {
    setShowDatePicker(true);
  };

  const handleSubmit = () => {
    Alert.alert(
      'Selection',
      `Country: ${countries.find(c => c.value === selectedCountry)?.label}\nDate: ${selectedDate.toLocaleDateString()}`
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Picker & DatePicker</Text>
      
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Select Country</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={selectedCountry}
            onValueChange={(itemValue) => setSelectedCountry(itemValue)}
            style={styles.picker}
          >
            {countries.map((country) => (
              <Picker.Item
                key={country.value}
                label={country.label}
                value={country.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Select Date</Text>
        <TouchableOpacity style={styles.dateButton} onPress={showDatePickerModal}>
          <Text style={styles.dateButtonText}>
            {selectedDate.toLocaleDateString()}
          </Text>
        </TouchableOpacity>
      </View>

      {showDatePicker && (
        <DateTimePicker
          value={selectedDate}
          mode="date"
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          onChange={handleDateChange}
        />
      )}

      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
        <Text style={styles.buttonText}>Submit Selection</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  inputContainer: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 8,
    color: '#333',
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    backgroundColor: 'white',
  },
  picker: {
    height: 50,
  },
  dateButton: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    backgroundColor: 'white',
  },
  dateButtonText: {
    fontSize: 16,
    color: '#333',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default PickerExample;

Try It Yourself — User Input & Forms

Try It Yourself — User Input & FormsHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 3</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 3</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Quick Quiz — User Input & Forms

Next Module →

Picker & DatePicker

30 min•By Priygop Team•Last updated: Feb 2026

DatePicker Component

Picker & DatePicker Example

Example

import React, { useState } from 'react';
import { 
  View, 
  Text, 
  Picker, 
  TouchableOpacity, 
  StyleSheet, 
  Platform,
  Alert 
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const PickerExample = () => {
  const [selectedCountry, setSelectedCountry] = useState('us');
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);

  const countries = [
    { label: 'United States', value: 'us' },
    { label: 'Canada', value: 'ca' },
    { label: 'United Kingdom', value: 'uk' },
    { label: 'Germany', value: 'de' },
    { label: 'France', value: 'fr' },
    { label: 'Japan', value: 'jp' },
  ];

  const handleDateChange = (event: any, selectedDate?: Date) => {
    setShowDatePicker(Platform.OS === 'ios');
    if (selectedDate) {
      setSelectedDate(selectedDate);
    }
  };

  const showDatePickerModal = () => {
    setShowDatePicker(true);
  };

  const handleSubmit = () => {
    Alert.alert(
      'Selection',
      `Country: ${countries.find(c => c.value === selectedCountry)?.label}\nDate: ${selectedDate.toLocaleDateString()}`
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Picker & DatePicker</Text>
      
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Select Country</Text>
        <View style={styles.pickerContainer}>
          <Picker
            selectedValue={selectedCountry}
            onValueChange={(itemValue) => setSelectedCountry(itemValue)}
            style={styles.picker}
          >
            {countries.map((country) => (
              <Picker.Item
                key={country.value}
                label={country.label}
                value={country.value}
              />
            ))}
          </Picker>
        </View>
      </View>

      <View style={styles.inputContainer}>
        <Text style={styles.label}>Select Date</Text>
        <TouchableOpacity style={styles.dateButton} onPress={showDatePickerModal}>
          <Text style={styles.dateButtonText}>
            {selectedDate.toLocaleDateString()}
          </Text>
        </TouchableOpacity>
      </View>

      {showDatePicker && (
        <DateTimePicker
          value={selectedDate}
          mode="date"
          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
          onChange={handleDateChange}
        />
      )}

      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
        <Text style={styles.buttonText}>Submit Selection</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  inputContainer: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 8,
    color: '#333',
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    backgroundColor: 'white',
  },
  picker: {
    height: 50,
  },
  dateButton: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    backgroundColor: 'white',
  },
  dateButtonText: {
    fontSize: 16,
    color: '#333',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default PickerExample;

Try It Yourself — User Input & Forms

Try It Yourself — User Input & FormsHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 3</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Picker & DatePicker

Picker Component

DatePicker Component

Picker & DatePicker Example

Try It Yourself — User Input & Forms

Quick Quiz — User Input & Forms

Topics in This Module

Picker & DatePicker

Picker Component

DatePicker Component

Picker & DatePicker Example

Try It Yourself — User Input & Forms

Quick Quiz — User Input & Forms

Topics in This Module