react-native-picker-select not Working with Parent View {flexDirection:'row'}

Question

I want to use <RNPickerSelect./> with a <TextInput/> in a single row. So, when I make the Parent flexDirection: row, I see only the arrow and no text. Even if I remove the <TextInput/>, I don't see any text in the Picker.

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

type Props = {}

const countryCode = [
{
    label: '+91',
    value: '+91',
},
{
    label: '+1',
    value: '+1',
},
{
    label: '+2',
    value: '+2',
},
];

export default class PickerTest extends Component<Props> {

constructor() {
    super()
    this.state = {
        phoneNumber: "",
        countryCode: ""
    }
}

render() {
    return (
        <View style={{flexDirection:'row'}}>
            <View paddingVertical={5}>
            {/* and hiding the InputAccessoryView on iOS */}
            <RNPickerSelect
            placeholder={{}}
            items={countryCode}
            onValueChange={value => {
            this.setState({
                countryCode: value,
            });
            }}
            InputAccessoryView={() => null}
            style={pickerSelectStyles}
            value={this.state.countryCode}
            />
            </View>
        </View>
    );
}
}

const pickerSelectStyles = StyleSheet.create({
inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
});

On running the above app, I get something like this

As you can see the picker is not showing the text.

Below are the configuration I am using

react-native-picker-select version: 6.3.3

react-native version: 0.61.2

react version: 16.9.0

score 1 · Answer 1 · answered Nov 19 '19 at 16:19

1

this is an upstream issue: https://snack.expo.io/HkygCqhsr

options:

useNativeAndroidPickerStyle prop
set width and height with inputAndroid style prop

answered Nov 19 '19 at 16:19

lfkwtz

1,007
2
11
25

score 1 · Answer 2 · answered Apr 19 '21 at 18:01

Add the atribute "pickerProps" to the RNPickerSelect with the option overflow: 'hidden'

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />

react-native-picker-select not Working with Parent View {flexDirection:'row'}

2 Answers2