Circular animation not work most of the time

[Beyonds2003]

  const Home = () => {
    const colorScheme = useColorScheme();
  
    const changeTheme = (e: GestureResponderEvent) => {
      const theme = colorScheme === "dark" ? "light" : "dark";
      e.currentTarget.measure((x1, y1, width, height, px, py) => {
        switchTheme({
          switchThemeFunction: () => {
            Appearance.setColorScheme(theme);
          },
          animationConfig: {
            type: theme === "dark" ? "circular" : "inverted-circular",
            duration: 500,
            startingPoint: {
              cy: py + height / 2,
              cx: px + width / 2,
            },
          },
        });
      });
    };

  return (
    <View className="flex flex-1 items-center justify-center">
      <Pressable
        className="flex content-center rounded-full bg-blue-400 p-2"
        onPress={changeTheme}
      >
        {colorScheme === "dark" ? <MoonIcon /> : <SunIcon />}
      </Pressable>
    </View>
  );
};

export default Home;

[WadhahEssam]

Hello Friend, please make sure to include screen recordings, which platform, which rn architecture. idea of what version of react native you are using, what theming package you are using.

or you can provide us with a reproduction repo.

[Beyonds2003]

I am using Expo SDK 52 with the new architecture enabled by default. I found that the circular animation is not working properly due to Expo Router's stack navigation. In the attached recording, you can see that the animation works fine without stack navigation. However, when I add stack navigation, the animation behaves poorly.

https://github.com/user-attachments/assets/f31ab13b-2d7f-4976-81ca-923d479b82f9

[WadhahEssam]

Thank you for reporting this @Beyonds2003, I will see if I had the time to work on this later 🙏

[RodSarhan]

I was able to solve this in an old project by replacing setImmediate with setTimeout in the unfreeze wrapper function in the source code, that project doesn't use expo router so i'm not sure if it's the same issue but worth a try.

[Beyonds2003]

@RodSarhan Thanks so much for the tip! I tried replacing setImmediate with setTimeout as you suggested, and it worked perfectly! I really appreciate your help.

[WadhahEssam]

@RodSarhan did you timeout for a specific amount of time?

[RodSarhan]

@RodSarhan did you timeout for a specific amount of time?

No i didn't specify any amount, and to be honest i am not sure of why this fix works, but as far as i can remember it's related to the order of how JS is executing those functions.