CODEWITHSUNDEEP
react-nativepickerselectedvalue
Bjørn Olav Jalborg
Bjørn Olav Jalborg

Reputation: 603

selectedValue in Picker not showing

I'm having an issue with the React Native Picker.

My problem is that the selectedValue in the Picker does not show on small screens! On big screens it works just fine, but at a certain width, the selectedValue is not rendered, only the little downwards arrow.

When I manually set the width of the picker to be 100, it works fine, however, if the width is set to 50 (which is what I need), the selectedValue doesn't render, only the arrow downwards.

My code looks like this:

<Picker
    selectedValue={props.selectedCurrency}
    style={headerStyle.picker}
    onValueChange={props.setCurrency}
    >
        <Picker.Item label="USD" value={Currency.USD} />
        <Picker.Item label="EUR" value={Currency.EUR} />
</Picker>

And then the styles look like this:

picker: {
        flex: 1,
        width: 50,
    },

I have figured out one solution, which is to render a component besides the Picker, but then the Text isn't clickable, which isn't the best UX design..

Can anyone help? I just want the selectedValue to render on both small and big screens.

Thank you very much in advance.

Upvotes: 1

Views: 2476

Answers (2)

PurTahan
PurTahan

Reputation: 1003

from this answer, you need to convert selected value to string.

<Picker
//...
selectedValue={props.selectedCurrency ? props.selectedCurrency.toString() : null}
//...
>

Upvotes: 0

GauthierG
GauthierG

Reputation: 308

Unfortunately, if you need a minimum width to display correctly your items you do not have much choices. You can define a style for your items and maybe lower their size or use a font which render them lower. For example :

<Picker
selectedValue={props.selectedCurrency}
style={headerStyle.picker}
itemStyle={headerStyle.pickerItem}
onValueChange={props.setCurrency}
>
    <Picker.Item label="USD" value={Currency.USD} />
    <Picker.Item label="EUR" value={Currency.EUR} />

and for style

picker: {
        flex: 1,
        width: 50,
    },
pickerItem: {
       fontSize: 12
    }

Or/and maybe you will have to change your UI in order to display the picker elsewhere in your screen to be sure to have enough space to display it correctly.

Hope this helps !

Upvotes: 1

Related Questions