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

[kasiri182]

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!!!

[BingCoke]

same cofuse.I dont know how to deal with same area which all need recognize gesture.It seem like one area will cover other area.When one area be covered it gesture handler will not run.

[m-bert]

Hi! Could you please check if it works with new ReanimatedSwipeable? This is Swipeable component that we reimplemented with react-native-reanimated.