[PickerIOS] Indicator line missing

[louietan]

Description

Hi, you all!

When I'm trying to make a custom component by combining several PickerIOS components, I found a strange behavior on PickerIOS that the indicator lines sometimes are disappeared. Just like this:

Reproduction Steps and Sample Code

Here is my code. It can't be reproduced using Snack, so I created a repo https://github.com/louietan/PickerIOSIssue, my code is in file index.ios.js

Pushing that "toggle pickers" again and again, you will find that the indicators of the last one or two pickers sometimes displayed but sometimes disappeared.

import React, { Component } from 'react';
import {
  AppRegistry,
  Button,
  PickerIOS,
  View
} from 'react-native';

export default class PickerIOSIssue extends Component {
  constructor(props) {
    super(props)
    
    this.state = { showPickers: true }
  }
    
  times(repeat, cb) {
    let result = []
    for(let i = 0; i < repeat; ++i) result.push(i)
    return result.map(cb)
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column', marginTop: 50}}>
	
        <Button title='toggle pickers' onPress={() => this.setState({showPickers: !this.state.showPickers})} />

        {this.state.showPickers &&
        <View style={{ flexDirection: 'row'}}>
          { this.times(3, index => (
            <PickerIOS key={index}
                       style={{flex: 1}}>
                {this.times(100, index => (
                  <PickerIOS.Item key={index} value={index} label={index.toString()} />
                ))}
            </PickerIOS>
          ))}
        </View>}

      </View>
    );
  }
}

AppRegistry.registerComponent('PickerIOSIssue', () => PickerIOSIssue);

Additional Information

• React Native version: 0.45.1
• Platform: iOS 10.2 (virtual device, but also exists in a real device, I'll provide the version later)
• Development Operating System: macOS

[pvinis]

try with this #13342

[louietan]

Thank you @pvinis ! it worked for me.

[louietan]

@pvinis , could you explain the rationale behind this?

[pvinis]

well, to be honest, https://stackoverflow.com/questions/39564660/uipickerview-selection-indicator-not-visible-in-ios10.

i know its not the best, but it works, until apple or we figure out what the real problem is.

[ignatevdev]

Experiencing the same issue over here.
Indicator lines disappear and reappear randomly in Simulator and on my iphone as well

[pvinis]

did you try my fix/fork/branch/pr?

[ignatevdev]

@pvinis Tried to apply those changes locally and it fixed the problem. But one can't rely on local changes of modules, since they will be overwritten on any clean install and your PR was closed :(

Hope dev team will merge the fix somehow

[pvinis]

i know, and thats why i ask, so maybe it can be merged finally :D

[pvinis]

actually, i tried rntester on master now, and it seems to be fixed.

[ignatevdev]

Well, I tried a clean install yesterday with 0.46.4, it didn't help. Event 0.47-rc-4 didn't help either, but I will try once again

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.