Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Update to react-native 0.64 by afoxman · Pull Request #1159 · microsoft/fluentui-react-native · GitHub
Skip to content

Update to react-native 0.64 - #1159

Merged
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64
Nov 17, 2021
Merged

Update to react-native 0.64#1159
Adam Foxman (afoxman) merged 22 commits into
microsoft:masterfrom
afoxman:rn64

Conversation

@afoxman

Copy link
Copy Markdown
Contributor

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Update all packages to react-native 0.64. This requires that a number of related dependencies be updated as well, such as react-native-windows, react-native-macos, @office-iss/react-native-win32, react, several Types (@types) packages, etc.

I also added resolutions to force the use of Metro 0.66.2 or later, as that is required for certain @rnx-kit package updates. Metro 0.66.2 is compatible with react-native 0.64.

Verification

I ran a CI build locally, which ran automated tests and bundling. I will also run the tester app manually and inspect the UI.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts

Comment threadpackage.json
}
}
accessible={true}
collapsable={false}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Note to self: check it we should enable this prop for performance gains. I vaguely recall this might do something similar to compose, where less views are in the render tree.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

yep, also similar to react fragments

Comment threadpackage.json Outdated
Comment threadapps/android/package.json Outdated
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

@afoxman
Adam Foxman (afoxman) marked this pull request as ready for review November 15, 2021 18:21
@afoxman

Copy link
Copy Markdown
ContributorAuthor

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

@rurikoaraki

Copy link
Copy Markdown
Collaborator

Adam Foxman (@afoxman) Did some testing locally for win32, things seem to look good. At some point we probably want to bump the build of rex to a build that includes the changes to office to go to 0.64, but that can be its own PR.

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

My next guess is that we may need to bump @react-native-community/cli. The iOS PR is running react-native run-ios, which I remember failed with RNTA & RN 0.64 until we made some upstream CLI fixes, which showed up in @react-native-community/cli version 5.02 microsoft/react-native-test-app#375

Looks like 5.0.2 was only for cli-platform-ios, and once I forced that version using a resolution, things started working on my dev machine. Thank you for the pointer! I was going crazy trying to understand this. I don't know why they didn't do a 5.0.2 release of the entire CLI.

Turns out I wasn't running the right command and didn't see that the failure still occurred. Then I took a closer look at yarn.lock and saw that cli-platform-ios was already 5.0.2 even though CLI was 5.0.1. I tried forcing the CLI ^6.0.0 and that still doesn't resolve it.

So this hasn't actually been fixed in the CLI, in 5.x or 6.x.

Tommy Nguyen (@tido64) FYI it seems your CLI fix didn't make it into later releases =/

@tido64

Copy link
Copy Markdown
Member

Is run-ios failing? I can have a look later…

@Saadnajmi

Saad Najmi (Saadnajmi) commented Nov 16, 2021

Copy link
Copy Markdown
Collaborator

Is run-ios failing? I can have a look later…

Adam Foxman (@afoxman) worked around it by copying the fix RNTA had to the iOS test app (which as I type, just realized is what running yarn configure-test-app would have done). So run-is is fine.

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

@tido64

Tommy Nguyen (tido64) commented Nov 16, 2021

Copy link
Copy Markdown
Member

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

The reason for tagging you was simply to say "cli-platform-ios v 5.0.2" (which has your fix) isn't included in either the 5.x or 6.x release of "@react-native-community/cli"

The fix I did was in cli-platform-ios though. It wouldn't be in @react-native-community/cli. But installing it should've pulled down latest cli-platform-ios.

I did manage to run-ios successfully:

% yarn ios
yarn run v1.22.17
$ react-native run-ios --scheme ReactTestApp --project-path src
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- @react-native-community/slider (to unlink run: "react-native unlink @react-native-community/slider")
- react-native-svg (to unlink run: "react-native unlink react-native-svg")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Found Xcode workspace "FluentTester.xcworkspace"
info Launching iPhone 12 (iOS 14.5)
info Building (using "xcodebuild -workspace FluentTester.xcworkspace -configuration Debug -scheme ReactTestApp -destination id=55FCD6EA-B6C0-4491-ABE9-074D19045567")
success Successfully built the app
info Installing "/~/Library/Developer/Xcode/DerivedData/FluentTester-genvaxlzkxuvwdegafenhwouwpil/Build/Products/Debug-iphonesimulator/ReactTestApp.app"
info Launching "com.microsoft.ReactTestApp"
success Successfully launched the app on the simulator
✨ Done in 129.27s.

