[bug]: Animation flickers on React Native New Architecture

[wojtekmaj]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.5

What's Wrong?

Animation flickers:

Nagranie.z.ekranu.2025-04-28.o.23.19.37.mov

To Reproduce

Nothing fancy really:

  const wrapperTransitions = useTransition(isOpen, {
    from: {
      opacity: 0,
      scale: 0.7,
    },
    enter: {
      opacity: 1,
      scale: 1,
    },
    leave: {
      opacity: 0,
      scale: 0.7,
    },
    config: config.gentle,
    onDestroyed: () => {
      if (isOpen) {
        return;
      }

      onDestroyed?.();
    },
  });

  return wrapperTransitions(
    (props, showDialog) =>
      showDialog && (
        <Overlay>
          <Wrapper
            as={AnimatedWrapper}
            aria-label={ariaLabelString}
            style={{
              transform: [{ scale: props.scale }],
              opacity: props.opacity,
            }}
          >
            <TitleAndContentWrapper>
              <Title>{title}</Title>
              <ContentWrapper>{children}</ContentWrapper>
            </TitleAndContentWrapper>
          </Wrapper>
        </Overlay>
      ),
  );

Expected Behaviour

No flicker

Link to repo

Can't provide a sandbox for RN

[wojtekmaj]

Interesting: adding

Globals.assign({
  requestAnimationFrame: setImmediate,
});

makes it buttery smooth again.

Warning

This workaround has a significant side effect, where animations are no longer played concurrently. This may or may not be a problem in your app.

[dagatsoin]

Indeed this feels weird. As there was a desync.
Maybe it is due to the new RN architecture which is now in sync ?