Fix inverted cell style for inverted Animated.FlatList

Example/src/App.tsx

@@ -52,6 +52,7 @@ import AnimatedSensorExample from './AnimatedSensorExample';
 import AnimatedSharedStyleExample from './AnimatedSharedStyleExample';
 import AnimatedKeyboardExample from './AnimatedKeyboardExample';
 import ScrollViewOffsetExample from './ScrollViewOffsetExample';
+import InvertedFlatListExample from './InvertedFlatListExample';
 
 LogBox.ignoreLogs(['Calling `getNode()`']);
 
@@ -200,6 +201,10 @@ const SCREENS: Screens = {
     screen: ScrollExample,
     title: 'Scroll Example',
   },
+  InvertedFlatListExample: {
+    screen: InvertedFlatListExample,
+    title: 'Inverted FlatList Example',
+  },
 };
 
 type RootStackParams = { Home: undefined } & { [key: string]: undefined };

Example/src/InvertedFlatListExample.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  useAnimatedScrollHandler,
+  interpolate,
+} from 'react-native-reanimated';
+
+const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+const cardSize = 200;
+const cardMargin = 10;
+const cardInterval = cardSize + cardMargin * 2;
+
+function InvertedFlatListExample() {
+  return (
+    <>
+      <List />
+      <List horizontal />
+    </>
+  );
+}
+
+function List({ horizontal }: { horizontal?: boolean }) {
+  const [scrollViewSize, setScrollViewSize] = React.useState(200);
+  const scrollPosition = useSharedValue(0);
+  const isScrolling = useSharedValue(false);
+
+  const scrollHandler = useAnimatedScrollHandler(
+    {
+      onScroll: (event) => {
+        scrollPosition.value = horizontal
+          ? event.contentOffset.x
+          : event.contentOffset.y;
+      },
+      onBeginDrag: () => {
+        isScrolling.value = true;
+      },
+      onEndDrag: () => {
+        isScrolling.value = false;
+      },
+    },
+    [horizontal]
+  );
+
+  const inset = (scrollViewSize - cardInterval) / 2;
+  const containerPadding = horizontal
+    ? { paddingHorizontal: inset }
+    : { paddingVertical: inset };
+
+  return (
+    <Animated.FlatList
+      style={styles.container}
+      contentContainerStyle={[styles.contentContainer, containerPadding]}
+      inverted
+      snapToInterval={cardInterval}
+      decelerationRate="fast"
+      horizontal={horizontal}
+      data={digits}
+      renderItem={({ item, index }) => (
+        <Item index={index} item={item} scrollPosition={scrollPosition} />
+      )}
+      onScroll={scrollHandler}
+      scrollEventThrottle={1}
+      onLayout={(event) =>
+        setScrollViewSize(
+          horizontal
+            ? event.nativeEvent.layout.width
+            : event.nativeEvent.layout.height
+        )
+      }
+    />
+  );
+}
+
+function Item({
+  item,
+  index,
+  scrollPosition,
+}: {
+  item: number;
+  index: number;
+  scrollPosition: Animated.SharedValue<number>;
+}) {
+  const style = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(
+            scrollPosition.value,
+            [
+              (index - 1) * cardInterval,
+              index * cardInterval,
+              (index + 1) * cardInterval,
+            ],
+            [0, 1, 0],
+            'clamp'
+          ),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View style={[styles.card, style]}>
+      <Text style={styles.text}>{item}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    margin: 10,
+  },
+  contentContainer: {
+    alignItems: 'center',
+  },
+  card: {
+    width: cardSize,
+    height: cardSize,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    borderColor: '#eee',
+    borderWidth: 1,
+    margin: cardMargin,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 32,
+  },
+});
+
+export default InvertedFlatListExample;

src/reanimated2/component/FlatList.tsx

@@ -1,21 +1,35 @@
 import React, { ForwardedRef, forwardRef } from 'react';
-import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
+import {
+  FlatList,
+  FlatListProps,
+  LayoutChangeEvent,
+  StyleSheet,
+} from 'react-native';
 import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
 import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
+import { StyleProps } from '../commonTypes';
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
 interface AnimatedFlatListProps {
   onLayout: (event: LayoutChangeEvent) => void;
   // implicit `children` prop has been removed in @types/react^18.0.0
   children: React.ReactNode;
+  inverted?: boolean;
+  horizontal?: boolean;
 }
 
-const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
+const createCellRenderer = (
+  itemLayoutAnimation?: ILayoutAnimationBuilder,
+  cellStyle?: StyleProps
+) => {
   const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
-      <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
+      <ReanimatedView
+        layout={itemLayoutAnimation}
+        onLayout={props.onLayout}
+        style={cellStyle}>
         {props.children}
       </ReanimatedView>
     );
@@ -34,9 +48,15 @@ const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
   (props: ReanimatedFlatListProps<any>, ref: ForwardedRef<FlatList>) => {
     const { itemLayoutAnimation, ...restProps } = props;
 
+    const cellStyle = restProps?.inverted
+      ? restProps?.horizontal
+        ? styles.horizontallyInverted
+        : styles.verticallyInverted
+      : undefined;
+
     const cellRenderer = React.useMemo(
-      () => createCellRenderer(itemLayoutAnimation),
-      []
+      () => createCellRenderer(itemLayoutAnimation, cellStyle),
+      [cellStyle]
     );
 
     return (
@@ -49,4 +69,9 @@ const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
   }
 );
 
+const styles = StyleSheet.create({
+  verticallyInverted: { transform: [{ scaleY: -1 }] },
+  horizontallyInverted: { transform: [{ scaleX: -1 }] },
+});
+
 export default ReanimatedFlatlist;