Nativebase: Picker - programatically setting value

Created on 8 Sep 2016 · 6Comments · Source: GeekyAnts/NativeBase

Hello,

Nice library, love using it!
So we have a use case where we have 2 pickers depending on each other where the 1st one holds the values such as car brands (Toyota, VW, BMW etc) while the second one is displaying the models such as (Aygo, Passat, X3).

When the first picker is clicked and the value has been chosen we need to programatically set the value of the second picker as:

Choose VW from the first picker
Find the first VW car model value and apply it to the second picker

This doesn't work as the current value is held in state at https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/Picker.ios.js#L97

And it's not synced with the values being set programatically.

What would be required is to implement componentWillReceiveProps and use getSelected with nextProps while setting the current to a new value if it has been changed.

We are really short on time to deliver the product so I may fork native-base just to keep us operational on this. Meanwhile I think I can provide a PR if what I have stated above seems logical to you?

Thank you in advance,
Goran

Source

gor181

Most helpful comment

@sankhadeeproy007

The example would be rather simple:

import React, { Component } from 'react';
import { Container, Content, Picker } from 'native-base';

const Item = Picker.Item;
export default class PickerExample extends Component {

  constructor(props) {
      super(props);
      this.state = {
          selectedItem: undefined,
          selected1: 'key1',
          results: {
              items: []
          }
      }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        selected1: 'key2'
      });
    }, 5000);
  }

  onValueChange (value: string) {
      this.setState({
          selected1 : value
      });
  }

  render() {
      return (
          <Container>
              <Content>
                  <Picker
                      iosHeader="Select one"
                      mode="dropdown"
                      selectedValue={this.state.selected1}
                      onValueChange={this.onValueChange.bind(this)}>
                      <Item label="Cats" value="key0" />
                      <Item label="Dogs" value="key1" />
                      <Item label="Birds" value="key2" />
                      <Item label="Elephants" value="key3" />
                 </Picker>
              </Content>
          </Container>
      );
  }
}

I took the existing picker example.
It just sets a new state after 5 seconds.

gor181 on 8 Sep 2016

👍4

All 6 comments

Hey, please go ahead with the PR and a working demo if possible. We'd love to have that functionality.

sankhadeeproy007 on 8 Sep 2016

@gor181 lets make our fork public and make a PR.

Mentioum on 8 Sep 2016

👍2

Sure @Mentioum on it

gor181 on 8 Sep 2016

👍1

@sankhadeeproy007

The example would be rather simple:

import React, { Component } from 'react';
import { Container, Content, Picker } from 'native-base';

const Item = Picker.Item;
export default class PickerExample extends Component {

  constructor(props) {
      super(props);
      this.state = {
          selectedItem: undefined,
          selected1: 'key1',
          results: {
              items: []
          }
      }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        selected1: 'key2'
      });
    }, 5000);
  }

  onValueChange (value: string) {
      this.setState({
          selected1 : value
      });
  }

  render() {
      return (
          <Container>
              <Content>
                  <Picker
                      iosHeader="Select one"
                      mode="dropdown"
                      selectedValue={this.state.selected1}
                      onValueChange={this.onValueChange.bind(this)}>
                      <Item label="Cats" value="key0" />
                      <Item label="Dogs" value="key1" />
                      <Item label="Birds" value="key2" />
                      <Item label="Elephants" value="key3" />
                 </Picker>
              </Content>
          </Container>
      );
  }
}

I took the existing picker example.
It just sets a new state after 5 seconds.

gor181 on 8 Sep 2016

👍4

Lovely, I'll go through it. The example looks fairly straightforward though. Thanks!

sankhadeeproy007 on 8 Sep 2016

Thanks @gor181 . #170 Merged.

sankhadeeproy007 on 12 Sep 2016

🎉1

Was this page helpful?

0 / 5 - 0 ratings