v0.63.0 Discussion

[TheSavior]

Highlighted Changes

• Native Colors (PlatformColor, DynamicColorIOS)
• LogBox
• Pressable
• Dropping iOS 9 support
• Dropping Node.js 8 support (>=10 is now required)
• Android Support for rendering Views in Text without explicit size

Work Required

• [x] Changelog @jeremy-deutsch
• [x] Blog post @grabbou

Click to expand!

- [x] facebook/react-native#28776 - [x] Fix [`scrollResponderScrollNativeHandleToKeyboard` warnings](https://github.com/facebook/react-native/issues/28203#issuecomment-592973087). Fix [here](https://github.com/facebook/react-native/commit/3246f68952c8fe065367ef8d2cdf7da5dfff78e4) - [x] [A new Image Prop `analyticTag` was accidentally landed. This needs to get prefixed as `internal`](https://github.com/facebook/react-native/commit/1c10568967231cce2be01d2341f4edb79d57ec48) @dvacca. Fix [here](https://github.com/facebook/react-native/commit/8e48dc0555e0c3432a77d421b1e535d17f5933c8) - [x] [Android doesn't build due to missing `cliPath`](https://github.com/facebook/react-native/issues/28466) - [x] [Android doesn't build due to incorrect Kotlin version](https://github.com/facebook/react-native/pull/28626)

Non-Blocking

Click to expand!

