React-native: How to trigger a Picker programmatically? cannot find it documented anywhere

[weixingsun]

Sorry for asking the usage of Picker, I had done some search on docs/codes, but cannot get any useful answer.

is there a method like pickerRef.show() / pickerRef.hide() available ?

thanks

[janicduplessis]

There are no methods to do that.

One way to have the API you want would be to make a wrapper component for Picker. Just doing this on top of my head but something like this should work:

const MyPicker = React.createClass({
  getInitialState() {
    return { displayed: true };
  },
  show() {
    this.setState({ displayed: true });
  },
  hide() {
    this.setState({ displayed: false });
  },
  render() {
    if (this.state.displayed) {
      return <Picker {...this.props}>{this.props.children}</Picker>;
    } else {
      return null;
    }
  },
});

Maybe we could improve the API to make it easier to show / hide the picker.

[weixingsun]

@janicduplessis thanks for your response.
I was meaning that if there is an prop to make the picker showing/hiding its items, not the picker itself.
Just like we pressing on it to trigger the action.
But thank you anyway!

[charpeni]

@facebook-github-bot answered

[ghost]

Closing this issue as @charpeni says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[weixingsun]

Hey, what's happening, bot ? This is still not resolved, yet ...
I am saying thanks to @janicduplessis, not for the answer.
@charpeni @facebook-github-bot-1 can I re-open it ?

[janicduplessis]

Sure, can you give me another example of exactly what you'd like to be able to do, I'm not 100% sure I understand

[charpeni]

@weixingsun I'm sorry about that!

[weixingsun]

thanks for your patient, @janicduplessis
this is really a special case, I thought it was a very simple trick but not.
the scenario:

1. I'm rendering a picker and an icon,(for some reason, I think the picker is not very customizable)
2. user can open the item list by clicking the icon(not pressing on the picker itself),
   that's my question, so I need a prop to show/hide the item list, not the picker.

[sreejithr]

@weixingsun If I understand your query correctly, either you can:

1. Let the button toggle a state and use it to toggle the enabled prop (doc).
2. Let the button toggle a state and conditionally render the items.

In render,

var items = null;
if (this.state.showOptions) {
 items = (
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
  );
}

<Picker selectedValue={this.state.language} onValueChange={(lang) => this.setState({language: lang})}>
  { items }
</Picker>

[efkan]

@weixingsun ,

I guess you should use modal to show/hide your list. Each of the list items should behaves like a button. When the user press to an item, set your component state and close the modal.

Picker doesn't have any show/hide method yet. Hope it'll be there in the future.

I hope it works..

ps: I've created some records on ProductPains regarding Picker module. Please increase the request by using ^ up button from the top-left.

[weixingsun]

@sreejithr both enabled prop and state approach are not what I am going to do, but thank you.
@efkan thank you so much for your answer, I got it fixed by using modal workaround.
After looking at the code repository in PickerAndroid & PickerIOS:
it looks quite complex to change code of AndroidDropdownPicker/AndroidDialogPicker for android, and RCTPicker for ios,,,,

[wolframkriesing]

I understand the problem very well. And have the same one. The modal is actually just a work around, since the actual problem is that the picker is not stylable on android. So we make it transparent and try to position it on top of the rendered clickable-icon, because we want the native picker choices for the user. And the picker just works fine, we just can't style it, so we hack around it.

[wolframkriesing]

We found a workaround. I guess this is a side effect, the borderWidth: 0 on the surrounding layer makes the Picker get clipped at the edges of the View box. Therefore we can make the Picker as huge as we want :). #worksForMe

<View style={{ borderWidth: 0 }}>
  <Button />
  <Picker style={{ position: absolute, top: 0, width: 1000, height: 1000 }}></Picker>
</View>

[vonovak]

I have eventually opted for using https://github.com/aakashns/react-native-dialogs

[vexsnare]

@wolframkriesing Thank you. It did work for me the way I wanted.

[landonmr]

@wolframkriesing thank you! what a hack but man it works like a charm!

[Ehesp]

Common component of @wolframkriesing solution above:

import React from 'react';
import { View, Picker as RNPicker } from 'react-native';
import PropTypes from 'prop-types';

function Picker({ renderPicker, ...other }) {
  return (
    <View>
      {renderPicker()}
      <RNPicker
        style={{ position: 'absolute', top: 0, width: 1000, height: 1000 }}
        {...other}
      />
    </View>
  );
}

Picker.propTypes = {
  renderPicker: PropTypes.func.isRequired,
};

Picker.Item = RNPicker.Item;

export default Picker;

Usage:

<Picker
  renderPicker={() => (
    <Text style={{ color: '#fff', textAlign: 'center' }}>
      Current Value: {this.state.pickerValue}
    </Text>
   )}
   selectedValue={this.state.pickerValue}
   onValueChange={(pickerValue) => this.setState({ pickerValue )}
>
  {this.state.someArray.map(item => (
    <Picker.Item
      key={item.key}
      label={item.key}
      value={item.value}
     />
  ))}
</Picker>

[landonmr]

doesn't seem to work so well on iOS, picker is always open

[santhosh77h]

@wolframkriesing awesome solution works great

[selvagsz]

Doesn't seem to work on IOS