how to resolve conflict render item swipeable vs top tab bar swipeable screen

Question

i have one project in react native. i create one TopTabbar component like this :

<Tab.Navigator
  tabBar={(props) => <CustomTopBar {...props} sort={_resetSort} />}
  initialRouteName={"Coins"}
  backBehavior="none"
  screenOptions={{
     lazy: true,
  }}
   sceneContainerStyle={{ backgroundColor: color.PRIMARY_BACKGROUND_COLOR }}>

      <Tab.Screen name="Tab1" component={Tab1} />
      <Tab.Screen name="Tab2" children={
                    ({ navigation, route }) => <Tab2 route={route} navigation={navigation} currentRef={_setCurrentRef} />
                }/>                
      <Tab.Screen name="Tab3" children={({ navigation }) => (<Tab3 route={parentRoute} focus={(status: boolean) => focusBreaking(status)} navigation={navigation} currentRef={_setCurrentRef} />)} />
</Tab.Navigator>

in my tab2 i have flashlist for display my items.

this is my tab2 codes :

<FlashList
  ref={ref}
   data={coins}
   renderItem={_renderItem}
   estimatedItemSize={60}
   onEndReached={extraPage}
   onEndReachedThreshold={2}
   onScroll={_onScroll}
   ListFooterComponent={!fetchingExtraError ? _renderFooter : null}
   refreshControl={<RefreshControl tintColor={color.TAB_COLOR_ACTIVE} onRefresh={onRefresh} refreshing={refreshing} />}
/>

and this is my renderItem :

const _renderItem = ({ item,index }: { item: ICoin,index:any }) =>
        <AppleStyleSwipeableRow>
            <CoinItem coin={item} onPress={onPress} onLongPress={onLongPress} onPressBuy={onPressBuy} coin_list />
        </AppleStyleSwipeableRow>

this code is my swipeable component for swipe items (i use Swipeable from react-native-gesture-handler/Swipeable) :

import React, { useRef } from 'react'; import { Animated, StyleSheet, Text, View, I18nManager, Dimensions, PanResponder, GestureResponderEvent } from 'react-native';

import { PanGestureHandler, RectButton, State } from 'react-native-gesture-handler';

import Swipeable from 'react-native-gesture-handler/Swipeable'; import { useAnimatedGestureHandler } from 'react-native-reanimated';

const AppleStyleSwipeableRow = ({ children }: any) => {
  const swipeableRow = useRef<any>(null);

  

  const renderRightAction = (text: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | null | undefined, color: string, x: number, progress: { interpolate: (arg0: { inputRange: number[]; outputRange: any[]; }) => any; }) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [x, 0],
    });

    const pressHandler = () => {
      close();
      // eslint-disable-next-line no-alert
    };
    return (
      <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
        <RectButton
          style={[styles.rightAction, { backgroundColor: color }]}
          onPress={pressHandler}
        >
          <Text style={styles.actionText}>{text}</Text>
        </RectButton>
      </Animated.View>
    );
  };

  const renderRightActions = (progress: { interpolate: (arg0: { inputRange: number[]; outputRange: any[]; }) => any; }, _dragAnimatedValue: any) => {
    return (
      <View
      style={{
        width: 128,
        flexDirection: 'row',
        // flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
      }}>
      {renderRightAction('Flag', '#ffab00', 128, progress)}
      {renderRightAction('More', '#dd2c00', 64, progress)}
      </View>
    )
  }

  const updateRef = (ref: any) => {
    swipeableRow.current = ref;
  };

  const close = () => {
    swipeableRow.current.close();
  };
  return (
    <Swipeable
      ref={updateRef}
      friction={2}
      enableTrackpadTwoFingerGesture
      rightThreshold={40}
      renderRightActions={renderRightActions}
      onSwipeableOpen={(direction) => {
        if(direction == 'left') return
        console.log(`Opening swipeable from the ${direction}`);
      }}
      onSwipeableClose={(direction) => {
        if(direction == 'left') return
        console.log(`Closing swipeable to the ${direction}`);
      }}>
      {children}
    </Swipeable>
  );
};

const styles = StyleSheet.create({
  leftAction: {
    flex: 1,
    backgroundColor: '#497AFC',
    justifyContent: 'center',
  },
  actionText: {
    color: 'white',
    fontSize: 16,
    backgroundColor: 'transparent',
    padding: 10,
  },
  rightAction: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
});

export default AppleStyleSwipeableRow;

now i have one big problem : I want my item to be swiped when the user swipes from the right side within the range of 40, and when user swipes outside this range (width - 40), my screen top tab bar will be swiped and my item swipe will not work. i use hitSlop for Swipeable component but not working!!!