Get home screen's swipable pager working with the drawer

2023-03-16 19:09:19 -05:00 · 2023-03-16 19:09:19 -05:00 · f01d43f9e8
parent c50a20d214
commit f01d43f9e8
9 changed files with 206 additions and 15 deletions
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -388,6 +388,8 @@ PODS:
    - React-Core
  - react-native-image-resizer (3.0.5):
    - React-Core
+  - react-native-pager-view (6.1.4):
+    - React-Core
  - react-native-paste-input (0.6.2):
    - React-Core
    - Swime (= 3.0.6)
@ -614,6 +616,7 @@ DEPENDENCIES:
  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
  - "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)"
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
  - "react-native-paste-input (from `../node_modules/@mattermost/react-native-paste-input`)"
  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
  - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
@ -747,6 +750,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/@react-native-camera-roll/camera-roll"
  react-native-image-resizer:
    :path: "../node_modules/@bam.tech/react-native-image-resizer"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
  react-native-paste-input:
    :path: "../node_modules/@mattermost/react-native-paste-input"
  react-native-safe-area-context:
@ -865,6 +870,7 @@ SPEC CHECKSUMS:
  react-native-blur: 50c9feabacbc5f49b61337ebc32192c6be7ec3c3
  react-native-cameraroll: cb752fda6d5268f1646b4390bd5be1f27706b9a0
  react-native-image-resizer: 00ceb0e05586c7aadf061eea676957a6c2ec60fa
+  react-native-pager-view: b58cb9e9f42f64e50cab3040815772c1d119a2e2
  react-native-paste-input: 3392800944a47c00dddbff23c31c281482209679
  react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
  react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
--- a/package.json
+++ b/package.json
@ -3,6 +3,7 @@
  "version": "1.7.0",
  "private": true,
  "scripts": {
+    "postinstall": "patch-package",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
@ -75,6 +76,8 @@
    "mobx": "^6.6.1",
    "mobx-react-lite": "^3.4.0",
    "normalize-url": "^8.0.0",
+    "patch-package": "^6.5.1",
+    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-avatar-editor": "^13.0.0",
    "react-circular-progressbar": "^2.1.0",
@ -90,6 +93,7 @@
    "react-native-image-crop-picker": "^0.38.1",
    "react-native-inappbrowser-reborn": "^3.6.3",
    "react-native-linear-gradient": "^2.6.2",
+    "react-native-pager-view": "^6.1.4",
    "react-native-progress": "bluesky-social/react-native-progress",
    "react-native-reanimated": "~2.14.4",
    "react-native-root-siblings": "^4.1.1",
@ -97,7 +101,6 @@
    "react-native-screens": "^3.13.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.4.0",
-    "react-native-tab-view": "^3.3.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.1",
    "react-native-version-number": "^0.3.6",
--- a/patches/react-native-pager-view+6.1.4.patch
+++ b/patches/react-native-pager-view+6.1.4.patch
@ -0,0 +1,54 @@
+diff --git a/node_modules/react-native-pager-view/ios/ReactNativePageView.m b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+index ab0fc7f..fbbf19f 100644
+--- a/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+++ b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
+@@ -1,6 +1,6 @@
+ 
+ #import "ReactNativePageView.h"
+-#import "React/RCTLog.h"
+#import <React/RCTLog.h>
+ #import <React/RCTViewManager.h>
+ 
+ #import "UIViewController+CreateExtension.h"
+@@ -9,7 +9,7 @@
+ #import "RCTOnPageSelected.h"
+ #import <math.h>
+ 
+-@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
+@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
+ 
+ @property(nonatomic, strong) UIPageViewController *reactPageViewController;
+ @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
+@@ -80,6 +80,10 @@
+         [self setupInitialController];
+     }
+ 
+    UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
+    panGestureRecognizer.delegate = self;
+    [self addGestureRecognizer: panGestureRecognizer];
+
+     if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) {
+         [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer];
+     }
+@@ -463,4 +467,21 @@
+ - (BOOL)isLtrLayout {
+     return [_layoutDirection isEqualToString:@"ltr"];
+ }
+
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
+    if (otherGestureRecognizer == self.scrollView.panGestureRecognizer) {
+        UIPanGestureRecognizer* p = (UIPanGestureRecognizer*) gestureRecognizer;
+        CGPoint velocity = [p velocityInView:self];
+        if (self.currentIndex == 0 && velocity.x > 0) {
+            self.scrollView.panGestureRecognizer.enabled = false;
+            return NO;
+        } else {
+            self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
+        }
+    } else {
+        self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
+    }
+    
+    return YES;
+}
+ @end
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@ -4,8 +4,10 @@ import {Linking} from 'react-native'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import SplashScreen from 'react-native-splash-screen'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {observer} from 'mobx-react-lite'
 import {ThemeProvider} from 'lib/ThemeContext'
