22 - A year in Review for React Native

2022, what a year it was!

Over the last year we had the opportunity to ship 4 releases, with highly requested features and changes that bring innovation to our framework. We’re going to walk through crucial changes such as the New Architecture, Hermes, TypeScript and much more.

But our changes go beyond just technical. This year we had the opportunity to see so much engagement from the community with contributions that ended up shaping the future of our ecosystem.

Join me in this talk as I walk you through how we evolved in 2022, both as a framework and as a community. If you missed any of the React Native releases we shipped last year, you definitely don’t want to miss this talk!

Transcript

2. Nicola Corti he/him @cortinico 22 - A year in Review for React Native
3. he/him Android @ React Native twitter.com/cortinico github.com/cortinico ncorti.com Nicola Corti
4. The New Architecture Experimental ⚠
5. The New Architecture 2019
6. The New Architecture 2019 2020 2021
7. The New Architecture 2020 2021 2022 2023
8. 2022 2023
9. 2022 2023
10. New Architecture Opt in $ RCT_NEW_ARCH_ENABLED=1 pod install newArchEnabled=true $ npx react-native run-android 0.68 $ npx react-native run-ios Experimental ⚠
11. React 18 0.69 0.68 Experimental ⚠
12. React 18 0.69 0.68 Experimental ⚠
13. React 18 0.69 0.68 Experimental ⚠
14. 0.69 Bundled Hermes 0.68 0.69.9
15. 0.69 0.68 Hermes as Default 0.70 • Startup Time • 51% faster on Android • 63% faster on iOS • Memory Consumption • Down 93Mb on Android • Down 13Mb on iOS • IPA size increase of ~4.4Mb JSC Hermes
16. 0.69 0.68 Modern Languages Kotlin • Website fully updated • More to come in the future 0.70
17. 0.69 0.68 Modern Languages • The new app template is now is TypeScripts • TS Types have been moved to the React Native repo TypeScript 0.71 0.70
18. 0.69 0.68 Modern Languages • The new app template is now is TypeScripts • TS Types have been moved to the React Native repo TypeScript 0.71 0.70
19. Web props 0.69 0.68 const MyImage = (props) => { return <Image /> ; }; 0.71 0.70
20. Web props 0.69 0.68 const MyImage = (props) => { return <Image source={{ uri: 'https: // react.dev/favicon.ico'}} /> ; }; 0.71 0.70
21. Web props 0.69 0.68 const MyImage = (props) => { return <Image src={'https: // react.dev/favicon.ico'} /> ; }; • Accessibility: aria-label, aria-labelledby, aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext • Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet, width • TextInput: autoComplete, enterKeyHint, inputMode, readOnly, row 0.71 0.70
22. Flexbox Gap 0.69 0.68 • Hard to achieve layout with non-uniform margins • New in 0.71: gap, rowGap, columnGap • Today possible thanks to Yoga 0.71 0.70
23. Flexbox Gap 0.69 0.68 • Hard to achieve layout with non-uniform margins • New in 0.71: gap, rowGap, columnGap • Today possible thanks to Yoga 0.71 0.70
24. Build Speed 0.69 Android 0.71 32 sec 0.68 Experimental ⚠ Android 0.70 10min 12sec 0.71 0.70
25. Build Speed 0.69 Android 0.71 32 sec 0.68 Experimental ⚠ Android 0.70 10min 12sec 0.71 0.70
26. 0.69 0.68 Disk Space Experimental ⚠ 0.71 0.70
27. 0.69 0.68 Disk Space Experimental ⚠ 0.71 0.70
28. 0.69 0.68 Disk Space • Android Artifacts downloaded once per machine • Cached locally across projects per version. Experimental ⚠ 0.71 0.70
29. 0.69 0.68 Template Cleanup Experimental ⚠ 0.71 0.70
30. 0.69 0.68 Template Cleanup • Wow so red 🟥 🟥 🟥 • Removed all the C++ code Experimental ⚠ 0.71 0.70
31. 0.69 0.68 Template Cleanup • Wow so red 🟥 🟥 🟥 • Removed all the C++ code Experimental ⚠ 0.71 0.70
32. 0.69 0.68 Java to 11 Node to 16 AGP to 7.4.2 Gradle to 7.5.1 Flipper to 0.125.0 NDK to 23 compileSdkVersion to 23 iOS to 12.4 React to 18.2.0 Ruby to >= 2.6.10 Metro to 0.73.9 SoLoader to 0.10.4 CLI to 10.2.2 Jest to 29.x Folly to 2021.07.22.00 JSC to 250231.0.0 CocoaPods to >= 1.11.3 Kotlin to 1.6.10 0.71 0.70
33. Core Contributor Summit 0.69 0.68 0.71 0.70
34. RFC 0.69 0.68 0.71 0.70
35. RFC 0.69 0.68 0.71 0.70
36. 0.69 0.68 0.72 Author: Ruslan Lesiutin <hoxy@meta.com> Date: Fri Mar 17 05:03:25 2023 -0700 | RN Monorepo | Migrate to package (#36434) Summary: Pull Request resolved: https: // github.com/facebook/react-native/pull/36434 Changelog: [Internal] This is a squashed stack of 18 commits, starting from D43202126 allow-large-files Reviewed By: cortinico Differential Revision: D43977381 fbshipit-source-id: 0da552ddb85f2f61a0be0ef071915b35f3f8555c .circleci/Dockerfiles/Dockerfile.android | 16 + -- .circleci/Dockerfiles/scripts/run-ci-e2e-tests.sh | 2 +- .circleci/config.yml | 77 ++++++------ .eslintignore | 6 +- .eslintrc.js | 6 +- .flowconfig | 15 + -- .flowconfig.android | 15 + -- Monorepo // * => packages/react-native /* 0.71 0.70
37. 0.71 0.70 0.69 0.68 0.72 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorCodeFrame-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorFooter-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorHeader-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorMesageHeader-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorReactFrames-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorSection-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorSourceMapStatus-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorStackFrame-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxInspectorStackFrames-test.js.snap | 0 {Libraries => packages/react-native/Libraries}/LogBox/UI/ _ _ tests __ / _ _ snapshots __ /LogBoxMessage-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/UI/ __ tests _ _ / __ snapshots __ /LogBoxNotification-test.js.snap | 0 {Libraries => packages/react-native/Libraries}/LogBox/ __ tests __ /LogBox-integration-test.js | 0 {Libraries => packages/react-native/Libraries}/LogBox/ __ tests __ /LogBox-test.js | 0 {Libraries => packages/react-native/Libraries}/LogBox/ __ tests __ /LogBoxInspectorContainer-test.js | 0 {Libraries => packages/react-native/Libraries}/LogBox/ __ tests __ /LogBoxNotificationContainer-test.js | 0 {Libraries => packages/react-native/Libraries}/LogBox/ __ tests __ / __ fixtures __ /ReactWarningFixtures.js | 0 .. . /react-native/Libraries}/LogBox/ __ tests _ _ / _ _ snapshots __ /LogBoxInspectorContainer-test.js.snap | 0 .. . /react-native/Libraries}/LogBox/ __ tests _ _ / _ _ snapshots __ /LogBoxNotificationContainer-test.js.snap | 0 {Libraries => packages/react-native/Libraries}/Modal/Modal.d.ts | 0 {Libraries => packages/react-native/Libraries}/Modal/Modal.js | 0 {Libraries => packages/react-native/Libraries}/Modal/ModalInjection.js | 0 {Libraries => packages/react-native/Libraries}/Modal/NativeModalManager.js | 0 {Libraries => packages/react-native/Libraries}/Modal/RCTModalHostViewNativeComponent.js | 0 {Libraries => packages/react-native/Libraries}/Modal/ __ tests _ _ /Modal-test.js | 0 {Libraries => packages/react-native/Libraries}/Modal/ __ tests _ _ / __ snapshots __ /Modal-test.js.snap | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTAnimationDriver.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTDecayAnimation.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTDecayAnimation.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTEventAnimation.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTEventAnimation.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTFrameAnimation.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTFrameAnimation.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTSpringAnimation.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Drivers/RCTSpringAnimation.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTAdditionAnimatedNode.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTAdditionAnimatedNode.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTAnimatedNode.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTAnimatedNode.m | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTColorAnimatedNode.h | 0 {Libraries => packages/react-native/Libraries}/NativeAnimation/Nodes/RCTColorAnimatedNode.m | 0 => Monorepo // * => packages/react-native /*
38. Metro 0.69 0.68 // metro.config.js const config = { resolver: { }, }; 0.72 0.71 0.70
39. Metro 0.69 0.68 // metro.config.js const config = { resolver: { unstable_enablePackageExports: true, }, }; Experimental ⚠ 0.72 0.71 0.70
40. Metro 0.69 0.68 // metro.config.js const config = { resolver: { unstable_enablePackageExports: true, unstable_enableSymlinks: true, }, }; Experimental ⚠ 0.72 0.71 0.70
41. Metro 0.69 0.68 // metro.config.js const config = { resolver: { unstable_enablePackageExports: true, unstable_enableSymlinks: true, }, }; Experimental ⚠ 0.72 0.71 0.70
42. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = { project:{ android: { }, }, }; Experimental ⚠ 0.72 0.71 0.70
43. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = { project:{ android: { unstable_reactLegacyComponentNames: [ ] }, }, }; Experimental ⚠ 0.72 0.71 0.70
44. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = { project:{ android: { unstable_reactLegacyComponentNames: [ "RNTMyLegacyNativeView" ] }, }, }; Experimental ⚠ 0.72 0.71 0.70
45. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = { project:{ android: { unstable_reactLegacyComponentNames: [ "RNTMyLegacyNativeView" ] }, ios: { unstable_reactLegacyComponentNames: [ "RNTMyLegacyNativeView" ] } }, }; Experimental ⚠ 0.72 0.71 0.70
46. 2020 2021 2022 2023
47. 2021 2022 2023 2024
48. Java to 11 Node to 16 AGP to 7.4.2 Gradle to 7.5.1 Flipper to 0.125.0 NDK to 23 compileSdkVersion to 23 iOS to 12.4 React to 18.2.0 Ruby to >= 2.6.10 Metro to 0.73.9 SoLoader to 0.10.4 CLI to 10.2.2 Jest to 29.x Folly to 2021.07.22.00 JSC to 250231.0.0 CocoaPods to >= 1.11.3 Kotlin to 1.6.10
49. Java to 11 N ode to 16 AG P to 7.4.2 G radle to 7.5.1 Flipper to 0.125.0 N D K to 23 com pileSdkVersion to 23 iO S to 12.4 React to 18.2.0 Ruby to >= 2.6.10 M etro to 0.73.9 SoLoader to 0.10.4 CLI to 10.2.2 Jest to 29.x Folly to 2021.07.22.00 JSC to 250231.0.0 CocoaPods to >= 1.11.3 Kotlin to 1.6.10 SoLoader to 0.10.4 Version U pgrades U nm aintained packages C rashes C ++ A stable React Native Experience A N R C rashes
50. Nicola Corti @cortinico Thank You & Contribs are Welcome
51. Sathya Gunasekaran @gsathya See you at the lounge at 1.30 PM? Gijs Weterings @GijsWeterings Blake Friedman @blakef Moti Zilberman @motiz88 Ruslan Shestopalyuk @rshest Rob Hogan @robhogan Samuel Susla @sammy-SC Alex Hunt @alxhnt Nicola Corti @cortinico Aleksandar Andelkovic @Andjeliko