- [x] Bump Flipper to v0.41 - [x] Documentation for Pressable @kikisaints / @rachelnabors - [x] Rename Pressable `pressRectOffset` prop to `pressRetentionOffset`. @TheSavior - [x] [Make sure PlatformColor ESLint rule is enabled on new projects](https://github.com/facebook/react-native/commit/602070f44b02220aeb036a7b3c26dad5c611b636) (might require publishing a new package) - [x] [Remove ColorAndroid method](https://github.com/facebook/react-native-website/pull/1813#issuecomment-609962877) @tom-un - [x] [Documentation for PlatformColor](https://github.com/facebook/react-native-website/pull/1813) @kikisaints / @rachelnabors - [x] [Documentation for DynamicColorIOS](https://github.com/facebook/react-native-website/pull/1813) @kikisaints / @rachelnabors - [x] [Fix Pressable's Android ripple with `borderless`](https://github.com/facebook/react-native/pull/28526) @vonovak. Fix [here](https://github.com/facebook/react-native/commit/44ec762e41029bf43530b1ff9b36ca3512c526e2) - [x] [Fix Podfile paths to React Native in monorepos and non-standard structures](https://github.com/facebook/react-native/pull/28572) @grabbou - [x] Ensure Hermes is on 0.5.0 @willholen (https://github.com/facebook/react-native/commit/4305a291a94) - [x] Cherry-pick [Podfile cleanup](https://github.com/facebook/react-native/pull/28651#issuecomment-614663967) - [x] Allow iOS PlatformColor strings to be ObjC or Swift UIColor selectors https://github.com/facebook/react-native/commit/25793eab56217a9961620761ea65ec2fcb97dcb0 - [x] facebook/react-native@d06ee3d

Hopeful Dates

We can never commit to the dates involved in a release as many things are out of our control. However, we are thinking about these rough dates for this release.

• Publish as Stable: June

[HoSheiMa]

Fix android shadow system and make it use same props like ios system to be easy, please fix a very bad react dev debag it's make animation very slow when it opened, make support for react native to can use flooting windows

[ltcaosj]

Please include this into the release a well, there are so many people need it. Allow touches on clipped children when clipChildren==false https://github.com/facebook/react-native/pull/26374

[grabbou]

During the testing, we've discovered a potential DX downgrade and submitted a PR to quickly resolve it: https://github.com/facebook/react-native/pull/28572.

Should be merged today - don't think it's a blocker.

[ralph-dev]

Just curious what the status is with FlatList Versus SectionList versus indirectly overlaps like ScrollView / Fast List. styled-components don't support .SectionList but does support .FlatList and ReactNative Web does not recommend either and pushes you towards Fast List. So from an integration perspective, I feel like at the minimum we should deprecate SectionList and improve FlatList significantly?

This is I'm sure out of scope for the next release but I would like to hear something about this topic in general (At least a discussion to recognize the issue / Updating Docs if I am incorrect)

[TheSavior]

These release threads are not the right place for many of the above comments. Responding in one comment so that they can be hidden.

@hoSheiMa The native android platform doesn't provide more capabilities for shadows so there isn't really anything React Native can reasonably do for this that is performant.

@ltcaosj that clipChildren PR is essentially a new capability. We recognize that it is important, but as it isn't a bug introduced by an individual release and has existed for many years, the improvement will land and be part of whatever release is cut after it lands. That may not be 0.63.

@ralph-dev SectionList and FlatList are different and are both necessary in React Native. SectionList renders sections of list items with their own headers, FlatList renders a single flat list of items.

[chetstone]

Just curious-- what is the rationale for dropping support for iOS 9? I know it's old, but the form factor (fits nicely in the palm) of older devices that only run iOS 9.3.6 is ideal for my app... If you can point me to a discussion that would be great..

Thanks.

[TheSavior]

@chetstone We periodically drop old iOS versions that we see very little usage of in order to be able to use newer features and ease development.

A bit more concretely, as React Native is developed in the same monorepo as the Facebook app and all the other apps created by Facebook, we have to maintain the same support. The apps created by Facebook dropped support for iOS 9 at the end of last year.

[chetstone]

Thanks for the reply.

On Mon, Apr 13, 2020 at 11:39 AM Eli White notifications@github.com wrote:

@chetstone https://github.com/chetstone We periodically drop old iOS versions that we see very little usage of in order to be able to use newer features and ease development.

A bit more concretely, as React Native is developed in the same monorepo as the Facebook app and all the other apps created by Facebook, we have to maintain the same support as them. The apps created by Facebook dropped support for iOS 9 at the end of last year.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/releases/issues/186#issuecomment-613006468, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHOLV6DWI6XVEZWDFF6XCDRMNE35ANCNFSM4MCQC5FQ .

[grabbou]

Hit an Android error while running a new project: https://github.com/facebook/react-native/issues/28466

Investigating.

[grabbou]

I have submitted a PR to fix that issue: https://github.com/facebook/react-native/pull/28625. I am still working on it, it may change a bit before it's fully ready.

[grabbou]

Another issue on Android while building a project:

• What went wrong: The Android Gradle plugin supports only Kotlin Gradle plugin version 1.3.10 and higher. The following dependencies do not satisfy the required version: root project 'RNTestProject' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.0

Cause: https://github.com/facebook/react-native/blob/29d3dfbd196176af98c9727c82ff2668e697d78e/template/android/build.gradle

Fix: Set to 1.3.10.

[grabbou]

I have submitted a PR to fix that issue: https://github.com/facebook/react-native/pull/28626.

[KingAmo]

https://github.com/facebook/react-native/issues/21801 [Android][Animation] Interpolated translateY value causes android view to jump

@TheSavior could this issue be fix in 0.63? it is really a big problem for all react native developer

[TheSavior]

@grabbou, version @react-native-community/eslint-plugin@1.1.0 has been published https://www.npmjs.com/package/@react-native-community/eslint-plugin/v/1.1.0

[TheSavior]

@KingAmo only commits landed in master will be included in 63. That issue doesn't have a PR that has been landed

[grabbou]

Thanks! I have successfully tested Android and iOS projects and everything works just fine for me. We're ready to go.

[grabbou]

0.63.0-rc.0 is on the way - https://github.com/facebook/react-native/releases/tag/v0.63.0-rc.0. If everything goes well on CircleCI, we should have a new RC tonight.

EDIT: It's out!

[Simek]

I think it's a bit confusing that PlatformColor strings on iOS have additional Color suffix in comparison to the Apple docs:

• https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors

Example: secondarySystemFill in RN is secondarySystemFillColor.

From the RN docs/website POV this could be problematic. Linking Apple website can lead to confusion of potential users so an additional information should be provided that they need to add Color suffix on iOS, when on Android values are taken strait forward from Android API docs.

Example: colorControlNormal in RN is ?attr/colorControlNormal

?attr/ is standard way to reference the attributes on the Android, other prefixes can be used like @android:color/ (Material Design palette reference) or @color/ so having this prefix exposed here is understandable, but in my opinion this also needs more documentation than in the current version of PlatformColor docs).

