Picker doesn't work on iOS

[brunocascio]

react-native, react and native-base version

    "react-native": "^0.41.2",
    "native-base": "^2.0.12",
    "react": "15.4.2",

Expected behavior

Picker Items will be displayed properly on iOS.

Actual behaviour

Picker Items are displayed properly on Android but not on iOS.

Steps to reproduce

// deps
import React, { Component } from 'react';
import { Platform, Dimensions } from 'react-native';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import reactMixin from 'react-mixin';
// theme
import * as theme from 'fbtmobile/theme';
// spinner
import Spinner from '@containers/spinner';
// datepicker
import DatePicker from 'react-native-datepicker';
// momentjs
import moment from 'moment';
// native base
import {
  Container,
  Content,
  Form,
  Label,
  Input,
  Picker,
  Item,
  View,
  Button,
  Text,
  connectStyle
} from 'native-base';

@reactMixin.decorate(PureRenderMixin)
class NewTransfer extends Component {

  // TODO: PropTypes

  componentDidMount() {
    this.props.onLoad();
  }

  render() {
    const styles = this.props.style;
    const {
      onChangeFrom,
      onChangeTo,
      onChangeDeliveryBy,
      accounts,
      newTransfer
    } = this.props;
    const { form } = newTransfer;

    return (
      <Container style={styles.container}>
        <Content>
          <Form>
            <Item stackedLabel last>
              <Label>From</Label>
              <Picker
                style={styles.picker}
                iosHeader="Select one"
                mode="dropdown"
                selectedValue={form.from}
                onValueChange={onChangeFrom}>
                {this._renderAccounts(accounts)}
              </Picker>
            </Item>
            <Item stackedLabel last>
              <Label>To</Label>
              <Picker
                style={styles.picker}
                iosHeader="Select one"
                mode="dropdown"
                selectedValue={form.to}
                onValueChange={onChangeTo}>
                {this._renderAccounts(accounts)}
              </Picker>
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }

  _renderAccounts(accounts: Object) {
    return accounts.map((account, i) => {
      return (
        <Picker.Item
          key={i}
          label={account.accountTypeDescription}
          value={account.id}
        />
      );
    })
  }
}

const styles = {
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: theme.VERTICAL_MARGIN_WITH_NAVBAR
  },
  datepicker: {

  },
  dateInput: {
    marginLeft: 0,
    paddingLeft: 30,
    alignItems: 'flex-start',
    borderWidth: 0
  },
  picker: {
    width: Dimensions.get('window').width - 50,
    marginLeft: (Platform.os == 'android') ? 25 : 0,
    marginRight: (Platform.os == 'android') ? 25 : 0,
  },
  submit: {
    marginTop: 30
  }
}

export default connectStyle('th.NewTransfer', styles)(NewTransfer);

Is the bug present in both ios and android or in any one of them?

iOS only

Any other additional info which would help us debug the issue quicker.

I'm using redux (latest version)

Works fine with hardcoded picker Items.

[sankhadeeproy007]

Hi, I tried with dynamic data and the picker seems to render the list pretty well. Am I missing anything here?

[brunocascio]

@sankhadeeproy007 thanks for the quick response.

I tried again with some changes on the router react-native-router-flux and works fine. Might be a problem with the router library.

Thanks!

[philkry]

@brunocascio do you still remember what you changed to make it work? I'm facing the exact same problem..

[philkry]

I figured it out on my own. In case anybody comes across this, it was a rather stupid race-condition. I was loading my data dynamically via an API and the state was not updated by the time the render method ran.

After changing this, the Picker rendered just fine.

[brunocascio]

@philkry Sorry for the delay,

Yes, I faced the same problem as you commented. However, when the state change, the render method is called again automatically, then the picker should be rendered with the new data... Now it's working, but I'll reopen this issue if the problem persists in another scenario.