Entering layout animation jump on initial render about react-native-reanimated

[matinzd]

Update:

I realized that even without adding space or margin between items, the bug is still present. I have updated the reproducible example.

Wrapping it in another view will fix the issue on iOS but it is still broken on Android.

[exploIF]

Hi @matinzd, regarding Android issue I cannot reproduce it with your example.

Regarding iOS issue I've take a look on your repro and I've managed to fix it by providing additional container for all your components rendered directly inside SafeAreaView (not only for the Animated.View itself). It is because SafeAreaView is adding padding which is somehow making animated component to jump afer animation is completed. We will take a look on this behavior closer.

Please check my code

import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';
import { Card } from 'react-native-paper';
import AssetExample from './components/AssetExample';

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

export default function App() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.paragraph}>
            Test text to expand the size between
          </Text>
          <Text style={styles.paragraph}>
            Test text to expand the size between
          </Text>
          <Animated.View entering={animation}>
            <Card>
              <AssetExample />
            </Card>
          </Animated.View>
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

[exploIF]

We've decided to add a warning message when animated component is rendered directly inside SafeAreaView. Also, this will be added to Troubleshooting section in our docs too.