But back to iOS, if there is a reason for adding Color suffix I think that proper explanation should be added to the PlatformColor docs page, if there is not, I think that the colors name change is unnecessary, shows lack of consistency between implementations and can lead to weird issues in the future.

P.S. It would be nice if default App template can utilize PlatformColor API instead of Colors statics (from NewAppScren). P.S.2. Also usage of Appearance API and support of Dark mode by default in the template would be nice, but currently none of NewAppScreen components is ready for that change, so it would require more work.

[tom-un]

Regarding the Color suffix on semantic names: in the Objective C APIs, the names do have a Color suffix, but in Swift they do not. The iOS (and macOS) implementations are ObjC and are using ObjC reflection to validate and call the selector names -- and the selector names do have the Color suffix. Its an interesting difference between the ObjC api and the Swift api that actually never noticed before.

[Simek]

@tom-un Thank you for the explanation. Swift is selected by default when entering Apple docs so I have missed the ObjC version. I have updated the reference link in the docs PR: facebook/react-native-website#1851.

[owinter86]

I am not sure if there needs to be a change to the local environment for upgrading 062.2 to the 0.63 Release candidate, but I can not successfully build android release versions the new release candidate, but I have no problem when initialising a new 0.62.2 version.

https://github.com/facebook/react-native/issues/28700

[TheSavior]

Thoughts from looking through the upgrade helper from 62.2 -> 63.0-rc.0

• package.json has eslint-config@1.0.0. I think this needs to get bumped to 1.1.0 to include the new ESLint rule
• I'm so happy with the Podfile cleanup

Those are all my comments, which is amazing! Hopefully this is a smooth upgrade for people!

[tom-un]

@Simek and @TheSavior : on the iOS color selector names. I just did a deep dive into Swift and back with the help of a Swift expert on our team. Swift is the future for Apple. Their docs and examples always default to Swift now. It would be relatively easy to make iOS PlatformColor accept Swift selectors and ObjC selectors. i.e. we could make PlatformColor('labelColor') and PlatformColor('label') both be legal. Thoughts?

[Simek]

@tom-un If there are no potential issues with that approach I think that having both versions accepted would be an ideal solution.

[TheSavior]

I think supporting both is reasonable

[tom-un]

@Simek , @TheSavior and @alloy : I've made a change to support both ObjC and Swift UIColor selector names here: https://github.com/facebook/react-native/compare/master...tom-un:tomun/platformcolor-swift. I will make it into a PR.

[willholen]

When attaching a debugger to v0.63.0-rc.0 with Hermes, the app instantly crashes. Currently investigating.

Edit: The issue is fixed by reverting the Folly upgrade in 6e2131b8fa85da8b3fb0391803e7. Trying to see if we can work with the upgrade as well.

Edit2: It was caused by -DFOLLY_MOBILE=1 being added for folly_futures but not folly_json. Fix in flight.

[TheSavior]

Let's pick @tom-un's commit adding the other color names: https://github.com/facebook/react-native/commit/25793eab56217a9961620761ea65ec2fcb97dcb0

[alloy]

I have updated the reference link in the docs PR: facebook/react-native-website#1851.

@Esemesek I left a comment about perhaps reverting the link to the HIG instead, now that @tom-un’s change is in. https://github.com/facebook/react-native-website/pull/1851/files#r412254553

[grabbou]

Not updating to Flipper 0.37 yet - waiting for a commit from master to cherry-pick. However, Podfile cleanup works w/o the bump.

All the commits have been cherry-picked.

[grabbou]

I have also updated the original issue to hide already resolved commits.

[Simek]

@alloy Thank you for pointing this out. There is already a PR with this change: facebook/react-native-website#1865.

[grabbou]

package.json has eslint-config@1.0.0. I think this needs to get bumped to 1.1.0 to include the new ESLint rule

@TheSavior, according to https://semver.npmjs.com/, ^1.0.0 will pick 1.1.0 too. Since there's no lock file shipped with the default template, I don't think it should have any impact.

On that note, it might be a good idea to include bumping the template dependency to be part of the ESLint config release process.

[grabbou]

@owinter86, this looks like a regression. We're investigating this. Thank you for highlighting.

[TheSavior]

@Grabbou

according to https://semver.npmjs.com/, ^1.0.0 will pick 1.1.0 too.

Yeah, people with existing projects and lock files won’t update though. We need everyone on 1.1.0 with this release so that they have the new lint rule :-)

