FlatList inverted, itemLayoutAnimation and Typescript not working

https://user-images.githubusercontent.com/43195241/146722205-34558cbe-5ffd-4653-b648-e99fd6c0c852.mp4

Description

I found this issue when use Animated.FlatList with inverted. You can see my video below:

Expected behavior

inverted, itemLayoutAnimation and Typescript working

Actual behavior & steps to reproduce

Install library then use Animated.FlatList

Snack or minimal code example

import React, {memo, useCallback, useState} from 'react';
import isEqual from 'react-fast-compare';
import {Button, Text, View} from 'react-native';
import Animated, {Layout} from 'react-native-reanimated';
import {SafeAreaView} from 'react-native-safe-area-context';

const LoginComponent = () => {
  // state
  const [data, setData] = useState<Array<string>>([
    'Hello',
    'Hi',
    'My name is Jon',
  ]);

  // func
  const onPush = useCallback(() => {
    setData(d => ['New Text'].concat(d));
  }, []);

  // render
  return (
    <SafeAreaView style={{flex: 1}}>
      <Animated.FlatList
        inverted
        itemLayoutAnimation={Layout.springify()}
        renderItem={({item, index}) => {
          return (
            <View key={index}>
              <Text>{item}</Text>
            </View>
          );
        }}
        data={data}
      />
      <Button title={'PUSH'} onPress={onPush} />
    </SafeAreaView>
  );
};

export const Login = memo(LoginComponent, isEqual);

Typescript error

Package versions

• React Native: 0.66.4
• React Native Reanimated: 2.3.1
• NodeJS: 17.3.0
• Xcode: 12.5.1

Affected platforms

• [] Android
• iOS
• Web

[punksta]

Perhaps I am getting the same issue. It’s not typescript, it’s inverted behavior.

expected behavior

https://reactnative.dev/docs/flatlist#inverted

Reverses the direction of scroll. Uses scale transforms of

actual behavior

inverted is mirroring the list elements against X axis. Instead of reversing the direction of scroll.

FlatList

Animated.FlatList

I fixed my issue by rotating elements back on X axis.

 export const WeightList = () => {
  const { data } = useWeightHistory()
  return (
    <Animated.FlatList
      style={{
        flex: 1
      }}
      keyExtractor={keyExtractor}
      inverted
      data={data}
      renderItem={info => (
        <Animated.View
          style={{
            transform: [
              {
                rotateX: '180deg'
              }
            ]
          }}
        >
          {renderItem(info.item)}
        </Animated.View>
      )}
    />
  )
}

[Swiftwork]

I also notice that using:

Animated.createAnimatedComponent(FlatList)

or:

Animated.FlatList

breaks type inference of the children. For the first example:

Animated.createAnimatedComponent<FlatListProps<ChildType>>(FlatList)

can be used to restore the types. This should probably be handled more generically with Animated.FlatList. The definition for Animated.FlatList should probably be something along the lines of:

export class FlatList<T = any> extends Component<AnimateProps<FlatListProps<T>>> {
  itemLayoutAnimation: ILayoutAnimationBuilder;
  getNode(): ReactNativeFlatList;
}