Upgrade to Pro — share decks privately, control downloads, hide ads and more …

22 - A year in Review for React Native

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!

Nicola Corti

November 26, 2023
Tweet

More Decks by Nicola Corti

Other Decks in Programming

Transcript

  1. 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 ⚠
  2. 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
  3. 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
  4. 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
  5. Web props 0.69 0.68 const MyImage = (props) => {

    return <Image /> ; }; 0.71 0.70
  6. Web props 0.69 0.68 const MyImage = (props) => {

    return <Image source={{ uri: 'https: // react.dev/favicon.ico'}} /> ; }; 0.71 0.70
  7. 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
  8. 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
  9. 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
  10. 0.69 0.68 Disk Space • Android Artifacts downloaded once per

    machine • Cached locally across projects per version. Experimental ⚠ 0.71 0.70
  11. 0.69 0.68 Template Cleanup • Wow so red 🟥 🟥

    🟥 • Removed all the C++ code Experimental ⚠ 0.71 0.70
  12. 0.69 0.68 Template Cleanup • Wow so red 🟥 🟥

    🟥 • Removed all the C++ code Experimental ⚠ 0.71 0.70
  13. 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
  14. 0.69 0.68 0.72 Author: Ruslan Lesiutin <[email protected]> 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
  15. 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 /*
  16. Metro 0.69 0.68 // metro.config.js const config = { resolver:

    { unstable_enablePackageExports: true, }, }; Experimental ⚠ 0.72 0.71 0.70
  17. Metro 0.69 0.68 // metro.config.js const config = { resolver:

    { unstable_enablePackageExports: true, unstable_enableSymlinks: true, }, }; Experimental ⚠ 0.72 0.71 0.70
  18. Metro 0.69 0.68 // metro.config.js const config = { resolver:

    { unstable_enablePackageExports: true, unstable_enableSymlinks: true, }, }; Experimental ⚠ 0.72 0.71 0.70
  19. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = {

    project:{ android: { }, }, }; Experimental ⚠ 0.72 0.71 0.70
  20. New Arch Interop 0.69 0.68 // react-native.config.js module.exports = {

    project:{ android: { unstable_reactLegacyComponentNames: [ ] }, }, }; Experimental ⚠ 0.72 0.71 0.70
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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