[willholen]

Please pick https://github.com/facebook/react-native/commit/d06ee3d18973e74983590d2888552dbd57ceb951

With this commit, you can attach and debug with Hermes. Without it, the app crashes instantly when attaching a debugger (due to a bad build setting).

[PierreCapo]

Can this commit be cherry-picked https://github.com/facebook/react-native/commit/ed29ba13f97f240c91fdf6c0ef3fb601046697b9 please @grabbou ?

It adds a nice feature for the Android ScrollView and makes it more consistent with the iOS one.

[TheSavior]

@PierreCapo, that looks like a long standing issue so we don't normally pick those into RCs. That will be part of 0.64

[grabbou]

Fix for @owinter86 issue is here: https://github.com/facebook/react-native/pull/28776.

Once it's approved and merged, we're ready to go with the next RC.

[TheSavior]

@grabbou, that has landed on master in https://github.com/facebook/react-native/commit/afdcdc760f560963fdb48e409470d4119763d10b

[grabbou]

Yes, thanks @TheSavior! Picked and testing.

FYI I have a little problem with https://github.com/facebook/react-native/commit/17f025bc26da13da795845a3f7daee65563420c0 which results in:

[!] An error occurred while processing the post-install hook of the Podfile.

[!] The plist file at path `/Users/grabbou/Repositories/react-native/RNTester/RNTester.xcodeproj/project.pbxproj` doesn't exist.

produced by this line: https://github.com/facebook/react-native/commit/17f025bc26da13da795845a3f7daee65563420c0#diff-daf3e7bfe0b99f174d54291883fd60e3R100.

Probably needs to be investigated for next RC. Skipping it for now.

[grabbou]

I am also picking this https://github.com/facebook/react-native/commit/fb04237b18e1467889c865f3feb75ec85e807dd8#diff-daf3e7bfe0b99f174d54291883fd60e3 which is revert of a previously picked commit, which breaks the builds too.

[Naturalclar]

Can https://github.com/facebook/react-native/pull/28662 be included in v0.63-rc? so that initial template made by cli will include the latest eslint-config

[alloy]

FYI I have a little problem with facebook/react-native@17f025b which results in:

[!] An error occurred while processing the post-install hook of the Podfile.

[!] The plist file at path `/Users/grabbou/Repositories/react-native/RNTester/RNTester.xcodeproj/project.pbxproj` doesn't exist.

produced by this line: facebook/react-native@17f025b#diff-daf3e7bfe0b99f174d54291883fd60e3R100.

That entire post_install hook should not be there, we had removed it in 0.62. I’ll reply on https://github.com/facebook/react-native/commit/17f025bc26da13da795845a3f7daee65563420c0#diff-daf3e7bfe0b99f174d54291883fd60e3

[alloy]

FYI I have a little problem with facebook/react-native@17f025b which results in:

[!] An error occurred while processing the post-install hook of the Podfile.

[!] The plist file at path `/Users/grabbou/Repositories/react-native/RNTester/RNTester.xcodeproj/project.pbxproj` doesn't exist.

produced by this line: facebook/react-native@17f025b#diff-daf3e7bfe0b99f174d54291883fd60e3R100.

@grabbou @TheSavior I’ve created 2 PRs to address this once and for all, however it does depend on a new Flipper version being release before we can pull it into the RC:

• https://github.com/facebook/flipper/pull/1086
• https://github.com/facebook/react-native/pull/28796

[TheSavior]

Can facebook/react-native#28662 be included in v0.63-rc? so that initial template made by cli will include the latest eslint-config

This landed and should get picked. https://github.com/facebook/react-native/commit/780f06cd477f34da48646a949bd25dd3f883a9a2

I've unchecked this line in the to-do list since it wasn't complete.

[grabbou]

Picked @TheSavior 👌

[grabbou]

0.63.0-rc.1 is on CircleCI with latest round of cherry-picks. Should be on npm soon.

EDIT: it's out!

[danielgindi]

How about finally merging https://github.com/facebook/react-native/pull/26374 to get rid of that damn Android issue and make it comparable to iOS?

[alloy]

Flipper 0.41.1 with simplified CocoaPods/Xcode setup https://github.com/facebook/react-native/commit/7bb1c4e1b8715a5c9cb6f9e4e77a6df783481d3d.