Animated.View takes excessive amount of time on first render

[latekvo]

Description

When loading a list of Animated.Views, the very first Animated.View takes 83ms to render. Each following Animated.View takes <0.1ms to render. This issue only occurs on Android. It doesn't occur with regular View, which takes 4-13ms for it's first render, and <0.1ms for it's following renders as well.

Profile when using Animated.View:

Profile when using View:

Steps to reproduce

Run an empty example app on react >77, open profiler, use the following files:

App.tsx code:

import React from 'react';
import { Text, FlatList, StyleSheet, View } from 'react-native';
import ViewTest from './Test';

export default function App() {
  return (
    <FlatList
      style={styles.container}
      data={new Array(30).fill(null)}
      renderItem={() => (
        <ViewTest>
          <View style={styles.button}>
            <Text>List Item</Text>
          </View>
        </ViewTest>
      )}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  button: {
    padding: 8,
    height: 50,
  },
});

Test.tsx code with Animated.View:

import React from 'react';
import Animated from 'react-native-reanimated';
import { StyleSheet } from 'react-native';

function ViewTest(props: any) {
  const { children, ...remainingProps } = props;

  return (
    <Animated.View {...remainingProps} style={[styles.container]}>
      {children}
    </Animated.View>
  );
}

export default ViewTest;

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
});

Test.tsx code with View:

import React from 'react';
import { StyleSheet, View } from 'react-native';

function ViewTest(props: any) {
  const { children, ...remainingProps } = props;

  return (
    <View {...remainingProps} style={[styles.container]}>
      {children}
    </View>
  );
}

export default ViewTest;

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
});

Snack or a link to a repository

Repro provided in Steps to reproduce section.

Reanimated version

3.16.7

React Native version

0.77.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Android

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?