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. Nicola Corti
    he/him
    @cortinico
    22 - A year in Review for
    React Native

    View full-size slide

  2. he/him
    Android @ React Native
    twitter.com/cortinico
    github.com/cortinico
    ncorti.com
    Nicola Corti

    View full-size slide

  3. The New Architecture
    Experimental ⚠

    View full-size slide

  4. The New Architecture
    2019

    View full-size slide

  5. The New Architecture
    2019 2020 2021

    View full-size slide

  6. The New Architecture
    2020 2021 2022 2023

    View full-size slide

  7. 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 ⚠

    View full-size slide

  8. React 18
    0.69
    0.68
    Experimental ⚠

    View full-size slide

  9. React 18
    0.69
    0.68
    Experimental ⚠

    View full-size slide

  10. React 18
    0.69
    0.68
    Experimental ⚠

    View full-size slide

  11. 0.69
    Bundled Hermes
    0.68
    0.69.9

    View full-size slide

  12. 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

    View full-size slide

  13. 0.69
    0.68
    Modern
    Languages
    Kotlin
    • Website fully updated
    • More to come in the future
    0.70

    View full-size slide

  14. 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

    View full-size slide

  15. 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

    View full-size slide

  16. Web props
    0.69
    0.68
    const MyImage = (props)
    =>
    {

    return />
    ;

    };

    0.71
    0.70

    View full-size slide

  17. Web props
    0.69
    0.68
    const MyImage = (props)
    =>
    {

    return //
    react.dev/favicon.ico'}}
    />
    ;

    };

    0.71
    0.70

    View full-size slide

  18. Web props
    0.69
    0.68
    const MyImage = (props)
    =>
    {

    return //
    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

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. Build Speed
    0.69
    Android 0.71
    32 sec
    0.68
    Experimental ⚠
    Android 0.70
    10min 12sec
    0.71
    0.70

    View full-size slide

  22. Build Speed
    0.69
    Android 0.71
    32 sec
    0.68
    Experimental ⚠
    Android 0.70
    10min 12sec
    0.71
    0.70

    View full-size slide

  23. 0.69
    0.68
    Disk Space
    Experimental ⚠
    0.71
    0.70

    View full-size slide

  24. 0.69
    0.68
    Disk Space
    Experimental ⚠
    0.71
    0.70

    View full-size slide

  25. 0.69
    0.68
    Disk Space
    • Android Artifacts
    downloaded once per
    machine
    • Cached locally across
    projects per version.
    Experimental ⚠
    0.71
    0.70

    View full-size slide

  26. 0.69
    0.68
    Template
    Cleanup
    Experimental ⚠
    0.71
    0.70

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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

    View full-size slide

  30. Core Contributor Summit
    0.69
    0.68 0.71
    0.70

    View full-size slide

  31. RFC
    0.69
    0.68 0.71
    0.70

    View full-size slide

  32. RFC
    0.69
    0.68 0.71
    0.70

    View full-size slide

  33. 0.69
    0.68 0.72
    Author: Ruslan Lesiutin

    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

    View full-size slide

  34. 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
    /*

    View full-size slide

  35. Metro
    0.69
    0.68
    //
    metro.config.js

    const config = {

    resolver: {

    },

    };

    0.72
    0.71
    0.70

    View full-size slide

  36. Metro
    0.69
    0.68
    //
    metro.config.js

    const config = {

    resolver: {

    unstable_enablePackageExports: true,

    },

    };

    Experimental ⚠
    0.72
    0.71
    0.70

    View full-size slide

  37. Metro
    0.69
    0.68
    //
    metro.config.js

    const config = {

    resolver: {

    unstable_enablePackageExports: true,

    unstable_enableSymlinks: true,

    },

    };

    Experimental ⚠
    0.72
    0.71
    0.70

    View full-size slide

  38. Metro
    0.69
    0.68
    //
    metro.config.js

    const config = {

    resolver: {

    unstable_enablePackageExports: true,

    unstable_enableSymlinks: true,

    },

    };

    Experimental ⚠
    0.72
    0.71
    0.70

    View full-size slide

  39. New Arch Interop
    0.69
    0.68
    //
    react-native.config.js

    module.exports = {

    project:{

    android: {

    },

    },

    };

    Experimental ⚠
    0.72
    0.71
    0.70

    View full-size slide

  40. New Arch Interop
    0.69
    0.68
    //
    react-native.config.js

    module.exports = {

    project:{

    android: {

    unstable_reactLegacyComponentNames: [ ]

    },

    },

    };

    Experimental ⚠
    0.72
    0.71
    0.70

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 2020 2021 2022 2023

    View full-size slide

  44. 2021 2022 2023 2024

    View full-size slide

  45. 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

    View full-size slide

  46. 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

    View full-size slide

  47. Nicola Corti
    @cortinico
    Thank You & Contribs are Welcome

    View full-size slide

  48. 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

    View full-size slide