CODEWITHSUNDEEP
react-native
Chuck K
Chuck K

Reputation: 123

React native picker not showing on android

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'
    },
});

Upvotes: 2

Views: 9107

Answers (3)

Rawa
Rawa

Reputation: 411

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>

Upvotes: 5

Chuck K
Chuck K

Reputation: 123

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

Upvotes: 5

Santosh Sharma
Santosh Sharma

Reputation: 2248

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>

Upvotes: 11

Related Questions