+import {s} from 'lib/styles'
 import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell'
@ -51,9 +53,11 @@ const App = observer(() => {
      <RootSiblingParent>
        <analytics.Provider>
          <RootStoreProvider value={rootStore}>
-            <SafeAreaProvider>
-              <Shell />
-            </SafeAreaProvider>
+            <GestureHandlerRootView style={s.h100pct}>
+              <SafeAreaProvider>
+                <Shell />
+              </SafeAreaProvider>
+            </GestureHandlerRootView>
          </RootStoreProvider>
        </analytics.Provider>
      </RootSiblingParent>
--- a/src/lib/api/feed-manip.ts
+++ b/src/lib/api/feed-manip.ts
@ -140,7 +140,8 @@ export class FeedTuner {
      for (const item of slice.items) {
        this.seenUris.add(item.post.uri)
      }
-      slice.logSelf()
+      // DEBUG uncomment to get a quick view of the data
+      // slice.logSelf()
    }

    return slices
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@ -122,6 +122,7 @@ export class ShellUiModel {
  darkMode = false
  minimalShellMode = false
  isDrawerOpen = false
+  isDrawerSwipeDisabled = false
  isModalActive = false
  activeModals: Modal[] = []
  isLightboxActive = false
@ -168,6 +169,10 @@ export class ShellUiModel {
    this.isDrawerOpen = false
  }

+  setIsDrawerSwipeDisabled(v: boolean) {
+    this.isDrawerSwipeDisabled = v
+  }
+
  openModal(modal: Modal) {
    this.rootStore.emitNavigation()
    this.isModalActive = true
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, View} from 'react-native'
+import {FlatList, StyleSheet, View, useWindowDimensions} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
@ -9,15 +9,73 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {WelcomeBanner} from '../com/util/WelcomeBanner'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'

+import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
+import {Text} from 'view/com/util/text/Text'
+
 const HEADER_HEIGHT = 42

+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
+export const HomeScreen = withAuthRequired((_opts: Props) => {
+  const store = useStores()
+  const onPageSelected = React.useCallback(
+    (e: PagerViewOnPageSelectedEvent) => {
+      store.shell.setIsDrawerSwipeDisabled(e.nativeEvent.position > 0)
+    },
+    [store],
+  )
+
+  useFocusEffect(
+    React.useCallback(() => {
+      return () => {
+        store.shell.setIsDrawerSwipeDisabled(false)
+      }
+    }, [store]),
+  )
+
+  return (
+    <PagerView
+      style={{height: '100%'}}
+      initialPage={0}
+      onPageSelected={onPageSelected}>
+      <View key="1">
+        <MyPage>First page</MyPage>
+      </View>
+      <View key="2">
+        <MyPage>Second page</MyPage>
+      </View>
+    </PagerView>
+  )
+})
+function MyPage({children}) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        backgroundColor: 'white',
+      }}>
+      <Text>{children}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flexDirection: 'row',
+  },
+})
+/*
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
  observer(function Home(_opts: Props) {
@ -113,3 +171,4 @@ export const HomeScreen = withAuthRequired(
    )
  }),
 )
+*/
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@ -46,7 +46,11 @@ const ShellInner = observer(() => {
            onOpen={onOpenDrawer}
            onClose={onCloseDrawer}
            swipeEdgeWidth={winDim.width}
-            swipeEnabled={!canGoBack && store.session.hasSession}>
+            swipeEnabled={
+              !canGoBack &&
+              store.session.hasSession &&
+              !store.shell.isDrawerSwipeDisabled
+            }>
            <TabsNavigator />
          </Drawer>
        </ErrorBoundary>
--- a/yarn.lock
+++ b/yarn.lock
@ -4002,6 +4002,11 @@
  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==

+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 "@zxing/text-encoding@^0.9.0":
  version "0.9.0"
  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
@ -7742,7 +7747,7 @@ find-up@^5.0.0, find-up@~5.0.0:
    locate-path "^6.0.0"
    path-exists "^4.0.0"

-find-yarn-workspace-root@~2.0.0:
+find-yarn-workspace-root@^2.0.0, find-yarn-workspace-root@~2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
@ -8786,6 +8791,13 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==

+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
 is-core-module@^2.11.0, is-core-module@^2.9.0:
  version "2.11.0"
  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@ -10435,6 +10447,13 @@ kind-of@^6.0.0, kind-of@^6.0.2:
  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==

+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
 kleur@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@ -11912,6 +11931,14 @@ open@^6.2.0:
  dependencies:
    is-wsl "^1.1.0"

+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 open@^8.0.4, open@^8.0.9, open@^8.3.0, open@^8.4.0:
  version "8.4.2"
  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
@ -12170,6 +12197,26 @@ password-prompt@^1.0.4:
    ansi-escapes "^3.1.0"
    cross-spawn "^6.0.5"

+patch-package@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.5.1.tgz#3e5d00c16997e6160291fee06a521c42ac99b621"
+  integrity sha512-I/4Zsalfhc6bphmJTlrLoOcAF87jcxko4q0qsv4bGcurbr8IskEOtdnt9iCmsQVGL1B+iUhSQqweyTLJfCF9rA==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^4.1.2"
+    cross-spawn "^6.0.5"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^9.0.0"
+    is-ci "^2.0.0"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.6"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^5.6.0"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+    yaml "^1.10.2"
+
 path-browserify@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
@ -12981,6 +13028,11 @@ postgres-interval@^1.1.0:
  dependencies:
    xtend "^4.0.0"

+postinstall-postinstall@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
+  integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==
+
 prebuild-install@^7.1.0, prebuild-install@^7.1.1:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@ -13618,6 +13670,11 @@ react-native-linear-gradient@^2.6.2:
  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.6.2.tgz#56598a76832724b2afa7889747635b5c80948f38"
  integrity sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==

+react-native-pager-view@^6.1.4:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.1.4.tgz#3a63ebd1b72f81991157ea552bb9c887e529bc8c"
+  integrity sha512-fmTwgGwPxGCBusKAq7gHzm+s1Yp0qh5rKPoQszaCuxrb+76KgK4Qe82jJNPUp2xTZOKSw+FbJU2QahF8ncTl+w==
+
 react-native-progress@bluesky-social/react-native-progress:
  version "5.0.0"
  resolved "https://codeload.github.com/bluesky-social/react-native-progress/tar.gz/5a372f4f2ce5feb26f4f47b6a4d187ab9b923ab4"
@ -13668,13 +13725,6 @@ react-native-svg@^13.4.0:
    css-select "^5.1.0"
    css-tree "^1.1.3"

-react-native-tab-view@^3.3.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.1.tgz#2ad454afc0e186b43ea8b89053f39180d480d48b"
-  integrity sha512-qdrS5t+AEhfuKQyuCXkwHu4IVppkuTvzWWlkSZKrPaSkjjIa32xrsGxt1UW9YDdro2w4AMw5hKn1hFmg/5mvzA==
-  dependencies:
-    use-latest-callback "^0.1.5"
-
 react-native-url-polyfill@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz#c1763de0f2a8c22cc3e959b654c8790622b6ef6a"
@ -14686,6 +14736,11 @@ sisteransi@^1.0.5:
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==

+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"