FlatList can't scroll

Description

on android component FlatList can’t be scrolled, and I got warning like this

Warning: Cannot record touch end without a touch start.
Touch End: {"identifier":0,"pageX":0,"pageY":0,"timestamp":1641956304238}
Touch Bank: [null,{"touchActive":true,"startPageX":278.0859375,"startPageY":212.92410278320312,"startTimeStamp":1641956304179,"currentPageX":267.91754150390625,"currentPageY":213.75302124023438,"currentTimeStamp":1641956304236,"previousPageX":276.943359375,"previousPageY":212.92410278320312,"previousTimeStamp":1641956304219}]

when using Flatlist directly from gestureHandler and adding props shouldActivateOnStart it just runs and it’s not wrapped with Animated.createAnimatedComponent(FlatList)

Screenshots

Steps To Reproduce

1. Basically I just put Flatlist inside ListHeaderComponents in Flatlist.
2. wrapping the Flatlist RN component with Animated.createAnimatedComponent(FlatList) from reanimated

Expected behavior

it should work as expected

Actual behavior

component can’t be scrolled and get a warning like above

Snack or minimal code example

// HeaderList.tsx
import { FlatList, FlatListProps, StyleProp, ViewStyle } from 'react-native';

import Animated from 'react-native-reanimated';

const AFlatList = Animated.createAnimatedComponent(FlatList);

const { x, scrollHandler } = useScrollHandler(); // from redash
// can't be scrolled
...
<AnimatedFlatList
          {...scrollHandler}
          data={[...]}
          keyExtractor={keyExtractor}
          horizontal
          contentContainerStyle={{ paddingVertical: 10 }}
          pagingEnabled
          decelerationRate="fast"
          showsHorizontalScrollIndicator={false}
          renderItem={renderItem}
          onMomentumScrollEnd={({ nativeEvent: { contentOffset, contentSize } }) => {
            const selected = IndicatorSlider.getSelected(contentOffset.x, contentSize.width, tiers.tiers.length);
            activeIndex.setValue(selected);
          }}
        />
...
// its works
import { FlatList } from 'react-native-gesture-handler';
<FlatList
          ListEmptyComponent={PointCardEmpty}
          data={[...]}
          keyExtractor={keyExtractor}
          horizontal
          contentContainerStyle={{ paddingVertical: 10 }}
          pagingEnabled
          shouldActivateOnStart // <- add this
          decelerationRate="fast"
          showsHorizontalScrollIndicator={false}
          renderItem={renderItem}
          onMomentumScrollEnd={({ nativeEvent: { contentOffset, contentSize } }) => {
            const selected = IndicatorSlider.getSelected(contentOffset.x, contentSize.width, tiers.tiers.length);
            activeIndex.setValue(selected);
          }}
        />

// cartList.tsx

 <AnimatedFlatList
        ListHeaderComponent={HeaderList}
        showsVerticalScrollIndicator={false}
        initialNumToRender={100}
        data={[...]}
        renderItem={renderItem}
        ItemSeparatorComponent={() => <VBox h={2} background={colors.lineColor} mx={16} />}
        contentContainerStyle={styles.container}
        ListHeaderComponentStyle={{ marginBottom: 20 }}
      />

Package versions

• React: 17.0.2
• React Native: 0.65.2
• React Native Gesture Handler: 2.0.0, 2.1.0, 2.1.1

[kmagiera]

Hi @dodicandra – would be great to have that small reproducible example from you to make any progress on this issue.

On top of that, it isn’t recommended to use createAnimatedComponent on FlatList. Note that FlatList is a “virtual” component that renders ScrollView under the hood, and createAnimatedComponent really makes sense only when run on components that map directly to native views. If you want to use animated props for the ScrollView that FlatList controlls you should use renderScrollComponent prop (see https://reactnative.dev/docs/virtualizedlist#renderscrollcomponent)

[j-piasecki]

Could you prepare a repository with a reproduction of these issues so I can look into it?