React Native Switch not animating when using React Navigation

user_8839059 0
Viewed 415

I am trying to add a Switch to my App, and its animation is not working. I tried to create a Snack and noticed that it works without navigation (see this snack) but doesn't work when it is inside a Screen (see this snack).

It seems to be a problem just in Android.

The Switch code is just it:

const MySwitch = () => {
  const [value, setValue] = React.useState(false);
  return <Switch value={value} onValueChange={setValue} />;
};

Am I doing something wrong? Is it a problem with Expo, React Navigation or Switch?

In the worst case, how can I animate the component on my own?

Current behavior / Expected behavior:

React Navigation versions:

"@react-navigation/native": "^5.7.2",
"@react-navigation/bottom-tabs": "^5.7.2",
react-navigation expo react-native
1 Answers

came upon this bug as well, exactly as described. I implement a settings page where if you toggle one option, another toggle option is displayed. The second Toggle does not suffer from this bug, and this is 100% consistent. So my guess is that he bug is triggered only for Switch components that are rendered on the initial render pass somehow.

as a workaround for this bug, introducing a small delay of 10ms for rendering Switch completely resolves the issue without visible side effects.

function useDelay(ms: number) {
    const [gate, setGate] = useState(false);
    useEffect(() => {
      setTimeout(() => {
        setGate(true);
      }, ms);
    });
    return gate;
}

const delayRender = useDelay(10);

return (
      <>
        {delayRender && (
            <Switch />
        )}
      </>
);
user_9054330
Related