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

[guytepper]

trafficstars

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.

https://user-images.githubusercontent.com/13344923/121674791-2bf36a80-cabb-11eb-8cad-1eac07f17cf1.mp4

[WrathChaos]

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.

[guytepper]

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

[arunim2405]

Any updates on this issue?

[CodingByJerez]

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';

[selimjouan]

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);
    }}
  />
)

[WrathChaos]

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