Slide animation won't work when component is controlled with selectedIndex

[Guy Tepper]

Hi there! Thanks for the great library :)
When I'm controlling the component by changing the selectedIndex dynamically, the sliding animation doesn't work:

const [selectedIndex, setSelectedIndex] = useState(0)

return (
  <SegmentedControl
     values={[0, 1]}
     selectedIndex={selectedIndex}
     onChange={(event) => setSelectedIndex(event.nativeEvent.selectedSegmentIndex}}
 />
)

You can see the actual code I've been using here, and the video below for the result.

Simulator.Screen.Recording.-.iPhone.11.-.2021-06-11.at.13.42.54.mp4

[FreakyCoder]

Actually, the problem is the version of 2.4.0, simply downgraded to 2.3.0 and everything works great!

I hope they will resolve the animation problem.

[Guy Tepper]

2.3.0 is the installed version in the video I've attached. Does the animation work for you in a controlled component?

[Arunim Chaudhary]

Any updates on this issue?

[Rodolphe Jerez]

Problem still present :(
In the meantime to work around the problem I use the non-native version
(On the other hand, we lose the sliding animation)

import SegmentedControld from '@react-native-segmented-control/segmented-control/js/SegmentedControl.js';

[Sélim]

One workaround is to set a timeout before state change:

const [selectedIndex, setSelectedIndex] = useState(0);

return (
  <SegmentedControl
    values={[0, 1]}
    selectedIndex={selectedIndex}
    onChange={(event) => {
      const index = event.nativeEvent.selectedSegmentIndex;
      setTimeout(() => {
        setSelectedIndex(index);
      }, 200);
    }}
  />
)

[FreakyCoder]

It seems this library is not actively maintained anymore.

I made a segmented control with pure javascript. It does not require any native linking.

https://github.com/WrathChaos/react-native-segmented-control-2