Open
Description
Describe the bug
The displayed label does not re-render when the state value given to value
or itemKey
changes outside of picker selection
To Reproduce
Steps to reproduce the behavior:
- Create a RNPicker and two buttons that will change the state value given in
itemKey
. See code below - Run the code
- Click the "Set 1" / "Set 2" buttons
Result: the picker label does not change
the selection
value displayed in the <Text>
component does rerender to 1 or 2
Expected behavior
Expected: the picker label displays "one" and "two" after corresponding button click
Screenshots
n/a
Additional details
- Device: iPhone16
- OS: iOS 18.3
- react-native-picker-select version: 9.3.1
- react-native version: 0.76.3
- expo sdk version: 52.0.46
Reproduction and/or code sample
const [selection, setSelection] = useState<string>('1');
const items = [
{
label: 'one',
value: '1',
key: '1',
},
{
label: 'two',
value: '2',
key: '2',
},
{
label: 'three',
value: '3',
key: '3',
},
];
return (
...
// RNPickerSelect with itemKey set to state value `selection`
<RNPickerSelect
onValueChange={(value, index) => {
console.log(`onValueChange ${value} ${index}`);
setSelection(value);
}}
itemKey={selection}
items={items}
style={{
inputIOSContainer: [
{
pointerEvents: 'none',
},
],
}}
/>
// two buttons to set `selection` to '1' or '2'
<Pressable
onPress={() => {
setSelection('1');
}}
>
<Text>Set 1</Text>
</Pressable>
<Pressable
onPress={() => {
setSelection('2');
}}
>
<Text>Set 2</Text>
</Pressable>
// Visibility into current `selection` value
<Text>{selection}</Text>
...
);
Metadata
Metadata
Assignees
Labels
No labels