fix(activity): scrolling issue for ActivityFiltered screen (#884)

Author: pwltr

src/components/DetectSwipe.tsx

@@ -1,7 +1,12 @@
-import React, { memo, ReactElement, useRef } from 'react';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import React, { memo, MutableRefObject, ReactElement, useRef } from 'react';
+import {
+	GestureDetector,
+	Gesture,
+	GestureType,
+} from 'react-native-gesture-handler';
 
 export interface IDetectSwipe {
+	panGestureRef?: MutableRefObject<GestureType>;
 	onSwipeLeft?: () => void;
 	onSwipeRight?: () => void;
 	onSwipeUp?: () => void;
@@ -14,6 +19,7 @@ export interface IDetectSwipe {
 }
 
 const DetectSwipe = ({
+	panGestureRef,
 	onSwipeLeft,
 	onSwipeRight,
 	onSwipeUp,
@@ -24,41 +30,41 @@ const DetectSwipe = ({
 	swipeDownSensitivity = 600,
 	children,
 }: IDetectSwipe): ReactElement => {
-	const acticated = useRef(false);
+	const activated = useRef(false);
 
-	const gesture = Gesture.Pan()
+	let gesture = Gesture.Pan()
 		.runOnJS(true)
 		.minDistance(10)
 		.onUpdate((event) => {
-			if (acticated.current) {
+			if (activated.current) {
 				return;
 			}
 
 			if (onSwipeLeft && event.velocityX <= -swipeLeftSensitivity) {
-				//Swiping left
 				onSwipeLeft();
-				acticated.current = true;
+				activated.current = true;
 			}
 			if (onSwipeRight && event.velocityX >= swipeRightSensitivity) {
-				//Swiping right.
 				onSwipeRight();
-				acticated.current = true;
+				activated.current = true;
 			}
 			if (onSwipeUp && event.velocityY <= -swipeUpSensitivity) {
-				//Swiping up
 				onSwipeUp();
-				acticated.current = true;
+				activated.current = true;
 			}
 			if (onSwipeDown && event.velocityY >= swipeDownSensitivity) {
-				//Swiping down.
 				onSwipeDown();
-				acticated.current = true;
+				activated.current = true;
 			}
 		})
 		.onFinalize(() => {
-			acticated.current = false;
+			activated.current = false;
 		});
 
+	if (panGestureRef) {
+		gesture = gesture.withRef(panGestureRef);
+	}
+
 	return <GestureDetector gesture={gesture}>{children}</GestureDetector>;
 };
 

src/screens/Activity/ActivityFiltered.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement, memo, useMemo, useState } from 'react';
+import React, { ReactElement, memo, useMemo, useState, useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Gesture, GestureType } from 'react-native-gesture-handler';
 import {
 	StyleSheet,
 	TouchableOpacity,
@@ -56,6 +57,7 @@ const ActivityFiltered = ({
 	navigation,
 }: WalletScreenProps<'ActivityFiltered'>): ReactElement => {
 	const insets = useSafeAreaInsets();
+	const panGestureRef = useRef<GestureType>(Gesture.Pan());
 	const [radiusContainerHeight, setRadiusContainerHeight] = useState(0);
 	const [currentTab, setCurrentTab] = useState(0);
 	const [search, setSearch] = useState('');
@@ -135,10 +137,16 @@ const ActivityFiltered = ({
 					</BlurView>
 				</View>
 
-				<DetectSwipe onSwipeLeft={onSwipeLeft} onSwipeRight={onSwipeRight}>
+				<DetectSwipe
+					panGestureRef={panGestureRef}
+					swipeLeftSensitivity={1500}
+					swipeRightSensitivity={1500}
+					onSwipeLeft={onSwipeLeft}
+					onSwipeRight={onSwipeRight}>
 					<View style={styles.txListContainer}>
 						<ActivityList
 							style={styles.txList}
+							panGestureRef={panGestureRef}
 							showTitle={false}
 							contentContainerStyle={activityPadding}
 							progressViewOffset={radiusContainerHeight + 10}

src/screens/Activity/ActivityList.tsx

@@ -4,9 +4,9 @@ import React, {
 	useCallback,
 	useState,
 	useMemo,
+	MutableRefObject,
 } from 'react';
 import {
-	FlatList,
 	NativeScrollEvent,
 	NativeSyntheticEvent,
 	StyleProp,
@@ -15,6 +15,7 @@ import {
 } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
+import { FlatList, GestureType } from 'react-native-gesture-handler';
 
 import { RefreshControl } from '../../styles/components';
 import { Caption13Up, Subtitle, Text01S } from '../../styles/text';
@@ -34,19 +35,21 @@ const ListHeaderComponent = memo(
 );
 
 const ActivityList = ({
-	onScroll,
 	style,
+	panGestureRef,
 	contentContainerStyle,
 	progressViewOffset,
 	showTitle = true,
 	filter = {},
+	onScroll,
 }: {
-	onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 	style?: StyleProp<ViewStyle>;
+	panGestureRef?: MutableRefObject<GestureType>;
 	contentContainerStyle?: StyleProp<ViewStyle>;
 	progressViewOffset?: number;
 	showTitle?: boolean;
 	filter?: {};
+	onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 }): ReactElement => {
 	const navigation = useNavigation<RootNavigationProp>();
 	const items = useSelector(activityItemsSelector);
@@ -91,13 +94,17 @@ const ActivityList = ({
 		setRefreshing(false);
 	};
 
+	const simultaneousHandlers = panGestureRef ? [panGestureRef] : [];
+
 	return (
 		<FlatList
-			onScroll={onScroll}
 			style={[styles.content, style]}
+			simultaneousHandlers={simultaneousHandlers}
 			contentContainerStyle={contentContainerStyle}
+			showsVerticalScrollIndicator={false}
 			data={groupedItems}
 			renderItem={renderItem}
+			onScroll={onScroll}
 			keyExtractor={(item): string => {
 				return typeof item === 'string' ? item : item.id;
 			}}