Incorrect position of components during entering layout animation

[tomekzaw]

Description

When a component is placed near the bottom edge of the screen and has an entering animation, it appears with a delay. In fact, the entering animation is running but the placement of the component is incorrect (the element is simply below the bottom edge of the screen).

Android	iOS
android.mp4	ios.mp4

Steps to reproduce

The problem happens on 6dc1e6f

Paste the following code in EmptyExample.tsx

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

export default function Reproducer() {
  return (
    <View style={styles.container}>
      <View style={styles.fill} />
      <Animated.View entering={FadeIn.duration(1000)}>
        <Text style={styles.text}>Some text</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  fill: {
    flex: 1,
  },
  text: {
    fontSize: 50,
  },
});

Make sure that the repro is placed inside a native screen.

Snack or a link to a repository

nope

Reanimated version

3.8.1

React Native version

0.74.0-rc.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes