Failure in fabric expo

[djMax]

Description

This code causes the following error in an Expo project with Fabric enabled. Using a View instead of Animated.View makes it stop failing. The interface becomes unresponsive.

 (NOBRIDGE) ERROR  ReanimatedError: Exception in HostFunction: <unknown>, js engine: reanimated

import type { ViewStyle, StyleProp } from 'react-native';

import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

export const BASE_DELAY_TIME_IN_MS = 100;
export const BASE_EXITING_DURATION_TIME_IN_MS = 300;
export const BASE_ENTERING_DURATION_TIME_IN_MS = 1000;

interface CustomAnimationFadeInProps {
  customStyle?: StyleProp<ViewStyle>;
  customDelayTimeInMs?: number;
  customEnteringDurationTimeInMs?: number;
  customExitingDurationTimeInMs?: number;
  customDelayTimeOutMs?: number;
}

export function CustomAnimationFadeIn({
  children,
  customStyle,
  customEnteringDurationTimeInMs = BASE_ENTERING_DURATION_TIME_IN_MS,
  customExitingDurationTimeInMs = BASE_EXITING_DURATION_TIME_IN_MS,
  customDelayTimeInMs = BASE_DELAY_TIME_IN_MS,
  customDelayTimeOutMs = 0,
}: React.PropsWithChildren<CustomAnimationFadeInProps>) {
  return (
    <Animated.View
      entering={FadeIn.delay(customDelayTimeInMs).duration(
        customEnteringDurationTimeInMs,
      )}
      exiting={FadeOut.delay(customDelayTimeOutMs).duration(
        customExitingDurationTimeInMs,
      )}
      style={customStyle}>
      {children}
    </Animated.View>
  );
}

Steps to reproduce

This is in a complex project - @dawmatswm can give you access at Software Mansion, but this particular component appears to be the difference between crashing and not.

Snack or a link to a repository

https://github.com/sesamecare/mobile-apps

Reanimated version

3.15.1

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

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?

[bartlomiejbloniarz]

Hi @djMax! Where does this issue manifest? Is it in the check in form in the patient app? If so, then it should be fixed by this PR.

[djMax]

Yep, that's where it happens. Let me give this a whirl

[bartlomiejbloniarz]

You can use this patch I generated with patch-package react-native-reanimated+3.15.0.patch

It also fixes some other issues that manifest in the check in form (though these fixes are subject to change)

[djMax]

Ok great. I assume this is intended for 3.15.1 as well?

[bartlomiejbloniarz]

Should work the same

[bartlomiejbloniarz]

@djMax we just published reanimated 3.15.3 with fixes for those problems