Mobile: Fixes laurent22#7918: Unrevert laurent22#7953: Migrate to rea…

…ct-native-drawer-layout (laurent22#8379)

.eslintignore

@@ -407,7 +407,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

.eslintrc.js

@@ -42,6 +42,8 @@ module.exports = {
 		'zxcvbn': 'readonly',
 
 		'tinymce': 'readonly',
+
+		'JSX': 'readonly',
 	},
 	'parserOptions': {
 		'ecmaVersion': 2018,

.gitignore

@@ -393,7 +393,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

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

@@ -475,10 +475,39 @@ PODS:
     - React-Core
   - RNFS (2.20.0):
     - React-Core
+  - RNGestureHandler (2.9.0):
+    - React-Core
   - RNLocalize (3.0.0):
     - React-Core
   - RNQuickAction (0.3.13):
     - React
+  - RNReanimated (3.1.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - 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):
@@ -583,8 +612,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`)
@@ -729,10 +760,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:
@@ -817,8 +852,10 @@ SPEC CHECKSUMS:
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
+  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNLocalize: 5944c97d2fe8150913a51ddd5eab4e23a82bd80d
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
+  RNReanimated: b1220a0e5168745283ff5d53bfc7d2144b2cee1b
   RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

packages/app-mobile/package.json

@@ -46,11 +46,13 @@
     "react-native-device-info": "10.6.0",
     "react-native-dialogbox": "0.6.10",
     "react-native-document-picker": "8.2.1",
+    "react-native-drawer-layout": "3.2.0",
     "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.9.0",
     "react-native-get-random-values": "1.9.0",
     "react-native-image-picker": "5.4.2",
     "react-native-image-resizer": "1.4.5",
@@ -59,11 +61,11 @@
     "react-native-paper": "5.8.0",
     "react-native-popup-menu": "0.16.1",
     "react-native-quick-actions": "0.3.13",
+    "react-native-reanimated": "3.1.0",
     "react-native-rsa-native": "2.0.5",
     "react-native-safe-area-context": "4.5.3",
     "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 } 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');
@@ -116,6 +116,9 @@ 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 { ReactNode } from 'react';
+
+type SideMenuPosition = 'left' | 'right';
 
 const logger = Logger.create('root');
 
@@ -712,7 +715,6 @@ class AppComponent extends React.Component {
 		super();
 
 		this.state = {
-			sideMenuContentOpacity: new Animated.Value(0),
 			sideMenuWidth: this.getSideMenuWidth(),
 			sensorInfo: null,
 		};
@@ -956,8 +958,8 @@ class AppComponent extends React.Component {
 		if (this.props.appState !== 'ready') return null;
 		const theme: Theme = themeStyle(this.props.themeId);
 
-		let sideMenuContent = null;
-		let menuPosition = 'left';
+		let sideMenuContent: ReactNode = null;
+		let menuPosition: SideMenuPosition = 'left';
 
 		if (this.props.routeName === 'Note') {
 			sideMenuContent = <SafeAreaView style={{ flex: 1, backgroundColor: theme.backgroundColor }}><SideMenuContentNote options={this.props.noteSideMenuOptions}/></SafeAreaView>;
@@ -996,18 +998,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 }}>
@@ -1024,7 +1028,7 @@ class AppComponent extends React.Component {
 							/> }
 						</SafeAreaView>
 					</MenuContext>
-				</SideMenu>
+				</Drawer>
 			</View>
 		);