added warning when animated component is rendered directly inside SafeAreaView

[exploIF]

Summary

Added warning log when animated component is rendered directly inside SafeAreaView from react-native or from react-native-safe-area-context. This should address maintainer issue here

Test plan

1. Inside EmptyExample.tsx paste the code

   
   import { StyleSheet, View, SafeAreaView as RNSafeAreaView } from 'react-native';
   import React from 'react';
   import Animated, { FadeIn } from 'react-native-reanimated';

const animation = FadeIn.delay(1000).duration(2000);

export default function EmptyExample() { return (

); } const styles = StyleSheet.create({ greyBox: { backgroundColor: 'grey', height: 100, width: '100%', }, redAnimatedBox: { backgroundColor: 'red', height: 100, width: '100%', }, });

2. This should throw a warning in your console:

Animated components shouldn't be rendered directly inside , consider wrapping your content with additional

3. Apply changes below
```diff
import { StyleSheet, View, SafeAreaView as RNSafeAreaView } from 'react-native';
import React from 'react';
import Animated, { FadeIn } from 'react-native-reanimated';

const animation = FadeIn.delay(1000).duration(2000);

export default function EmptyExample() {
  return (
    <RNSafeAreaView>
+      <View>
        <View style={styles.greyBox} />
        <Animated.View entering={animation}>
          <View style={styles.redAnimatedBox} />
        </Animated.View>
+      </View>
    </RNSafeAreaView>
  );
}
const styles = StyleSheet.create({
  greyBox: {
    backgroundColor: 'grey',
    height: 100,
    width: '100%',
  },
  redAnimatedBox: {
    backgroundColor: 'red',
    height: 100,
    width: '100%',
  },
});

4. Reload the app, there shouldn't be a warning message in the console.

[piaskowyk]

As we discussed offline, this issue is more generic than just the SafeAreaContext. We need to modify the implementation to cancel the animation and jump directly to the final position. A similar approach is already in place for Layout Animation for Fabric. Solutions:

• follow instruction form issue - https://github.com/software-mansion/react-native-reanimated/issues/6046
• or add animation layout to component like here - https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions