SegmentedControl doesn't use updated callback

[vanjac]

Description

The SegmentedControl always calls the first onChangeIndex function it receives. If that callback changes on a later render, it still calls the old version of the function.

Related to

• Components
• Demo
• Docs
• Typings

Code snippet

const [selectedIndex, setSelectedIndex] = useState(0);
const handleIndexChanged = useCallback((index: number) => {
    console.log("Old index: " + selectedIndex);
    console.log("New index: " + index);
    setSelectedIndex(index);
}, [selectedIndex, setSelectedIndex]);
const segments = [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}];
return (
    <SegmentedControl segments={segments} initialIndex={selectedIndex}
        onChangeIndex={handleIndexChanged} />
);

Expected behavior

The "old index" logged should always reflect the previous index value, since the callback is updated every time selectedIndex changes.

Actual behavior

The "old index" logged is always 0, because the SegmentedControl always uses the first onChangeIndex it was given.

More Info

Environment

React Native 0.71.1

React Native UI Lib version 6.29.1

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vanjac]

Don't close this, it hasn't been fixed.

[M-i-k-e-l]

Hi @trofima,
This should be fixed in the next version (as I assume you've noticed)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.