Adding Placeholder Kind of Functionality into React-Native Picker

Question

I have set up a reusable drop-menu component in my React-native app that uses the native picker. The less than ideal situation I'm running into is that since there is no placeholder property available on picker, if I add 'Select Type' to the list of menu items, that will show up as an option in the menu that opens up. That's obviously not ideal. How can I work a placeholder kind of functionality into this, so that 'Select Type' is initially displayed without showing up in the menu that pops up when the user presses to open the menu?

{
  !this.state.otherTypeSelected ? 
  (
    <View style={styles.forms.fieldContainer}>
      <Text style={styles.forms.fieldLabel}>Type</Text>
      <DropDownMenu 
        style={styles.forms.pickerContainer}
        itemStyle={styles.forms.pickerItem}
        items={[
          { label: 'A', value: 'A' },
          { label: 'B', value: 'B' },
          { label: 'C', value: 'C' },
          { label: 'D', value: 'D'  },
          { label: 'Other', value: 'Other' }
        ]}
        onSelectMenuValue={this.handleContactTypeSelection}
       />
     </View>
   ) : null
}

And the DropDownMenu code looks like this:

export const DropDownMenu = (props) => {
  const [selectedValue, setSelectedValue] = useState(null);
  return (
    <View style={componentStyles.container}>
      <Picker
        {...props}
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) => {
          props.onSelectMenuValue(itemValue), 
          setSelectedValue(itemValue)
        }}
      >
        {props.items.map(item => <Picker.Item label={item.label} value={item.value} />)}
      </Picker>
    </View>
  );
}

Note, while I could make my first menu item an empty string, with something like { label: '', value: 0 }, the space representing that value will still show up in my drop-menu, which is also not what I'm looking for.

Answer 1

The Picker in react-native has been deprecated. There are only two methods in order to use the Picker

1. Use any library for Picker.
2. Create your own Picker (where you will have all the controls with you.)

You can create a simple functional component such as:

Note: This was created in 5 mins, so don't expect this to be pretty :P But it is working

import React, { useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

// Dropdown Item component
const DropDownItem = (props) => {
  return <TouchableOpacity onPress={() => {
    props.onPress(props.label)
    props.hideDropdown(false)
    }}>
    <Text>{props.label}</Text>
  </TouchableOpacity>
}

// Custom Picker Component
const CustomPicker = () => {
  const [showValue, toggleView] = useState(false)
  const [selectedVal, changeValue] = useState('')

  return <>
  {selectedVal && <TouchableOpacity onPress={() => changeValue('')}>
      <Text>Clear Value</Text>
    </TouchableOpacity>}
  <View style={styles.pickerView}>
    <TouchableOpacity style={styles.placeholderView} onPress={() => toggleView(!showValue)}>
      <Text style>{selectedVal || "Select a value..."}</Text>
    </TouchableOpacity>

    {showValue && <View style={styles.dropDownView}>
    <DropDownItem label="Value 1" hideDropdown={toggleView} onPress={val => changeValue(val)} />
    <DropDownItem label="Value 2" hideDropdown={toggleView} onPress={val => changeValue(val)} />
    <DropDownItem label="Value 3" hideDropdown={toggleView} onPress={val => changeValue(val)} />
    </View>}
  </View>
  </>
}

const App = () => {
  return (
    <View style={styles.container}>
      <CustomPicker />    
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  },
  pickerView: {
    width: 160,
    height: 30,
    padding: 3,
  },
  placeholderView: {
    flex: 1,
    backgroundColor: '#e0e0e0',
    padding: 3
  },
  dropDownView: {
    position: 'absolute',
    top: 32
  }
});

export default App;

Link: https://snack.expo.io/MBb60jEQw

Happy Coding !!!