2

In my react-native project, I would like to implement a feature that tapping on an icon pops up a native picker component in iOS and Android respectively. Something like this library's effect:

enter image description here

But with the linked library, it always default to have a text input field clicking on which the picker native component pops out. But in my project I don't need that default text input field, I have an icon component (think it as whatever react-native custom component), I would like to have the same effect when clicking/tapping on the icon component.

Is it possible to achieve it with the library I linked? I noticed there is icon property in the library, but it is not clear how to use it and whether it is the property that could replace the text input field. Anyone could you please help me?

This is what I tried with the library, but it doesn't show MyIconComponent instead it still shows a input text field:

return (
    <RNPickerSelect
      onValueChange={value => console.log(value)}
      icon={() => {
        return (
          <View style={styles.main}>
            <MyIconComponent />
          </View>
        );
      }}
      items={[
        {label: 'Football', value: 'football'},
        {label: 'Baseball', value: 'baseball'},
        {label: 'Hockey', value: 'hockey'},
      ]}
    />
  );

If I can't achieve what I want with this library then how to implement the same effect when tapping on my icon component?

Leem.fin
  • 40,781
  • 83
  • 202
  • 354

1 Answers1

0

According to the library documentation, in order to remove the default field add "placeholder={}" to the component props.

That is what you are looking for? did I get you right?

D10S
  • 1,468
  • 2
  • 7
  • 13
  • I tried, but get error `attributes must only be assigned a non-empty expression` . Also tried `placeholder={''}`, the default input field appears still. – Leem.fin Aug 18 '20 at 14:48
  • What I want is to replace that default input field to my icon component so that tapping on my icon component pops up the picker window for selection. – Leem.fin Aug 18 '20 at 15:22
  • try `placeholder={{}}` – D10S Aug 18 '20 at 16:14
  • Tried, but how to show my icon component? Also, on android `placeholder={{}}` still shows the input field. – Leem.fin Aug 18 '20 at 16:37