Revert "Mobile: Resolves laurent22#8791: Revert to `react-native-side…

…menu-updated` for navigation drawers" (laurent22#8810)

.eslintignore

@@ -449,7 +449,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js
 packages/app-mobile/components/ScreenHeader.js
 packages/app-mobile/components/SelectDateTimeDialog.js
-packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/biometrics/BiometricPopup.js

.gitignore

@@ -435,7 +435,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js
 packages/app-mobile/components/ScreenHeader.js
 packages/app-mobile/components/SelectDateTimeDialog.js
-packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/biometrics/BiometricPopup.js

.yarn/patches/react-native-animation-fix/react-native-reanimated-npm-3.3.0-fb4272741c.patch

@@ -0,0 +1,27 @@
+diff --git a/android/src/main/java/com/swmansion/reanimated/NodesManager.java b/android/src/main/java/com/swmansion/reanimated/NodesManager.java
+index e974f8eb827a35be4d7e5fa9b096af9387c595dd..bc9e5ff566c9484274e8eacefc88327a5ff30def 100644
+--- a/android/src/main/java/com/swmansion/reanimated/NodesManager.java
++++ b/android/src/main/java/com/swmansion/reanimated/NodesManager.java
+@@ -34,7 +34,7 @@ import java.util.List;
+ import java.util.Map;
+ import java.util.Queue;
+ import java.util.Set;
+-import java.util.concurrent.ConcurrentLinkedQueue;
++import java.util.concurrent.LinkedBlockingQueue;
+ import java.util.concurrent.Semaphore;
+ import java.util.concurrent.TimeUnit;
+ import java.util.concurrent.atomic.AtomicBoolean;
+@@ -80,7 +80,12 @@ public class NodesManager implements EventDispatcherListener {
+   private ReactApplicationContext mReactApplicationContext;
+   private RCTEventEmitter mCustomEventHandler;
+   private List<OnAnimationFrame> mFrameCallbacks = new ArrayList<>();
+-  private ConcurrentLinkedQueue<CopiedEvent> mEventQueue = new ConcurrentLinkedQueue<>();
++
++  // Patch: On some versions of Android, ConcurrentLinkedQueue is known to
++  // drop items. LinkedBlockingQueue is a potentially-slower alternative that
++  // should not drop items.
++  // See https://github.com/laurent22/joplin/issues/8425
++  private LinkedBlockingQueue<CopiedEvent> mEventQueue = new LinkedBlockingQueue<>();
+   public double currentFrameTimeMs;
+   public Set<String> uiProps = Collections.emptySet();
+   public Set<String> nativeProps = Collections.emptySet();

package.json

@@ -102,6 +102,7 @@
     "eslint@8.43.0": "patch:eslint@npm%3A8.39.0#./.yarn/patches/eslint-npm-8.39.0-d92bace04d.patch",
     "eslint@^8.13.0": "patch:eslint@npm%3A8.39.0#./.yarn/patches/eslint-npm-8.39.0-d92bace04d.patch",
     "app-builder-lib@24.4.0": "patch:app-builder-lib@npm%3A24.4.0#./.yarn/patches/app-builder-lib-npm-24.4.0-05322ff057.patch",
-    "react-native@0.71.10": "patch:react-native@npm%3A0.71.10#./.yarn/patches/react-native-animation-fix/react-native-npm-0.71.10-f9c32562d8.patch"
+    "react-native@0.71.10": "patch:react-native@npm%3A0.71.10#./.yarn/patches/react-native-animation-fix/react-native-npm-0.71.10-f9c32562d8.patch",
+    "react-native-reanimated@3.3.0": "patch:react-native-reanimated@npm%3A3.3.0#./.yarn/patches/react-native-animation-fix/react-native-reanimated-npm-3.3.0-fb4272741c.patch"
   }
 }

packages/app-mobile/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
 	presets: ['module:metro-react-native-babel-preset'],
+	plugins: ['react-native-reanimated/plugin'],
 };

packages/app-mobile/index.js

@@ -10,6 +10,9 @@
 import 'react-native-get-random-values';
 import 'react-native-url-polyfill/auto';
 
+// Set up required for react-native-drawer-layout (See: https://reactnavigation.org/docs/drawer-layout/ v6.x)
+import 'react-native-gesture-handler';
+
 import { LogBox, AppRegistry } from 'react-native';
 const Root = require('./root').default;
 

packages/app-mobile/ios/Podfile.lock

@@ -408,10 +408,41 @@ PODS:
     - React-Core
   - RNFS (2.20.0):
     - React-Core
+  - RNGestureHandler (2.12.1):
+    - React-Core
   - RNLocalize (3.0.2):
     - React-Core
   - RNQuickAction (0.3.13):
     - React
+  - RNReanimated (3.3.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNSecureRandom (1.0.1):
     - React
   - RNShare (8.2.2):
@@ -490,8 +521,10 @@ DEPENDENCIES:
   - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNFileViewer (from `../node_modules/react-native-file-viewer`)
   - RNFS (from `../node_modules/react-native-fs`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNQuickAction (from `../node_modules/react-native-quick-actions`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSecureRandom (from `../node_modules/react-native-securerandom`)
   - RNShare (from `../node_modules/react-native-share`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -623,10 +656,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-file-viewer"
   RNFS:
     :path: "../node_modules/react-native-fs"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
   RNQuickAction:
     :path: "../node_modules/react-native-quick-actions"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSecureRandom:
     :path: "../node_modules/react-native-securerandom"
   RNShare:
@@ -700,8 +737,10 @@ SPEC CHECKSUMS:
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
+  RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
   RNLocalize: dbea38dcb344bf80ff18a1757b1becf11f70cae4
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
+  RNReanimated: 9976fbaaeb8a188c36026154c844bf374b3b7eeb
   RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

packages/app-mobile/package.json

@@ -48,23 +48,25 @@
     "react-native-device-info": "10.8.0",
     "react-native-dialogbox": "0.6.10",
     "react-native-document-picker": "9.0.1",
+    "react-native-drawer-layout": "3.2.1",
     "react-native-dropdownalert": "4.5.1",
     "react-native-exit-app": "1.1.0",
     "react-native-file-viewer": "2.1.5",
     "react-native-fingerprint-scanner": "6.0.0",
     "react-native-fs": "2.20.0",
+    "react-native-gesture-handler": "2.12.1",
     "react-native-get-random-values": "1.9.0",
     "react-native-image-picker": "5.6.0",
     "react-native-localize": "3.0.2",
     "react-native-modal-datetime-picker": "15.0.1",
     "react-native-paper": "5.9.1",
     "react-native-popup-menu": "0.16.1",
     "react-native-quick-actions": "0.3.13",
+    "react-native-reanimated": "3.3.0",
     "react-native-rsa-native": "2.0.5",
     "react-native-safe-area-context": "4.7.1",
     "react-native-securerandom": "1.0.1",
     "react-native-share": "8.2.2",
-    "react-native-side-menu-updated": "1.3.2",
     "react-native-sqlite-storage": "6.0.1",
     "react-native-url-polyfill": "1.3.0",
     "react-native-vector-icons": "9.2.0",

packages/app-mobile/root.tsx

@@ -28,7 +28,7 @@ import SyncTargetJoplinCloud from '@joplin/lib/SyncTargetJoplinCloud';
 import SyncTargetOneDrive from '@joplin/lib/SyncTargetOneDrive';
 import initProfile from '@joplin/lib/services/profileConfig/initProfile';
 const VersionInfo = require('react-native-version-info').default;
-const { Keyboard, BackHandler, Animated, View, StatusBar, Platform, Dimensions } = require('react-native');
+const { Keyboard, BackHandler, View, StatusBar, Platform, Dimensions } = require('react-native');
 import { AppState as RNAppState, EmitterSubscription, Linking, NativeEventSubscription, Appearance } from 'react-native';
 import getResponsiveValue from './components/getResponsiveValue';
 import NetInfo from '@react-native-community/netinfo';
@@ -67,7 +67,7 @@ const { OneDriveLoginScreen } = require('./components/screens/onedrive-login.js'
 import EncryptionConfigScreen from './components/screens/encryption-config';
 const { DropboxLoginScreen } = require('./components/screens/dropbox-login.js');
 const { MenuContext } = require('react-native-popup-menu');
-import SideMenu from './components/SideMenu';
+import { Drawer } from 'react-native-drawer-layout';
 import SideMenuContent from './components/side-menu-content';
 const { SideMenuContentNote } = require('./components/side-menu-content-note.js');
 const { DatabaseDriverReactNative } = require('./utils/database-driver-react-native');
@@ -117,8 +117,8 @@ import ProfileEditor from './components/ProfileSwitcher/ProfileEditor';
 import sensorInfo, { SensorInfo } from './components/biometrics/sensorInfo';
 import { getCurrentProfile } from '@joplin/lib/services/profileConfig';
 import { getDatabaseName, getProfilesRootDir, getResourceDir, setDispatch } from './services/profiles';
-import userFetcher, { initializeUserFetcher } from '@joplin/lib/utils/userFetcher';
 import { ReactNode } from 'react';
+import userFetcher, { initializeUserFetcher } from '@joplin/lib/utils/userFetcher';
 import { parseShareCache } from '@joplin/lib/services/share/reducer';
 import autodetectTheme, { onSystemColorSchemeChange } from './utils/autodetectTheme';
 
@@ -748,7 +748,6 @@ class AppComponent extends React.Component {
 		super();
 
 		this.state = {
-			sideMenuContentOpacity: new Animated.Value(0),
 			sideMenuWidth: this.getSideMenuWidth(),
 			sensorInfo: null,
 		};
@@ -1042,18 +1041,20 @@ class AppComponent extends React.Component {
 
 		const mainContent = (
 			<View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
-				<SideMenu
-					menu={sideMenuContent}
-					edgeHitWidth={5}
-					openMenuOffset={this.state.sideMenuWidth}
-					menuPosition={menuPosition}
-					onChange={(isOpen: boolean) => this.sideMenu_change(isOpen)}
-					onSliding={(percent: number) => {
-						this.props.dispatch({
-							type: 'SIDE_MENU_OPEN_PERCENT',
-							value: percent,
-						});
+				<Drawer
+					// Need to reset the key here based on menu position, otherwise
+					// the drawer will flash open on screen and close every time the
+					// drawer position switches (i.e. when opening or closing a note)
+					key={`main-drawer-${menuPosition}`}
+					open={this.props.showSideMenu}
+					onOpen={() => this.sideMenu_change(true)}
+					onClose={() => this.sideMenu_change(false)}
+					drawerPosition={menuPosition}
+					swipeEdgeWidth={15}
+					drawerStyle={{
+						width: this.state.sideMenuWidth,
 					}}
+					renderDrawerContent={() => sideMenuContent}
 				>
 					<StatusBar barStyle={statusBarStyle} />
 					<MenuContext style={{ flex: 1 }}>
@@ -1070,7 +1071,7 @@ class AppComponent extends React.Component {
 							/> }
 						</SafeAreaView>
 					</MenuContext>
-				</SideMenu>
+				</Drawer>
 			</View>
 		);