Combine Material Top Bar and Swipeable in React Native (Expo)

74 views Asked by At

I created a Material Top Tab exactly as described in this tutorial: https://reactnavigation.org/docs/material-top-tab-navigator

Then, on these pages, I have rows that can be swiped, and I took the rows from this tutorial: https://docs.swmansion.com/react-native-gesture-handler/docs/components/swipeable/

However, the problem now is that I can swipe the rows, but I can't swipe between pages because the swipe gestures for the rows are overlapping with the page swipe gestures.

To make the swipe for rows work only when dragging from the left edge for a left swipe and from the right edge for a right swipe, while swiping the center of the row swipes the screen, you may need to implement a custom gesture handler that takes into account the position where the swipe starts.

It's not real code cos I have a lot of strokes of code but it principe how I it use:

import React from 'react';
import { Animated, Text } from "react-native";
import { GestureHandlerRootView, RectButton } from "react-native-gesture-handler";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Swipeable from "react-native-gesture-handler/Swipeable";

const Test = () => {
  return (
    <GestureHandlerRootView>
      <Animated.FlatList
        showsVerticalScrollIndicator={false}
        data={DATA}
        renderItem={({ item, index }) => {
          return (
            <Swipeable
              renderLeftActions={renderLeftActions}
              renderRightActions={renderRightActions}
            >
              <RectButton>
                <Text>{item.from}</Text>
              </RectButton>
            </Swipeable>
          );
        }}
      />
    </GestureHandlerRootView>
  );
};

const TopTab = createMaterialTopTabNavigator();

const RootFolder = () => {
  return (
    <TopTab.Navigator>
      <TopTab.Screen
        name="Test"
        component={Test}
      />

      <TopTab.Screen
        name="Test"
        component={Test}
      />
    </TopTab.Navigator>
  );
};

export default RootFolder;

I've been searching all over the internet for several days and have asked ChatGPT in various ways, but I still can't find how to do this. This functionality is present, for example, in the mobile application Telegram on the iPhone, so it's possible. Maybe you can help with something, or perhaps there's an article that I haven't been able to find.

0

There are 0 answers