react-native-reanimated v3 flickers after expo update to SDK 49 - SAFE AREA VIEW

Question

I have just updated my React Native app to the latest version of Expo SDK. The app uses native code and dev clients. As part of the update process, I deleted the iOS and android folders to ensure a clean installation. During the Expo update, react-native-reanimated was updated from version 2.14.4 to version 3.3.0.

However, after the update, I'm experiencing various issues with animations. Specifically, the animations lag significantly only the first time they are executed. Subsequent executions seem to work fine.

Has anyone else encountered similar animation issues after updating to react-native-reanimated 3.3.0 in a React Native Expo app? If so, what could be the possible reasons and how can I address these lagging animation problems?

I have uploaded videos to show the problem.

1. https://res.cloudinary.com/dynsmaeo3/video/upload/ac_none,e_volume:-100/v1689971871/SPOTLIVE-STATIC/2_-_SD_480p_mjausq.mov
2. https://res.cloudinary.com/dynsmaeo3/video/upload/ac_none/v1689971822/SPOTLIVE-STATIC/stackoveflow_-_SD_480p_fr1zlg.mov

The problem occurs on both android and ios Thanks.

EDIT I did some tests and I noticed that without using react-native's SafeAreaView the problem doesn't exist. How can I fix?

EDIT 2 I created a repo with a fresh install of expo: https://github.com/NiccoloCase/reanimated-bug-test

Answer 1

import { useSafeAreaInsets } from "react-native-safe-area-context";

 <View
      style={{
        flex: 1,
        paddingTop: useSafeAreaInsets().top,
      }}
    >
</View>