Skip to content

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

Open
@finkpong

Description

@finkpong

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>
...
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions