Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Nicola Corti he/him @cortinico 22 - A year in Review for React Native

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The New Architecture Experimental ⚠

Slide 5

Slide 5 text

The New Architecture 2019

Slide 6

Slide 6 text

The New Architecture 2019 2020 2021

Slide 7

Slide 7 text

The New Architecture 2020 2021 2022 2023

Slide 8

Slide 8 text

2022 2023

Slide 9

Slide 9 text

2022 2023

Slide 10

Slide 10 text

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 ⚠

Slide 11

Slide 11 text

React 18 0.69 0.68 Experimental ⚠

Slide 12

Slide 12 text

React 18 0.69 0.68 Experimental ⚠

Slide 13

Slide 13 text

React 18 0.69 0.68 Experimental ⚠

Slide 14

Slide 14 text

0.69 Bundled Hermes 0.68 0.69.9

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Web props 0.69 0.68 const MyImage = (props) => { return ; }; 0.71 0.70

Slide 20

Slide 20 text

Web props 0.69 0.68 const MyImage = (props) => { return ; }; 0.71 0.70

Slide 21

Slide 21 text

Web props 0.69 0.68 const MyImage = (props) => { return ; }; • 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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

0.69 0.68 Disk Space Experimental ⚠ 0.71 0.70

Slide 27

Slide 27 text

0.69 0.68 Disk Space Experimental ⚠ 0.71 0.70

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

0.69 0.68 Template Cleanup Experimental ⚠ 0.71 0.70

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Core Contributor Summit 0.69 0.68 0.71 0.70

Slide 34

Slide 34 text

RFC 0.69 0.68 0.71 0.70

Slide 35

Slide 35 text

RFC 0.69 0.68 0.71 0.70

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Metro 0.69 0.68 // metro.config.js const config = { resolver: { }, }; 0.72 0.71 0.70

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

2020 2021 2022 2023

Slide 47

Slide 47 text

2021 2022 2023 2024

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Nicola Corti @cortinico Thank You & Contribs are Welcome

Slide 51

Slide 51 text

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