We should probably remove @react-native-community/slider and react-native-svg from ios/Podfile. They should be autolinked already.

Edit: In general, you should add the packages you want to link as dependencies (or devDependencies) and autolink will pick them up.

Good callout on removing slider & SVG, since those are direct dependencies and can get autolinked. I can look into that separately since that doesn't seem to be blocking (Having issues filing an issue with GitHub to track right now).

Interestingly enough, cli-platform-ios comes in as a dependency of react-native, not @react-native-community/cli. So bumping the cli package didn't also bump cli-platform-ios. Nonetheless, the run-ios issue was resolved since it was fixed in RNTA and made backwards compatible.

@Saadnajmi

Copy link
Copy Markdown
Collaborator

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

@afoxman

Adam Foxman (afoxman) commented Nov 17, 2021

Copy link
Copy Markdown
ContributorAuthor

Also tagging lenahong who I think is most recently involved with FURN Android stuff. This PR has the Android CI failing, and I'm still not sure why.

I was able to make this pass locally by changing @react-native-community/slider's gradle.properties:

ReactNativeSlider_minSdkVersion=21// was 16

I don't know enough Gradle yet to understand if/how I can change this from the android app.

Saad Najmi (@Saadnajmi)lenahong

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

We should also align on the Flipper version that works with 0.64:

diff --git a/apps/android/src/gradle.properties b/apps/android/src/gradle.properties
index 1bbc8cc2..d21d03f2 100644
--- a/apps/android/src/gradle.properties+++ b/apps/android/src/gradle.properties@@ -25,4 +25,4 @@ android.useAndroidX=true
android.enableJetifier=true
# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.33.1+FLIPPER_VERSION=0.75.1

Edit: I'll see if we can't set minSdkVersion in RNTA. Please try bumping react-native-test-app to 0.9.13.

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Can you try setting minSdkVersion in /apps/android/src/build.gradle:

diff --git a/apps/android/src/build.gradle b/apps/android/src/build.gradle
index c9a77b9e..45595823 100644
--- a/apps/android/src/build.gradle+++ b/apps/android/src/build.gradle@@ -28,3 +28,6 @@ allprojects {
jcenter()
}
}
+ext {+ minSdkVersion = 21+}

Thanks! I tried this, and got a gradle error:

* Where:
Build file '/.../fluentui-react-native/apps/android/src/build.gradle' line: 31
* What went wrong:
A problem occurred evaluating root project 'FluentTester'.
> No signature of method: build_6i2c3eh3t4fr2egx4gv4xj8sx.ext() is applicable for argument types: (build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2) values: [build_6i2c3eh3t4fr2egx4gv4xj8sx$_run_closure2@79f65395]
Possible solutions: exec(groovy.lang.Closure), exec(org.gradle.api.Action), wait(), run(), run(), any()

@tido64

Tommy Nguyen (tido64) commented Nov 17, 2021

Copy link
Copy Markdown
Member

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

@afoxman

Copy link
Copy Markdown
ContributorAuthor

Thanks! I tried this, and got a gradle error:

That's odd. I tested this locally and it works. Can you try bumping to latest react-native-test-app instead?

Updating RNTA fixed it locally so I've pushed the change. CI runs things a bit differently - not easy to match/reproduce, which is a problem in itself, so I'll keep an eye on it.

@afoxman
Adam Foxman (afoxman) merged commit f16d742 into microsoft:masterNov 17, 2021
@SaadnajmiSaad Najmi (Saadnajmi) mentioned this pull request Jul 11, 2022
10 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@afoxman@rurikoaraki@Saadnajmi@tido64@PPatBoyd