build: Upgrade to React Native 0.73

.github/workflows/rnmobile-ios-runner.yml

@@ -27,6 +27,11 @@ jobs:
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
+            - uses: ruby/setup-ruby@22fdc77bf4148f810455b226c90fb81b5cbc00a7
+              with:
+                  # `.ruby-version` file location
+                  working-directory: packages/react-native-editor/ios
+
             - name: Switch Xcode version to ${{ matrix.xcode }}
               run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app
 

package.json

@@ -113,6 +113,9 @@
 		"@octokit/webhooks-types": "5.6.0",
 		"@playwright/test": "1.39.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+		"@react-native/babel-preset": "0.73.10",
+		"@react-native/metro-babel-transformer": "0.73.10",
+		"@react-native/metro-config": "0.73.4",
 		"@storybook/addon-a11y": "7.6.15",
 		"@storybook/addon-actions": "7.6.15",
 		"@storybook/addon-controls": "7.6.15",
@@ -125,7 +128,7 @@
 		"@storybook/theming": "7.6.15",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.0.0",
-		"@testing-library/react-native": "12.1.2",
+		"@testing-library/react-native": "12.4.3",
 		"@testing-library/user-event": "14.4.3",
 		"@types/eslint": "7.28.0",
 		"@types/estree": "0.0.50",
@@ -216,8 +219,6 @@
 		"lerna": "7.1.4",
 		"lint-staged": "10.0.1",
 		"make-dir": "3.0.0",
-		"metro-react-native-babel-preset": "0.73.10",
-		"metro-react-native-babel-transformer": "0.73.10",
 		"mkdirp": "3.0.1",
 		"mock-match-media": "0.4.2",
 		"moment-timezone-data-webpack-plugin": "1.5.1",
@@ -232,7 +233,7 @@
 		"progress": "2.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-native": "0.71.15",
+		"react-native": "0.73.3",
 		"react-native-url-polyfill": "1.1.2",
 		"react-refresh": "0.14.0",
 		"react-test-renderer": "18.2.0",

packages/block-editor/src/components/block-draggable/test/index.native.js

@@ -382,7 +382,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
@@ -410,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[Reanimated] You can not use setGestureState in non-worklet function.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'

packages/block-library/src/gallery/test/index.native.js

@@ -92,7 +92,7 @@ describe( 'Gallery block', () => {
 		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 
-		getBlockSpy.mockReset();
+		getBlockSpy.mockRestore();
 	} );
 
 	it( 'selects a gallery item', async () => {

packages/block-library/src/missing/test/edit-integration.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	fireEvent,
 	getBlock,
 	initializeEditor,
@@ -117,7 +118,7 @@ describe( 'Unsupported block', () => {
 				screen.getByTestId( 'bottom-sheet' ),
 				MODAL_DISMISS_EVENT
 			);
-			jest.runOnlyPendingTimers();
+			act( () => jest.runOnlyPendingTimers() );
 		} );
 		expect( requestUnsupportedBlockFallback ).toHaveBeenCalled();
 	} );

packages/components/src/draggable/index.native.js

@@ -63,7 +63,7 @@ const Draggable = ( {
 	useAnimatedReaction(
 		() => isDragging.value,
 		( result, previous ) => {
-			if ( result === previous || previous === null ) {
+			if ( result === previous ) {
 				return;
 			}
 
@@ -75,7 +75,7 @@ const Draggable = ( {
 						id: draggingId.value,
 					} );
 				}
-			} else if ( onDragEnd ) {
+			} else if ( previous !== null && onDragEnd ) {
 				onDragEnd( {
 					x: lastPosition.x.value,
 					y: lastPosition.y.value,

packages/components/src/draggable/test/index.native.js

@@ -28,10 +28,12 @@ const TouchEventType = {
 // For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
 let requestAnimationFrameCopy;
 beforeEach( () => {
+	jest.useFakeTimers();
 	requestAnimationFrameCopy = global.requestAnimationFrame;
 	global.requestAnimationFrame = ( callback ) => callback();
 } );
 afterEach( () => {
+	jest.useRealTimers();
 	global.requestAnimationFrame = requestAnimationFrameCopy;
 } );
 
@@ -58,6 +60,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 
 		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
 		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
@@ -93,6 +96,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 		fireGestureHandler( draggable, [
 			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
 			{ oldState: State.BEGAN, state: State.ACTIVE },
@@ -112,7 +116,7 @@ describe( 'Draggable', () => {
 		] );
 		// TODO(jest-console): Fix the warning and remove the expect below.
 		expect( console ).toHaveWarnedWith(
-			'[Reanimated] You can not use setGestureState in non-worklet function.'
+			'[Reanimated] setGestureState() cannot be used with Jest.'
 		);
 
 		expect( onDragStart ).toHaveBeenCalledTimes( 1 );

packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -2,12 +2,7 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import {
-	render,
-	fireEvent,
-	withReanimatedTimer,
-	advanceAnimationByTime,
-} from 'test/helpers';
+import { act, render, fireEvent, withReanimatedTimer } from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -63,7 +58,7 @@ it( 'animates height transitioning from non-full-screen to non-full-screen', asy
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
@@ -75,7 +70,7 @@ it( 'animates height transitioning from non-full-screen to non-full-screen', asy
 		);
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen2Layout );
 	} ) );
 
@@ -105,14 +100,14 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
@@ -144,14 +139,14 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
@@ -160,7 +155,7 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 		fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 	} ) );
 
@@ -187,15 +182,15 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 
 		// First height value should be set without animation, but we need
 		// to wait for a frame to let animated styles be updated.
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
 
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// We wait some milliseconds to check if height has changed.
-		advanceAnimationByTime( 10 );
+		act( () => jest.advanceTimersByTime( 10 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );

packages/format-library/src/link/test/__snapshots__/modal.native.js.snap

@@ -88,7 +88,6 @@ exports[`LinksUI LinksUI renders 1`] = `
             >
               <View
                 collapsable={false}
-                forwardedRef={[Function]}
                 pointerEvents="box-none"
                 style={
                   {
@@ -178,7 +177,6 @@ exports[`LinksUI LinksUI renders 1`] = `
                   >
                     <View
                       collapsable={false}
-                      forwardedRef={[Function]}
                       handlerTag={1}
                       handlerType="PanGestureHandler"
                       needsOffscreenAlphaCompositing={true}

packages/react-native-aztec/android/build.gradle

@@ -57,8 +57,8 @@ android {
     }
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
 
     sourceSets {

packages/react-native-aztec/android/settings.gradle

@@ -1,5 +1,5 @@
 pluginManagement {
-    gradle.ext.kotlinVersion = '1.6.10'
+    gradle.ext.kotlinVersion = '1.8.0'
     gradle.ext.agpVersion = '8.1.0'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 

packages/react-native-aztec/src/test/AztecInputState.test.js

@@ -17,20 +17,16 @@ import {
 } from '../AztecInputState';
 
 // Recreate internal state of TextInput
-jest.mock( 'react-native/Libraries/Components/TextInput/TextInputState', () => {
-	let currentInput = null;
-	return {
-		focusTextInput: jest.fn( ( value ) => {
-			currentInput = value;
-		} ),
-		blurTextInput: jest.fn( ( value ) => {
-			if ( currentInput === value ) {
-				currentInput = null;
-			}
-		} ),
-		currentlyFocusedInput: jest.fn( () => currentInput ),
-	};
+let currentInput = null;
+TextInputState.focusTextInput = jest.fn( ( value ) => {
+	currentInput = value;
 } );
+TextInputState.blurTextInput = jest.fn( ( value ) => {
+	if ( currentInput === value ) {
+		currentInput = null;
+	}
+} );
+TextInputState.currentlyFocusedInput = jest.fn( () => currentInput );
 
 const ref = { current: null };
 const anotherRef = { current: null };

packages/react-native-bridge/android/react-native-bridge/build.gradle

@@ -48,8 +48,8 @@ android {
     }
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
 
     sourceSets {
@@ -93,7 +93,7 @@ dependencies {
 
     // Published by `wordpress-mobile/react-native-libraries-publisher`
     // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`
-    def reactNativeLibrariesPublisherVersion = "v4"
+    def reactNativeLibrariesPublisherVersion = "v5"
     def reactNativeLibrariesGroupId = "org.wordpress.react-native-libraries.$reactNativeLibrariesPublisherVersion"
     implementation "$reactNativeLibrariesGroupId:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
     implementation "$reactNativeLibrariesGroupId:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"

packages/react-native-bridge/android/settings.gradle

@@ -1,5 +1,5 @@
 pluginManagement {
-    gradle.ext.kotlinVersion = '1.6.10'
+    gradle.ext.kotlinVersion = '1.8.0'
     gradle.ext.agpVersion = '8.1.0'
     gradle.ext.automatticPublishToS3Version = '0.8.0'
 

packages/react-native-editor/CHANGELOG.md

@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [*] Improve consistency of the block outline indicating the currently selected block [#59415]
 -   [*] Gallery block items with in-progress, paused, or failed media uploads correctly display an highlight outline when selected [#59423]
+-   [**] [internal] Upgrade React Native to version 0.73.3 [#58475]
 
 ## 1.114.0
 -   [*] Prevent crash when autoscrolling to blocks [#59110]