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
[Picker][0.20.0+][iOS] disappears when parent View has alignItems: center or flexDirection: row #6110
Comments
Had the same issue with React-Native 0.21.0 running on Android emulator with SDK 23.0.2. |
+1 |
3 similar comments
+1 |
+1 |
+1 |
+1 Thank you for finding the cause of this |
Hey guys, I created a post on Product Pains for this issue, you can upvote it here: https://productpains.com/post/react-native/picker-disappears-when-parent-views-have-alignitems-center |
I think the problem is similar to this issue #7226 (comment) - maybe it's something to do with how native components react to that property? |
I also found out that if the (or any) parent view has <View style={{
flexDirection: 'row',
}}>
<View style={{
flex: 1,
}}>
<Picker>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
<View style={{
flex: 1,
}}>
<Picker>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
</View> |
Actually, as a result of the above tinkering, I also found a workaround for the original issue: const AlivePicker = () => (
<View style={{
flex: 1, // This flex is optional, but probably desired
alignItems: 'center',
flexDirection: 'row',
}}>
<View style={{
flex: 1,
}}>
<Picker>
{['item1', 'item2', 'item3'].map((item) => (
<Picker.Item key={item} label={item} value={item} />
))}
</Picker>
</View>
</View>
); Use |
Hi there! This issue is being closed because it has been inactive for a while. But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/picker0200ios-disappears-when-parent-view-has-alignitems-center-or-flexdirection-row Product Pains has been very useful in highlighting the top bugs and feature requests: Also, if this issue is a bug, please consider sending a pull request with a fix. |
There's already a product pains post: https://productpains.com/post/react-native/picker-disappears-when-parent-views-have-alignitems-center |
I have this issue with android. Running <View style={{flexDirection: 'row'}}>
<Text>1a</Text>
<View style={{flex: 1}}>
<Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
<Picker.Item key={option.key} label={option.label} value={option.key} /> )}
</Picker>
</View>
<Text>1b</Text>
<Picker style={{flex: 1}} iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
<Picker.Item key={option.key} label={option.label} value={option.key} /> )}
</Picker>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
<Text>1c</Text>
<View>
<Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
<Picker.Item key={option.key} label={option.label} value={option.key} /> )}
</Picker>
</View>
<Text>1d</Text>
<Picker iosHeader="Select one" mode="dropdown" selectedValue={this.state.personal.gender} onValueChange={(value)=> this._updatePersonalState({gender: value})}> {this._getGenderOptions().map((option) =>
<Picker.Item key={option.key} label={option.label} value={option.key} /> )}
</Picker>
</View> Any updates on this? |
Still a problem. |
Giving the picker or a child view a flex: 1 didn't work for me. The solution was to give the picker a width.
|
+1 - "react-native": "^0.47.0" Kinda have it working now but boy is it hacky! |
RN 0.20.0.
Mac.
iOS 9.2 iPod model MGG82LL/A.
This also happens when any grandparent View has
alignItems: center
.The text was updated successfully, but these errors were encountered: