Issue with exiting animation in Animated.View

[rupakgithub]

Description

Exiting animation lagging in Android emulator as well as Real device but working fine on iOS devices

Snack or minimal code example

import React, { useCallback, useEffect, useRef, useState } from 'react';
import {StyleSheet, ScrollView, View, TouchableOpacity, Text} from 'react-native';
import Animated, { FadeOut, Layout, SlideInDown, SlideInRight, ZoomIn } from 'react-native-reanimated';

const LIST_ITEM_COLOR = '#1798DE';

interface Item {
  id: number;
}

export default function App() {
  const initialMode = useRef<boolean>(true);

  useEffect(() => {
    initialMode.current = false;
  });

  const [items, setItems] = useState<Item[]>(new Array(6).fill(0).map((_, index) => ({ id: index })));

  const onAdd = useCallback(() => {
    setItems(currentItems => {
      const nextItemId = (currentItems[currentItems.length - 1]?.id ?? 0) + 1;
      return [...currentItems, { id: nextItemId }];
    });
  }, []);

  const onDelete = useCallback((itemId: number) => {
    setItems(currentItems => {
      return currentItems.filter(item => item.id !== itemId);
    });
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.floatingButton} onPress={onAdd}>
        <Text style={styles.floatingButtonIcon}>+</Text>
      </TouchableOpacity>
      <ScrollView style={styles.mainScrollView} contentContainerStyle={{ paddingVertical: 50 }} >
        {items.map((item, index) => {
          return (
            <Animated.View
              key={item.id}
              entering={initialMode.current?ZoomIn.delay(100*index):ZoomIn}
              exiting={FadeOut}
              onTouchEnd={() => onDelete(item.id)}
              style={styles.listItem}
            />
          );
        })}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  mainScrollView: {
    flex: 1,
  },
  listItem: {
    height: 100,
    width: '90%',
    backgroundColor: LIST_ITEM_COLOR,
    marginVertical: 10,
    borderRadius: 15,
    alignSelf: 'center',
    elevation: 5,
  },
  floatingButton: {
    width: 80,
    aspectRatio: 1,
    backgroundColor: 'black',
    borderRadius: 40,
    position: 'absolute',
    bottom: 50,
    right: '5%',
    zIndex: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  floatingButtonIcon: {
    color: 'white',
    fontSize: 40,
  },
});

Package versions

name	version
react-native	0.67.2
react-native-reanimated	2.3.1
NodeJS	14.17.6
Java	17.0.2

Affected platforms

• [ x] Android
• [ ] iOS
• [ ] Web

Screen Record

Entering Animation

https://user-images.githubusercontent.com/13873164/152690363-61e17eca-0593-4766-b393-5f527629a783.mp4

Exiting Animation

https://user-images.githubusercontent.com/13873164/152690383-c1a1937b-687b-4fbd-a315-217e1be0d125.mp4

[wintermaples]

This problem may not be lagging bug. When removal, the last component in ScrollView is unmounted. At the time, a View in ScrollView may shrink. (Even though that, why half of the component show after removal on rupakgithub's code shows is ScrollView has paddingVertical. If that is 0, component disappears immediately after removal!)

This problem happens official example too.

[HadiModarres]

This issue is still present on v2.10.0

[github-actions[bot]]

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?