Adding a Picker in React Native

When building forms in React Native, dropdowns are often needed to let users choose between a set of options. The @react-native-picker/picker package is a widely used solution that integrates smoothly with React Native apps.

In this blog, we’ll cover two approaches:

1. A simple picker.
2. A picker that dynamically shows additional fields based on the selected value.

Step 1 – Install the Picker Package

Run the following command in your project terminal:

npm install @react-native-picker/picker

Step 2 – Simple Picker Example

Here’s a basic picker that allows users to answer “Do you own any car?” with “Yes” or “No”.

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

const PickerExample = () => {
const [ownAnyCar, setOwnAnyCar] = useState(‘No’);const handleOwnAnyCarChange = (itemValue: string) => {
setOwnAnyCar(itemValue);
};

return (
<>
      <Text style={{ marginLeft: 3 }}>Do You Own Any Car</Text>
      <View style={styles.pickerContainer}>
        <Picker
          style={styles.picker}
          selectedValue={ownAnyCar}
          onValueChange={handleOwnAnyCarChange}
        >
          <Picker.Item label="No" value="No" />
          <Picker.Item label="Yes" value="Yes" />
        </Picker>
      </View>
    </>
);
};const styles = StyleSheet.create({
pickerContainer: {
backgroundColor: 'white',
height: 40,
borderColor: 'lightgrey',
borderWidth: 1,
marginBottom: 10,
width: '100%',
borderRadius: 10,
marginTop: 2,
},
picker: {
marginTop: -6,
width: '100%',
fontSize: 15,
},
});
export default PickerExample;

👉 This will render a dropdown where the user can select Yes or No.

Step 3 – Picker with Conditional Fields

Now let’s make the picker smarter. If the user selects “Yes”, additional input fields will appear asking for the quantity of cars and their details.

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

const PickerExtra = () => {
  const [ownAnyCar, setOwnAnyCar] = useState('No');
  const [showCarFields, setShowCarFields] = useState(false);
  const [quantityOfCars, setQuantityOfCars] = useState('');
  const [carDetails, setCarDetails] = useState('');

  const handleOwnAnyCarChange = (itemValue: string) => {
    setOwnAnyCar(itemValue);
    setShowCarFields(itemValue === 'Yes');
  };

  return (
    <>
      <Text style={{ marginLeft: 3 }}>Do You Own Any Car</Text>
      <View style={styles.pickerContainer}>
        <Picker
          style={styles.picker}
          selectedValue={ownAnyCar}
          onValueChange={handleOwnAnyCarChange}
        >
          <Picker.Item label="No" value="No" />
          <Picker.Item label="Yes" value="Yes" />
        </Picker>
      </View>

      {showCarFields && (
        <>
          <TextInput
            style={styles.input}
            onChangeText={setQuantityOfCars}
            value={quantityOfCars}
            placeholder="Quantity Of Cars"
            placeholderTextColor={'darkgrey'}
          />

          <TextInput
            style={styles.input}
            onChangeText={setCarDetails}
            value={carDetails}
            placeholder="Each Car Details"
            placeholderTextColor={'darkgrey'}
          />
        </>
      )}
    </>
  );
};

const styles = StyleSheet.create({ 
  pickerContainer: {
    backgroundColor: 'white',
    height: 40,
    borderColor: 'lightgrey',
    borderWidth: 1,
    marginBottom: 10,
    width: '100%',
    borderRadius: 10,
    marginTop: 2,
  },
  picker: {
    marginTop: -6,
    width: '100%',
    fontSize: 15,
  },  
  input: {
    height: 40,
    borderColor: 'lightgrey',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    width: '100%',
    borderRadius: 10,
    marginTop: 2,
    backgroundColor: 'white'
  },
});

export default PickerExtra;

👉 Here’s what happens:

• When the user selects No, only the dropdown is visible.
• When the user selects Yes, two additional text inputs appear.

---

Conclusion

The @react-native-picker/picker package makes it easy to implement dropdowns in React Native.

• Start with a simple picker for straightforward options.
• Enhance the experience by conditionally rendering fields when certain options are chosen.

This approach is extremely useful in forms, especially when you need to gather dependent information from users.

Tripti