fix: auto scroll fix

Author: e-younan

example/src/screens/usage/FlatList.tsx

@@ -86,7 +86,6 @@ const FlatList: React.FC<FlatListUsageScreenNavigationProps> = () => {
       getItemLayout={(_, index) => ({ index, length: ITEM_HEIGHT, offset: index * ITEM_HEIGHT })}
       initialNumToRender={50}
       maxToRenderPerBatch={100}
-      disableAutoFixScroll
       keyExtractor={(_, i) => `text-row-${i}`}
     />
   );

example/src/screens/usage/SectionList.tsx

@@ -105,7 +105,6 @@ const SectionList: React.FC<SectionListUsageScreenNavigationProps> = () => {
       getItemLayout={(_, index) => ({ index, length: ITEM_HEIGHT, offset: index * ITEM_HEIGHT })}
       initialNumToRender={50}
       maxToRenderPerBatch={100}
-      disableAutoFixScroll
       keyExtractor={(_, i) => `text-row-${i}`}
     />
   );

src/components/containers/FlatList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
 import { View, FlatListProps, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, { useAnimatedRef, AnimateProps } from 'react-native-reanimated';
@@ -28,15 +28,16 @@ const FlatListWithHeadersInputComp = <ItemT extends unknown>(
     onMomentumScrollEnd,
     ignoreLeftSafeArea,
     ignoreRightSafeArea,
-    disableAutoFixScroll,
+    disableAutoFixScroll = false,
     /** At the moment, we will not allow overriding of this since the scrollHandler needs it. */
     onScroll: _unusedOnScroll,
     ...rest
   }: AnimatedFlatListProps<ItemT> & SharedScrollContainerProps,
-  ref: React.Ref<AnimatedFlatListType<ItemT>>
+  ref: React.Ref<Animated.FlatList<ItemT> | null>
 ) => {
   const insets = useSafeAreaInsets();
   const scrollRef = useAnimatedRef<Animated.FlatList<ItemT>>();
+  useImperativeHandle(ref, () => scrollRef.current);
 
   const {
     scrollY,
@@ -63,12 +64,7 @@ const FlatListWithHeadersInputComp = <ItemT extends unknown>(
     >
       {HeaderComponent({ showNavBar })}
       <Animated.FlatList
-        ref={(_ref) => {
-          // @ts-ignore
-          scrollRef.current = _ref;
-          // @ts-ignore
-          if (ref) ref.current = _ref;
-        }}
+        ref={scrollRef}
         scrollEventThrottle={16}
         overScrollMode="auto"
         onScroll={scrollHandler}

src/components/containers/ScrollView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, { useAnimatedRef } from 'react-native-reanimated';
@@ -25,16 +25,17 @@ const ScrollViewWithHeadersInputComp = (
     onScrollEndDrag,
     onMomentumScrollBegin,
     onMomentumScrollEnd,
-    disableAutoFixScroll,
+    disableAutoFixScroll = false,
     children,
     /** At the moment, we will not allow overriding of this since the scrollHandler needs it. */
     onScroll: _unusedOnScroll,
     ...rest
   }: AnimatedScrollViewProps & SharedScrollContainerProps,
-  ref: React.Ref<Animated.ScrollView>
+  ref: React.Ref<Animated.ScrollView | null>
 ) => {
   const insets = useSafeAreaInsets();
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  useImperativeHandle(ref, () => scrollRef.current);
 
   const {
     scrollY,
@@ -61,12 +62,7 @@ const ScrollViewWithHeadersInputComp = (
     >
       {HeaderComponent({ showNavBar })}
       <Animated.ScrollView
-        ref={(_ref) => {
-          // @ts-ignore
-          scrollRef.current = _ref;
-          // @ts-ignore
-          if (ref) ref.current = _ref;
-        }}
+        ref={scrollRef}
         scrollEventThrottle={16}
         overScrollMode="auto"
         onScroll={scrollHandler}

src/components/containers/SectionList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useImperativeHandle } from 'react';
 import { View, SectionList, StyleSheet, SectionListProps } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, { useAnimatedRef } from 'react-native-reanimated';
@@ -32,7 +32,7 @@ const SectionListWithHeadersInputComp = <ItemT extends any = any, SectionT = Def
     onMomentumScrollEnd,
     ignoreLeftSafeArea,
     ignoreRightSafeArea,
-    disableAutoFixScroll,
+    disableAutoFixScroll = false,
     /** At the moment, we will not allow overriding of this since the scrollHandler needs it. */
     onScroll: _unusedOnScroll,
     ...rest
@@ -41,6 +41,7 @@ const SectionListWithHeadersInputComp = <ItemT extends any = any, SectionT = Def
 ) => {
   const insets = useSafeAreaInsets();
   const scrollRef = useAnimatedRef<any>();
+  useImperativeHandle(ref, () => scrollRef.current);
 
   const {
     scrollY,
@@ -67,12 +68,7 @@ const SectionListWithHeadersInputComp = <ItemT extends any = any, SectionT = Def
     >
       {HeaderComponent({ showNavBar })}
       <AnimatedSectionList
-        ref={(_ref) => {
-          // @ts-ignore
-          scrollRef.current = _ref;
-          // @ts-ignore
-          if (ref) ref.current = _ref;
-        }}
+        ref={scrollRef}
         scrollEventThrottle={16}
         overScrollMode="auto"
         onScroll={scrollHandler}

tsconfig.json

@@ -25,6 +25,6 @@
     "strict": true,
     "target": "esnext"
   },
-  "include": ["src", "babel.config.js"],
-  "exclude": ["node_modules", "lib", "docs", "example"]
+  "include": ["src", "babel.config.js", "example"],
+  "exclude": ["node_modules", "lib", "docs"]
 }