{"id":125,"date":"2025-09-26T14:56:22","date_gmt":"2025-09-26T14:56:22","guid":{"rendered":"https:\/\/blog.vyomscode.com\/?p=125"},"modified":"2025-09-26T14:56:22","modified_gmt":"2025-09-26T14:56:22","slug":"adding-a-picker-in-react-native","status":"publish","type":"post","link":"https:\/\/blog.vyomscode.com\/index.php\/2025\/09\/26\/adding-a-picker-in-react-native\/","title":{"rendered":"Adding a Picker in React Native"},"content":{"rendered":"\n

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

In this blog, we\u2019ll cover two approaches:<\/p>\n\n\n\n

    \n
  1. A simple picker.<\/li>\n\n\n\n
  2. A picker that dynamically shows additional fields based on the selected value.<\/li>\n<\/ol>\n\n\n\n

    Step 1 \u2013 Install the Picker Package<\/h4>\n\n\n\n

    Run the following command in your project terminal:<\/p>\n\n\n\n

    npm install @react-native-picker\/picker<\/em><\/strong><\/p>\n\n\n\n

    Step 2 \u2013 Simple Picker Example<\/h4>\n\n\n\n

    Here\u2019s a basic picker that allows users to answer \u201cDo you own any car?\u201d<\/strong> with \u201cYes\u201d or \u201cNo\u201d.<\/p>\n\n\n\n

    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);
    };<\/em><\/strong><\/p>\n\n\n\n

    return (\n<>\n      <Text style={{ marginLeft: 3 }}>Do You Own Any Car<\/Text>\n      <View style={styles.pickerContainer}>\n        <Picker\n          style={styles.picker}\n          selectedValue={ownAnyCar}\n          onValueChange={handleOwnAnyCarChange}\n        >\n          <Picker.Item label=\"No\" value=\"No\" \/>\n          <Picker.Item label=\"Yes\" value=\"Yes\" \/>\n        <\/Picker>\n      <\/View>\n    <\/>\n);\n};const styles = StyleSheet.create({\npickerContainer: {\nbackgroundColor: 'white',\nheight: 40,\nborderColor: 'lightgrey',\nborderWidth: 1,\nmarginBottom: 10,\nwidth: '100%',\nborderRadius: 10,\nmarginTop: 2,\n},\npicker: {\nmarginTop: -6,\nwidth: '100%',\nfontSize: 15,\n},\n});\nexport default PickerExample;<\/em><\/strong><\/code><\/pre>\n\n\n\n
    \ud83d\udc49 This will render a dropdown where the user can select Yes<\/strong> or No<\/strong>.<\/p>\n\n\n\n
    Step 3 \u2013 Picker with Conditional Fields<\/h4>\n\n\n\n
    Now let\u2019s make the picker smarter. If the user selects \u201cYes\u201d<\/strong>, additional input fields will appear asking for the quantity of cars<\/strong> and their details<\/strong>.<\/p>\n\n\n\n
    import { useState } from 'react';\r\nimport { StyleSheet, Text, TextInput, View } from 'react-native';\r\nimport { Picker } from '@react-native-picker\/picker';\r\n\r\nconst PickerExtra = () => {\r\n  const [ownAnyCar, setOwnAnyCar] = useState('No');\r\n  const [showCarFields, setShowCarFields] = useState(false);\r\n  const [quantityOfCars, setQuantityOfCars] = useState('');\r\n  const [carDetails, setCarDetails] = useState('');\r\n\r\n  const handleOwnAnyCarChange = (itemValue: string) => {\r\n    setOwnAnyCar(itemValue);\r\n    setShowCarFields(itemValue === 'Yes');\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Text style={{ marginLeft: 3 }}>Do You Own Any Car<\/Text>\r\n      <View style={styles.pickerContainer}>\r\n        <Picker\r\n          style={styles.picker}\r\n          selectedValue={ownAnyCar}\r\n          onValueChange={handleOwnAnyCarChange}\r\n        >\r\n          <Picker.Item label=\"No\" value=\"No\" \/>\r\n          <Picker.Item label=\"Yes\" value=\"Yes\" \/>\r\n        <\/Picker>\r\n      <\/View>\r\n\r\n      {showCarFields && (\r\n        <>\r\n          <TextInput\r\n            style={styles.input}\r\n            onChangeText={setQuantityOfCars}\r\n            value={quantityOfCars}\r\n            placeholder=\"Quantity Of Cars\"\r\n            placeholderTextColor={'darkgrey'}\r\n          \/>\r\n\r\n          <TextInput\r\n            style={styles.input}\r\n            onChangeText={setCarDetails}\r\n            value={carDetails}\r\n            placeholder=\"Each Car Details\"\r\n            placeholderTextColor={'darkgrey'}\r\n          \/>\r\n        <\/>\r\n      )}\r\n    <\/>\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({ \r\n  pickerContainer: {\r\n    backgroundColor: 'white',\r\n    height: 40,\r\n    borderColor: 'lightgrey',\r\n    borderWidth: 1,\r\n    marginBottom: 10,\r\n    width: '100%',\r\n    borderRadius: 10,\r\n    marginTop: 2,\r\n  },\r\n  picker: {\r\n    marginTop: -6,\r\n    width: '100%',\r\n    fontSize: 15,\r\n  },  \r\n  input: {\r\n    height: 40,\r\n    borderColor: 'lightgrey',\r\n    borderWidth: 1,\r\n    marginBottom: 10,\r\n    paddingHorizontal: 10,\r\n    width: '100%',\r\n    borderRadius: 10,\r\n    marginTop: 2,\r\n    backgroundColor: 'white'\r\n  },\r\n});\r\n\r\nexport default PickerExtra;\r\n<\/em><\/strong><\/code><\/pre>\n\n\n\n
    \ud83d\udc49 Here\u2019s what happens:<\/p>\n\n\n\n