react-native-picker-select icon indicating copy to clipboard operation
react-native-picker-select copied to clipboard

Displayed label does not re-render when underlying state value changes

Open finkpong opened this issue 5 months ago • 0 comments

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:

  1. Create a RNPicker and two buttons that will change the state value given in itemKey. See code below
  2. Run the code
  3. 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>
...
);

finkpong avatar May 09 '25 15:05 finkpong