React native picker not showing on android - react-native

Question

I'm trying to use the Picker component and it shows perfectly fine in iOS but nothing in Android. I've checked the comments on react native picker is not showing in android however setting the {width: 100} and {flex: 1} doesn't seem to solve the problem.
Update: The Picker is there, works when I tap on the area it's on, just not visible.
I'm using Expo to run the test builds on my iphone and android. No problem on iphone. Just android... Galaxy S8 v7.0 Nougat
Here's my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Picker,
} from 'react-native';
export default class Home extends React.Component {
constructor(props){
super(props);
this.state = {
selectedValue: 'Orange'
}
}
render() {
return (
<View style={styles.container}>
<Picker
style={styles.picker}
selectedValue={this.state.selectedValue}
onValueChange={(value) => {this.setState({selectedValue: value})}}
itemStyle={styles.pickerItem}
>
<Picker.Item label="Apple" value="Apple" />
<Picker.Item label="Orange" value="Orange" />
<Picker.Item label="Banana" value="Banana" />
<Picker.Item label="Kiwi" value="Kiwi" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
justifyContent: 'center',
},
picker: {
flex: 1,
},
pickerItem: {
color: '#333333'
},
});

Answer 1

Try To add height and width for Picker. Try Following
<Picker
style={{height:30, width:100}}
selectedValue={this.state.selectedValue}
onValueChange={(value) => {this.setState({selectedValue: value})}}
itemStyle={styles.pickerItem}>
<Picker.Item label="Apple" value="Apple" />
<Picker.Item label="Orange" value="Orange" />
<Picker.Item label="Banana" value="Banana" />
<Picker.Item label="Kiwi" value="Kiwi" />
</Picker>

Answer 2

Found the problem, I exported the module and imported it in my main app.js file and in there I wrapped the module in a container with alignItems: 'center'. Apparently this causes the picker to not show. See this https://github.com/facebook/react-native/issues/6110

Answer 3

I had the same problem and the cause was that I had set alignItems: 'center' to the parent view. This is what I wanted though so I didn't remove it. Instead I solved it by giving the picker a width of 100%.
<View style={{alignItems: "center"}}>
<Picker style={{width:"100%"}} mode="dropdown">
<Picker.Item />
</Picker>
</View>