Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to trigger a Picker programmatically? cannot find it documented anywhere #7817

Closed
weixingsun opened this issue May 28, 2016 · 20 comments
Closed
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@weixingsun
Copy link

weixingsun commented May 28, 2016

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
Copy link
Collaborator

janicduplessis commented May 29, 2016

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
Copy link
Author

weixingsun commented May 29, 2016

@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
Copy link
Contributor

charpeni commented May 29, 2016

@facebook-github-bot answered

@ghost
Copy link

ghost commented May 29, 2016

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.

@ghost ghost closed this as completed May 29, 2016
@weixingsun
Copy link
Author

weixingsun commented May 29, 2016

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
Copy link
Collaborator

janicduplessis commented May 29, 2016

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
Copy link
Contributor

charpeni commented May 30, 2016

@weixingsun I'm sorry about that!

@weixingsun
Copy link
Author

weixingsun commented May 30, 2016

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
Copy link
Contributor

sreejithr commented May 30, 2016

@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
Copy link

efkan commented May 31, 2016

@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
Copy link
Author

weixingsun commented Jun 2, 2016

@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
Copy link

wolframkriesing commented Dec 5, 2016

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
Copy link

wolframkriesing commented Dec 5, 2016

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
Copy link
Contributor

vonovak commented Jan 20, 2017

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

@vexsnare
Copy link

vexsnare commented Feb 17, 2017

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

@landonmr
Copy link

landonmr commented Jul 25, 2017

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

@Ehesp
Copy link
Contributor

Ehesp commented Aug 4, 2017

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
Copy link

landonmr commented Aug 10, 2017

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

dgdavid added a commit to dgdavid/dose-calculator that referenced this issue Jan 15, 2018
In previous commit was forgotten to add a property in a wrapper in order
to get Picker clipped to its edges.

This commit add the property used in the source of "trick", but it could
tested that `backgroundColor: 'transparent'` also works.

See original idea at facebook/react-native#7817 (comment)
dgdavid added a commit to dgdavid/dose-calculator that referenced this issue Jan 19, 2018
In previous commit was forgotten to add a property in a wrapper in order
to get Picker clipped to its edges.

This commit add the property used in the source of "trick", but it could
tested that `backgroundColor: 'transparent'` also works.

See original idea at facebook/react-native#7817 (comment)
dgdavid added a commit to dgdavid/dose-calculator that referenced this issue Jan 19, 2018
In previous commit was forgotten to add a property in a wrapper in order
to get Picker clipped to its edges.

This commit add the property used in the source of "trick", but it could
tested that `backgroundColor: 'transparent'` also works.

See original idea at facebook/react-native#7817 (comment)
dgdavid added a commit to dgdavid/dose-calculator that referenced this issue Jan 20, 2018
In previous commit was forgotten to add a property in a wrapper in order
to get Picker clipped to its edges.

This commit add the property used in the source of "trick", but
`backgroundColor: 'transparent'` also make it works.

See original idea at facebook/react-native#7817 (comment)
@santhosh77h
Copy link

santhosh77h commented Apr 30, 2018

@wolframkriesing awesome solution works great

@selvagsz
Copy link

selvagsz commented May 20, 2018

Doesn't seem to work on IOS

@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests