Skip to content

Commit

Permalink
[RNMobile] Upgrade React Native 0.71.11 (#51303)
Browse files Browse the repository at this point in the history 
* Upgrade `react-native` dependency

* Upgrade `@babel/runtime` dependency

* Upgrade `metro-react-native-babel` preset and transformer dependencies

* Upgrade `cocoapods` gem

* Re-apply `react-devtools-core` patch to new version

* Update jest snapshots with new a11y values

* Mock `Linking.addEventListener` function

`Linking.removeEventListener` has been removed in RN `0.71`. The library is mocked by default but doesn't return the `remove` function when calling `addEventListener`.

* Update tests that fail due to use of debounce and link suggestions

* Fix `MediaUpload` component test

* Update `@react-navigation/native` package to version `6.0.14`

* Update `react-native-reanimated` to version `2.17.0`

* Update `react-native-gesture-handler` to version `2.10.2`

* Fix `act` warnings produced during block insertion

* Fix `act` warnings in Columns block tests

* Fix `act` warnings in List block tests

* Upgrade `react-native` dependency to version `0.71.11`

It also upgrades `metro-react-native-babel` dependencies following the upgrade helper.

* Mock return value of Linking `addEventListener`

We only need to mock the return the value, hence we don't need to mock the entire library.

* Remove `waitForModalVisible` usage in Paragraph block tests

* Remove `waitFor` usage in Link settings tests

* test: Fix act warning by awaiting LinkPicker loading indicator removal

The loading indicator is displayed and subsequently removed once the
suggestion fetches resolve. Explicitly awaiting this element's removal
fixes the `act` warnings.

* build: Update react-native-safe-area-context to 4.6.3

* build: Upgrade react-native-screens to 3.22.0

* build: Upgrade react-native-svg to 13.9.0

Based on the release notes breaking changes, we should look out for odd
sizing or display of icons, particularly on Android.

* build: Upgrade @react-native-masked-view/masked-view to 0.2.9

* build: Upgrade @react-native-clipboard/clipboard to 1.11.2

* build: Upgrade react-native-modal to 13.0.1

* test: Update link modal snapshot

This change is a result of applying new props from the RN upgrade to a
newly introduced snapshot in trunk: 71d2dc5

* Update `@react-navigation/stack` to version `6.3.5`

* Upgrade `react-native-linear-gradient` to version `2.7.3`

This commit also updates the `react-native-hsv-color-picker` library to point to the same version of `react-native-linear-gradient`.

* Use `react-native-safe-area-context` mock provided by the library

* Update link modal snapshot

* Update `package-lock.json` file

The integrity checksum of `react-native-hsv-color-picker` changed because the package has been modified (ref: wordpress-mobile/react-native-hsv-color-picker#10 (comment))

* Disable `react-native-screens` in navigators

`react-native-screens` is meant to be used at root level to save memory when having inactive screens. This is not the case of the editor, as the stack navigators are used within the Bottom sheet component.
As a side note, enabling `react-native-screens` here leads to the editor crashing.

* Fix render order of animated view to highlight selected segment

Rendering the animated view before the segments will ensure that is rendered behind them.

* Update source of `react-native-hsv-color-picker` to use tag version

* Revert "Update link modal snapshot"

This reverts commit 7988b0e.

This is needed after disabling `react-native-screens` in navigators (ref: e5838f4).

* [RNMobile] Upgrade React Native `0.71.11` - iOS changes (#51386)

* refactor: Extract bundle version number to var

* refactor: Delete /.ruby-version, no longer needed

* refactor: Update /podfile to align w/RN updates

* refactor: Remove path names as part of RN upgrade

* Update `Podfile` with changes from RN upgrade helper

* Fix React Native path for `react_native_post_install` script

* Update Pods

* Add patch to fix Reanimated podspec

Without this patch, Reanimated tries to use Hermes version of React Native and produced a build failure. Seems there's an issue in the `podspec` file, as the JSC module is not being added.
Reference: software-mansion/react-native-reanimated#4254

* Update pods to reflect 0.71.11 target

* Apply changes to pods following `pod install`

* Update `Podfile.lock` file

---------

Co-authored-by: Siobhan <[email protected]>

* [RNMobile] Upgrade React Native `0.71.11` - Android changes (#51289)

* Upgrade Gradle to version 7.5.1

* Upgrade Gradle plugin

* Remove no longer needed files in new version

* Update Flipper initialization

* Update demo project main application

* Remove gradle download task plugin

* Bump ndk version

* Remove no longer need logic related to `newArchEnabled`

* Apply plugin React Native Gradle plugin

* Use React Native and Hermes modules from Maven

We no longer need to publish these binaries because React Native team is publishing React Native binaries to Maven.

* Remove exclude group from Flipper

* Update comments in `build.gradle` to align with new RN version

* Remove deprecated Gradle property

* Add `mavenLocal` repository to allow testing local binaries

* Bump Reanimated and Gesture handler libraries

* Revert "Upgrade Gradle plugin"

This reverts commit 82764a2.

* build: Resolve react-native-gradle-plugin incompatability

Due to host app requirements, we must use AGP 7.2.1. The included patch
disables logic requiring AGP 7.3. The logic appears to not be required
for our use cases in the Demo editor or host apps.

We should remove this patch once we upgrade past AGP 7.3.

* Reduce priority of `mavenLocal` repository in Android build configurations

Maven local is used to provide dependencies located locally, which is mainly used for testing and debugging. Hence, published dependencies should be prioritized over local ones.

* Disable `react-native-screens` in navigators

`react-native-screens` is meant to be used at root level to save memory when having inactive screens. This is not the case of the editor, as the stack navigators are used within the Bottom sheet component.
As a side note, enabling `react-native-screens` here leads to the editor crashing.

* Fix render order of animated view to highlight selected segment

Rendering the animated view before the segments will ensure that is rendered behind them.

* Bump Linear gradient Android library

This library is now published via the `react-native-libraries-publisher` repository.

---------

Co-authored-by: David Calhoun <[email protected]>

* Avoid exception in E2E tests when typing an empty string on Android

* Update a11y id queries for Android E2E tests

Starting in React Native 0.71, the accessibility hint is no longer appended to the accessibility content description. Reference: facebook/react-native@0b70b38

* Update button inline appender query for Android E2E tests

* Unify press keycode function for E2E tests

* Update comments in functions related to pressing a keycode

* Update block drop position using Reanimated's shared value

Seems there's some kind of incompatibility on calling a JS function from a worklet invoked from a gesture handler. For this reason, the logic to set the dropping insertion point has been updated. It now uses a Reanimated's shared value to keep the dragging over position and  `useDerivedValue` hook to listen for changes.

* Remove unneeded `hidden` param in Paragraph block test case

Co-authored-by: David Calhoun <[email protected]>

* Revert removing `.ruby-version` file

* Add inline comment in Reanimated patch

* Use `waitForElementToBeRemoved` in Paragraph block test cases

This way we can avoid waiting for any microtasks of link suggestions.

* Remove `act` statements from Link Settings test cases

* fix: Cover focal point drag handle visibility

The lack of an explicit width or height resulted in a invisible drag
handle. The logic passing the dimensions to the SVG expected a single
style object. The reality is that it (1) referenced only the Sass styles
and (2) the combined reference was actually an array of style objects.

Updating the reference and flattening it ensures the appropriate width
and height are passed to the SVG.

It appears the absence of explicit dimensions was not an issue in
earlier versions of React Native, but it makes sense why it might be
required.

* [RNMobile] Use Reanimated in bottom sheet height animation (#52563)

* Expose max height properties in `BottomSheetProvider`

* Animate bottom sheet's height with Reanimated

Pass `currentHeight` in bottom sheet navigation context

* Use pixel value when setting fullscreen height

We need to pass pixel values in order to animate the height with Reanimated.

* Rename `heightRef` to `maxHeight`

* Re-enable `exhaustive-deps` lint rule in `BottomSheetNavigationContainer`

* Avoid setting height using debounce

* Add test ID to navigation container component

* Mock Reanimated's `now` function

* Update test cases related to bottom sheet height animation

* Update test snapshots

* Update `react-native-editor` changelog

* Drop unsupported `--no-jetifier` from Android cmd

The `--no-jetifier` option no longer appears to be supported and results in an error when attempting to build the Android demo app.

Ref: wordpress-mobile/gutenberg-mobile#5881 (comment)

* Revert accidental change to .ruby-version

* Restore correct dependencies to package-lock.json

* Update `react-native-editor` changelog

* Update `package-lock.json` file to revert previous conflict resolutions

In 4482b9d we had a conflict in `package-lock.json` that was solved using the changes from this branch. However, seems that something went wrong and that although the editor has no issues, some e2e tests are failing due to this.

This has been solved by using the latest version of `package-lock.json` file from `trunk` and updating it with the package updates required in the React Native upgrade.

* Re-apply `react-devtools-core` patch to new version

* Update `Podfile.lock` file

---------

Co-authored-by: David Calhoun <[email protected]>
Co-authored-by: Siobhan <[email protected]>
  • Loading branch information
@fluiddot @dcalhoun
3 people authored Jul 27, 2023
1 parent c08b078 commit c2957aa
Show file tree
Hide file tree
Showing 77 changed files with 4,618 additions and 3,542 deletions.
4,623 changes: 2,939 additions & 1,684 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@
"lerna": "5.5.2",
"lint-staged": "10.0.1",
"make-dir": "3.0.0",
"metro-react-native-babel-preset": "0.70.3",
"metro-react-native-babel-transformer": "0.70.3",
"metro-react-native-babel-preset": "0.73.10",
"metro-react-native-babel-transformer": "0.73.10",
"mkdirp": "0.5.1",
"mock-match-media": "0.4.2",
"moment-timezone-data-webpack-plugin": "1.5.1",
Expand All @@ -224,7 +224,7 @@
"progress": "2.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.69.4",
"react-native": "0.71.11",
"react-native-url-polyfill": "1.1.2",
"react-refresh": "0.10.0",
"react-test-renderer": "18.2.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-draggable/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,7 +383,7 @@ describe( 'BlockDraggable', () => {
// activate the gesture. Since this not available in tests, the library
// displays a warning message.
expect( console ).toHaveWarnedWith(
'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
'[Reanimated] You can not use setGestureState in non-worklet function.'
);
expect( getEditorHtml() ).toMatchSnapshot(
'Paragraph block moved from first to second position'
Expand Down Expand Up @@ -411,7 +411,7 @@ describe( 'BlockDraggable', () => {
// activate the gesture. Since this not available in tests, the library
// displays a warning message.
expect( console ).toHaveWarnedWith(
'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
'[Reanimated] You can not use setGestureState in non-worklet function.'
);
expect( getEditorHtml() ).toMatchSnapshot(
'Spacer block moved from third to first position'
Expand Down
24 changes: 24 additions & 0 deletions packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,19 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": false,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
Expand Down Expand Up @@ -130,7 +142,19 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/media-upload/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ describe( 'MediaUpload component', () => {
const wrapper = render(
<MediaUpload
allowedTypes={ [ mediaType ] }
onSelectURL={ jest.fn() }
render={ ( { open, getMediaOptions } ) => {
return (
<>
Expand Down
60 changes: 60 additions & 0 deletions packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
Expand Down Expand Up @@ -38,7 +42,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
Expand Down Expand Up @@ -126,6 +134,15 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -189,7 +206,11 @@ exports[`Audio block renders audio file without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
Expand Down Expand Up @@ -223,7 +244,11 @@ exports[`Audio block renders audio file without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
Expand Down Expand Up @@ -274,6 +299,15 @@ exports[`Audio block renders audio file without crashing 1`] = `
accessibilityHint="Double tap to listen the audio file"
accessibilityLabel="Audio Player"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
focusable={true}
onClick={[Function]}
Expand Down Expand Up @@ -326,6 +360,15 @@ exports[`Audio block renders audio file without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -440,6 +483,23 @@ exports[`Audio block renders placeholder without crashing 1`] = `
accessibilityHint="Double tap to select an audio file"
accessibilityLabel="Audio block. Empty"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/columns/test/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import {
act,
addBlock,
fireEvent,
getEditorHtml,
Expand Down Expand Up @@ -290,6 +291,10 @@ describe( 'Columns block', () => {
// Get the first column
const firstColumnBlock = await getBlock( screen, 'Column' );
fireEvent.press( firstColumnBlock );
// Inner blocks batch store updates with microtasks.
// To avoid `act` warnings, we let queued microtasks to be executed.
// Reference: https://t.ly/b95nA
await act( async () => {} );

// Open vertical alignment menu
fireEvent.press( verticalAlignmentButton );
Expand Down
61 changes: 61 additions & 0 deletions packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ exports[`File block renders file error state without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": false,
"expanded": undefined,
"selected": undefined,
}
}
accessible={false}
Expand Down Expand Up @@ -61,6 +65,15 @@ exports[`File block renders file error state without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -167,6 +180,15 @@ exports[`File block renders file error state without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -251,7 +273,11 @@ exports[`File block renders file without crashing 1`] = `
<View
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": false,
"expanded": undefined,
"selected": undefined,
}
}
accessible={false}
Expand Down Expand Up @@ -290,6 +316,15 @@ exports[`File block renders file without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -370,6 +405,15 @@ exports[`File block renders file without crashing 1`] = `
}
>
<RCTAztecView
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
activeFormats={[]}
blockType={
Expand Down Expand Up @@ -486,6 +530,23 @@ exports[`File block renders placeholder without crashing 1`] = `
accessibilityHint="Double tap to select"
accessibilityLabel="File block. Empty"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/list/test/edit.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import {
act,
selectRangeInRichText,
typeInRichText,
fireEvent,
Expand Down Expand Up @@ -577,6 +578,10 @@ describe( 'List block', () => {
preventDefault() {},
keyCode: BACKSPACE,
} );
// Inner blocks batch store updates with microtasks.
// To avoid `act` warnings, we let queued microtasks to be executed.
// Reference: https://t.ly/b95nA
await act( async () => {} );

expect( getEditorHtml() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
Expand Down
21 changes: 21 additions & 0 deletions packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ exports[`Missing block renders without crashing 1`] = `
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": true,
"expanded": undefined,
"selected": undefined,
}
}
accessible={true}
Expand All @@ -24,6 +28,23 @@ exports[`Missing block renders without crashing 1`] = `
accessibilityHint="Tap here to show help"
accessibilityLabel="Help button"
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
focusable={true}
Expand Down
Loading

1 comment on commit c2957aa

@github-actions
Copy link

@github-actions github-actions bot commented on c2957aa Jul 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in c2957aa.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5679094562
📝 Reported issues:

Please sign in to comment.