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 (
    <RNSafeAreaView>
      <View style={styles.greyBox} />
      <Animated.View entering={animation}>
        <View style={styles.redAnimatedBox} />
      </Animated.View>
    </RNSafeAreaView>
  );
}
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 <SafeAreaView />, consider wrapping your content with additional <View />

3. Apply changes below

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.

[szydlovsky]

Works well, nice 😄

[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 - Entering and/or layout animation flickering when SafeAreaView is a first parent of an animated component #6046
• or add animation layout to component like here - https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions