Animated components render randomly in Reanimated v3

[n-ii-ma]

Description

I'm integrating Moti to handle animations and sometimes the animated components don't render. This happens totally at random and is only present in v3. The problem persists until the app is fully restarted and even then it might happen again.

I want to clarify that this problem is not related to Moti and only downgrading Reanimated to v2 solves this random issue.

Has anyone else stumbled upon this issue?

Steps to reproduce

Reproducing this issue is quite difficult as this issue happens randomly. I created a general animated component which wraps around its view children and animates them:

import React from 'react';
import { MotiView } from 'moti';

const AnimatedComponent = ({
  from,
  animate,
  exit,
  transition,
  style,
  children,
}) => (
  <MotiView
    from={from}
    animate={animate}
    exit={exit}
    transition={transition}
    style={style}>
    {children}
  </MotiView>
);

export default AnimatedComponent;

Snack or a link to a repository

Issue is random

Reanimated version

3.1.0

React Native version

0.71.7

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tironiigor]

@n-ii-ma are you having issues on both iOS and Android or only Android? I'm having an issue that matches your description, but it's only on android. Also might be related to #4387

[n-ii-ma]

@n-ii-ma are you having issues on both iOS and Android or only Android? I'm having an issue that matches your description, but it's only on android. Also might be related to #4387

I haven't tested this issue on iOS. But yes, on Android, I'm experiencing this random issue.

[n-ii-ma]

Has this issue been resolved?

[KiyeopYang]

Me too. "The problem persists until the app is fully restarted and even then it might happen again." exactly.

Only after users reported the error, I realized the error. But I can only replicate the error 1 in 100 times.

It really happened randomly and the app must be restarted to render animated component again.

[efenstakes]

I don't think this issue has been resolved. I had to stop the usage of Moti on an upcoming app because in as much as the issue happed once in a few days, it's hurting the UX pretty badly.