[RNMobile] Upgrade react-native-modal and other warning fixes (#32772)

* Upgrade to latest react-native-modal To fix "Animated.event now requires a second argument for options" caused by using a fairly old version of the lib. * Additional `npm install` managed to bump more instances * Revert "Additional `npm install` managed to bump more instances" This reverts commit 1e05044. * Manually bump the react-native-modal entry in package-lock.json * onSwipe is deprecated, use onSwipeComplete As per https://github.com/react-native-modal/react-native-modal/blob/b580105f4b2b4e1163bed1228f241b16ea17dacb/src/modal.tsx#L268-L272 * fetch() is deprecated for isScreenReaderEnabled See https://github.com/facebook/react-native/blob/v0.64.0/Libraries/Components/AccessibilityInfo/AccessibilityInfo.android.js#L94-L99 * Toolbar needs label set As per the doc https://github.com/WordPress/gutenberg/blob/7fc4197a6494c040fc3d4e491f22602e058fb126/packages/components/src/toolbar/index.js#L30-L35 * componentWillUnmount is deprecated, use componentDidMount Which is also the recommended way to add subscriptions. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#adding-event-listeners-or-subscriptions * Podfile.lock updated after `npm run core ios` * Revert "Toolbar needs label set" This reverts commit d6cf2f8. * Use ToolbarGroup in native mobile instead of label-less Toolbar Label-less Toolbar is deprecated https://github.com/WordPress/gutenberg/blob/7fc4197a6494c040fc3d4e491f22602e058fb126/packages/components/src/toolbar/index.js#L30-L35 Tried to add labels with d6cf2f8 but introduced issues: the keyboard dismiss button was out of place. * Revert "Podfile.lock updated after `npm run core ios`" This reverts commit ce1baea. * Temporary Metro patch until RN upgrades Metro Issue message: "Error: EISDIR: illegal operation on a directory, read" Fix PR on Metro: facebook/metro#567 * Animated.event needs is second param always set
WordPress · Jun 17, 2021 · 699cadc · 699cadc
1 parent 36af412
commit 699cadc
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/floating-toolbar/index.native.js b/packages/block-editor/src/components/floating-toolbar/index.native.js
@@ -6,7 +6,7 @@ import { Animated, Easing, View, Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, Toolbar } from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -83,7 +83,7 @@ const FloatingToolbar = ( {
 				pointerEvents={ showFloatingToolbar ? 'auto' : 'none' }
 			>
 				{ showNavUpButton && (
-					<Toolbar passedStyle={ styles.toolbar }>
+					<ToolbarGroup passedStyle={ styles.toolbar }>
 						<ToolbarButton
 							title={ __( 'Navigate Up' ) }
 							onClick={
@@ -93,7 +93,7 @@ const FloatingToolbar = ( {
 							icon={ <NavigateUpSVG isRTL={ isRTL } /> }
 						/>
 						<View style={ styles.pipe } />
-					</Toolbar>
+					</ToolbarGroup>
 				) }
 				<BlockSelectionButton
 					clientId={ blockSelectionButtonClientId }

diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
@@ -171,7 +171,7 @@ export class Inserter extends Component {
 	}
 
 	onInserterToggledAnnouncement( isOpen ) {
-		AccessibilityInfo.fetch().done( ( isEnabled ) => {
+		AccessibilityInfo.isScreenReaderEnabled().done( ( isEnabled ) => {
 			if ( isEnabled ) {
 				const isIOS = Platform.OS === 'ios';
 				const announcement = isOpen

diff --git a/packages/block-editor/src/components/ungroup-button/index.native.js b/packages/block-editor/src/components/ungroup-button/index.native.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -23,13 +23,13 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 		return null;
 	}
 	return (
-		<Toolbar>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Ungroup' ) }
 				icon={ UngroupIcon }
 				onClick={ onConvertFromGroup }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 }
 

diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js
@@ -92,10 +92,10 @@ function FocalPointPicker( props ) {
 					pan.extractOffset(); // Set offset to current value
 				},
 				// Move cursor to match delta drag
-				onPanResponderMove: Animated.event( [
-					null,
-					{ dx: pan.x, dy: pan.y },
-				] ),
+				onPanResponderMove: Animated.event(
+					[ null, { dx: pan.x, dy: pan.y } ],
+					{ useNativeDriver: false }
+				),
 				onPanResponderRelease: ( event ) => {
 					shouldEnableBottomSheetScroll( true );
 					pan.flattenOffset(); // Flatten offset into value

diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -495,7 +495,7 @@ class BottomSheet extends Component {
 				backdropOpacity={ 0.2 }
 				onBackdropPress={ this.onCloseBottomSheet }
 				onBackButtonPress={ this.onHardwareButtonPress }
-				onSwipe={ this.onCloseBottomSheet }
+				onSwipeComplete={ this.onCloseBottomSheet }
 				onDismiss={ Platform.OS === 'ios' ? this.onDismiss : undefined }
 				onModalHide={
 					Platform.OS === 'android' ? this.onDismiss : undefined

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js
@@ -16,7 +16,7 @@ import {
 	BlockToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import {
 	keyboardClose,
 	undo as undoIcon,
@@ -94,7 +94,7 @@ function HeaderToolbar( {
 				<BlockToolbar />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<Toolbar passedStyle={ styles.keyboardHideContainer }>
+				<ToolbarGroup passedStyle={ styles.keyboardHideContainer }>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -103,7 +103,7 @@ function HeaderToolbar( {
 							hint: __( 'Tap to hide the keyboard' ),
 						} }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 			) }
 		</View>
 	);

diff --git a/packages/edit-post/src/components/visual-editor/index.native.js b/packages/edit-post/src/components/visual-editor/index.native.js
@@ -24,7 +24,7 @@ export default class VisualEditor extends Component {
 		};
 	}
 
-	componentWillMount() {
+	componentDidMount() {
 		this.keyboardDidShow = Keyboard.addListener(
 			'keyboardDidShow',
 			this.keyboardDidShow

diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
@@ -62,7 +62,7 @@
 		"react-native-hsv-color-picker": "git+https://github.com/wordpress-mobile/react-native-hsv-color-picker#dfe4d06595fefc9b4d48ce0ced029076c80dab74",
 		"react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#6febe4faf7ff51579087bac105f62be8e4c4015d",
 		"react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#deafc7a7b3dcfdc2a2d8327b5727cb393f1cabf7",
-		"react-native-modal": "^6.5.0",
+		"react-native-modal": "^11.10.0",
 		"react-native-prompt-android": "git+https://github.com/wordpress-mobile/react-native-prompt-android.git#6406b77d0162262c868bcbbaa0766bfafbf43742",
 		"react-native-reanimated": "git+https://github.com/wordpress-mobile/react-native-reanimated.git#047ae6064e2bcfdaeb1f25d1d38157359ba96cb6",
 		"react-native-safe-area": "^0.5.0",

diff --git a/patches/metro+0.64.0.patch b/patches/metro+0.64.0.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js b/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js
+index 5f32fc5..2b80fda 100644
+--- a/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js
++++ b/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js
+@@ -346,7 +346,7 @@ class UnableToResolveError extends Error {
+     try {
+       file = fs.readFileSync(this.originModulePath, "utf8");
+     } catch (error) {
+-      if (error.code === "ENOENT") {
++      if (error.code === "ENOENT" || error.code === 'EISDIR') {
+         // We're probably dealing with a virtualised file system where
+         // `this.originModulePath` doesn't actually exist on disk.
+         // We can't show a code frame, but there's no need to let this I/O