[Android] When using LayoutAnimation in ScrollView to delete the last piece of data, it will move up

[furuiwen1015]

Description

[Android] When using LayoutAnimation in ScrollView to delete the last piece of data, it will move up.

Version

0.66.4

Output of npx react-native info

System: OS: macOS 11.3.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 824.13 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /Users/xxx/.rbenv/shims/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 28, 29, 30, 31 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0 System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.2 AI-202.7660.26.42.7486908 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.66.4 => 0.66.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Step One: show 10 data and add onPress eventListener Step Two: delete lastest one

Snack, code example, screenshot, or link to a repository

import React, {useState} from 'react';
import {
  LayoutAnimation,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  UIManager,
  View,
} from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

const App = () => {
  const [data, setData] = useState(
    Array(20)
      .fill(null)
      .map((_, index) => index),
  );

  const handleItemClick = (index: number) => {
    data.splice(index, 1);
    LayoutAnimation.easeInEaseOut();
    setData([...data]);
  };

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      style={styles.container}
      contentContainerStyle={styles.contentContainer}>
      {data.map((value, index) => (
        <TouchableWithoutFeedback
          key={value}
          onPress={() => handleItemClick(index)}>
          <View style={styles.item}>
            <Text>{value}</Text>
          </View>
        </TouchableWithoutFeedback>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  contentContainer: {
    backgroundColor: 'green',
  },
  item: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    borderBottomWidth: 1,
    borderBottomColor: 'black',
  },
});

export default App;

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[justinkx]

@furuiwen1015 Found any workaround for this issue?

[furuiwen1015]

I am so sorry, I have no idea.