Bringing the New React Native Architecture to the OSS community

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.

Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.

But migrating an entire ecosystem to a New Architecture is no easy task.

To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.

In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

Transcript

1. View Slide

2. Bringing the New
   
   
   React Native Architecture
   
   
   to the OSS community
   Nicola Corti
   
   
   he/him
   
   
   @cortinico
   

   View Slide

3. he/him
   
   
   Android @ React Native
   
   
   twitter.com/cortinico
   

   

   github.com/cortinico
   

   

   ncorti.com
   Nicola Corti
   

   View Slide

4. React Native New Architecture
   

   View Slide

5. Parashuram N - React Native's New Architecture
   
   
   React Conf 2018
   
   
   53K views 3 years ago
   Joshua Gross - The New React Native:
   

   Bringing the Fabric renderer to the “Facebook” app
   
   
   RNEU 2021
   15K views 2 years ago
   2.5K views 6 months ago
   Emily Janzer - The New React Native
   
   
   RNEU 2019
   React Native New Architecture
   

   View Slide

6. Parashuram N - React Native's New Architecture
   
   
   React Conf 2018
   
   
   53K views 3 years ago
   Joshua Gross - The New React Native:
   

   Bringing the Fabric renderer to the “Facebook” app
   
   
   RNEU 2021
   15K views 2 years ago
   2.5K views 6 months ago
   Emily Janzer - The New React Native
   
   
   RNEU 2019
   React Native New Architecture
   

   View Slide

7. View Slide

8. 2018 Q2 2019
   

   View Slide

9. 2018 Q2 2019 2020 2021
   

   View Slide

10. 2020 2021 2022 2023
    

    View Slide

11. Why
    

    View Slide

12. Why
    Why
    

    View Slide

13. Why
    • The Bridge
    
    
    • Shared C++ Implementation
    
    
    • Sharing of platform-specific
    

    optimizations
    
    
    • Type Safety
    
    
    • New Capabilites
    

    View Slide

14. Pillars
    Fabric TurboModule
    Codegen Bridgless
    

    View Slide

15. Codegen
    

    View Slide

16. Codegen
    import type {TurboModule} from 'react-native';
    
    import {TurboModuleRegistry} from 'react-native';
    

    View Slide

17. Codegen
    import type {TurboModule} from 'react-native';
    
    import {TurboModuleRegistry} from 'react-native';
    
    export interface Spec extends TurboModule {
    
    answerTheUltimateQuestion(input: string): number;
    
    }
    
    

    View Slide

18. Codegen
    import type {TurboModule} from 'react-native';
    
    import {TurboModuleRegistry} from 'react-native';
    
    export interface Spec extends TurboModule {
    
    answerTheUltimateQuestion(input: string): number;
    
    }
    
    export default TurboModuleRegistry.getEnforcing('NativeAnswerSolver');
    
    

    View Slide

19. Codegen
    import type {TurboModule} from 'react-native';
    
    import {TurboModuleRegistry} from 'react-native';
    
    export interface Spec extends TurboModule {
    
    answerTheUltimateQuestion(input: string): number;
    
    }
    
    export default TurboModuleRegistry.getEnforcing('Na
    

    View Slide

20. Codegen
    import type {TurboModule} from 'react-native';
    
    import {TurboModuleRegistry} from 'react-native';
    
    export interface Spec extends TurboModule {
    
    answerTheUltimateQuestion(input: string): number;
    
    }
    
    export default TurboModuleRegistry.getEnforcing('Na
    

    View Slide

21. Codegen
    

    View Slide

22. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule
    
    implements ReactModuleWithSpec, TurboModule {
    
    }
    
    

    View Slide

23. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule
    
    implements ReactModuleWithSpec, TurboModule {
    
    
    
    public NativeAnswerSolverSpec(ReactApplicationContext reactContext) {
    
    super(reactContext);
    
    }
    
    }
    
    

    View Slide

24. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule
    
    implements ReactModuleWithSpec, TurboModule {
    
    
    
    public NativeAnswerSolverSpec(ReactApplicationContext reactContext) {
    
    super(reactContext);
    
    }
    
    @ReactMethod(isBlockingSynchronousMethod = true)
    
    @DoNotStrip
    
    public abstract double answerTheUltimateQuestion(String input);
    
    }
    
    

    View Slide

25. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJav
    implements ReactModuleWithSpec, TurboModule {
    
    
    
    public NativeAnswerSolverSpec(ReactApplicationContext reactContext) {
    
    super(reactContext);
    
    }
    
    @ReactMethod(isBlockingSynchronousMethod = true)
    
    @DoNotStrip
    
    public abstract double answerTheUltimateQuestion(String input);
    
    }
    
    

    View Slide

26. Codegen
    

    View Slide

27. Codegen
    @protocol NativeAnswerSolverSpec
    
    - (NSNumber *)answerTheUltimateQuestion:(NSString *)input;
    
    @end
    
    namespace facebook {
    
    namespace react {
    
    /**
    
    * ObjC
    ++
    class for module 'NativeAnswerSolver'
    
    */
    
    
    class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule {
    
    public:
    
    NativeAnswerSolverSpecJSI(const ObjCTurboModule
    ::
    InitParams &params);
    
    };
    
    }
    //
    namespace react
    
    }
    //
    namespace facebook
    

    View Slide

28. Codegen
    @protocol NativeAnswerSolverSpec
    
    - (NSNumber *)answerTheUltimateQuestion:(NSString *)input;
    
    @end
    
    namespace facebook {
    
    namespace react {
    
    /**
    
    * ObjC
    ++
    class for module 'NativeAnswerSolver'
    
    */
    
    
    class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule {
    
    public:
    
    NativeAnswerSolverSpecJSI(const ObjCTurboModule
    ::
    InitParams &params);
    
    };
    
    }
    //
    namespace react
    
    }
    //
    namespace facebook
    

    View Slide

29. Build Tools
    • C++ - CMake files
    
    
    • Java/Kt - React Native Gradle Plugin
    
    
    • To replace react.gradle in the future
    • Custom logic in Ruby
    Gradle
    ocoaPods
    

    View Slide

30. Hermes
    • Currently recommended
    

    for the New Architecture
    
    
    • 0.69 to consume a Bundled
    Version of Hermes
    
    
    • 0.70 to have Hermes as the
    default engine
    

    View Slide

31. Modern Languages
    • Now supported by the Codegen
    • Currently fully supported in RN
    
    
    • react-native-website#3018
    
    
    • Expect Template to be updated
    in the future
    • We’re looking into it
    Typescript
    Swift
    Kotlin
    

    View Slide

32. Timeline &
    
    
    Versions
    

    View Slide

33. Timeline
    68
    69
    70
    71
    • New Architecture Support
    • React 18 Support
    
    
    • Bundled Hermes
    • Hermes as default
    
    
    • Android NewArch Autolinking
    
    
    • CMake Support
    
    
    • Unified Codegen Config
    • To the infinity… 72
    • Simplified Templates
    
    
    • (More to come…)
    

    View Slide

34. React 18 & React Native
    React Native
    .67
    React Native
    .68
    React Native
    .69/.70
    

    Old Arch
    React Native
    .69/.70
    

    New Arch
    React 17
    React 18
    

    w/ Concurrent
    
    
    React
    React 18
    
    
    w/o Concurrent
    
    
    React
    

    View Slide

35. React 18 & React Native
    React Native
    .67
    React Native
    .68
    React Native
    .69/.70
    

    Old Arch
    React Native
    .69/.70
    

    New Arch
    React 17
    React 18
    

    w/ Concurrent
    
    
    React
    React 18
    
    
    w/o Concurrent
    
    
    React
    

    View Slide

36. React 18 & React Native
    React Native
    .67
    React Native
    .68
    React Native
    .69/.70
    

    Old Arch
    React Native
    .69/.70
    

    New Arch
    React 17
    React 18
    

    w/ Concurrent
    
    
    React
    React 18
    
    
    w/o Concurrent
    
    
    React
    

    View Slide

37. React 18 & React Native
    React Native
    .67
    React Native
    .68
    React Native
    .69/.70
    

    Old Arch
    React Native
    .69/.70
    

    New Arch
    React 17
    React 18
    

    w/ Concurrent
    
    
    React
    React 18
    
    
    w/o Concurrent
    
    
    React
    

    View Slide

38. React 18 & React Native
    React Native
    .67
    React Native
    .68
    React Native
    .69/.70
    

    Old Arch
    React Native
    .69/.70
    

    New Arch
    React 17
    React 18
    

    w/ Concurrent
    
    
    React
    React 18
    
    
    w/o Concurrent
    
    
    React
    

    View Slide

39. Docs &
    
    
    Material
    

    View Slide

40. It’s all about Docs…
    

    View Slide

41. It’s all about Docs…
    

    View Slide

42. Official Docs
    

    View Slide

43. Official Docs
    

    View Slide

44. Official Docs
    

    View Slide

45. Deep Dives
    

    View Slide

46. Deep Dives
    

    View Slide

47. New App Template
    $ npx react-native init MyAwesomeApp
    

    View Slide

48. New App Template
    $ pod install
    

    View Slide

49. New App Template
    $ RCT_NEW_ARCH_ENABLED=1 pod install
    

    View Slide

50. New App Template
    $ RCT_NEW_ARCH_ENABLED=1 pod install
    $ npx react-native run-ios
    

    View Slide

51. New App Template
    # android/gradle.properties
    
    # Use this property to enable support to the new architecture.
    
    # This will allow you to use TurboModules and the Fabric render in
    
    # your application. You should enable this flag either if you want
    
    # to write custom TurboModules/Fabric components OR use libraries that
    
    # are providing them.
    
    newArchEnabled=false
    
    

    View Slide

52. New App Template
    $ npx react-native run-android
    # android/gradle.properties
    
    # Use this property to enable support to the new architecture.
    
    # This will allow you to use TurboModules and the Fabric render in
    
    # your application. You should enable this flag either if you want
    
    # to write custom TurboModules/Fabric components OR use libraries that
    
    # are providing them.
    
    newArchEnabled=true
    
    

    View Slide

53. New App Template
    

    View Slide

54. New App Template
    

    View Slide

55. New Architecture Working Group
    

    View Slide

56. New Architecture Working Group
    

    View Slide

57. New Architecture Working Group
    

    View Slide

58. App
    
    
    Sample
    
    
    Repo
    

    View Slide

59. App
    
    
    Sample
    
    
    Repo
    

    View Slide

60. App
    
    
    Sample
    
    
    Repo
    

    View Slide

61. Library
    
    
    Sample
    
    
    Repo
    

    View Slide

62. Library Spotlight
    react-native-slider: Migrated
    
    
    react-native-reanimated: Migrated
    

    In the process of testing and profiling for performances
    
    
    react-native-template-new-architecture: Migrated.
    

    Gradually adopting/testing more fellow Libraries
    
    
    react-native-template-typescript: Migrated
    
    
    react-native-webview: Started
    
    
    react-native-navigation: Ongoing
    
    
    react-native-pager-view: Ongoing
    
    
    react-native-screens: Migrated
    
    
    react-native-gesture-handler: Migrated
    

    View Slide

63. React Native New Architecture
    

    View Slide

64. React Native New Architecture
    Migrating your whole React Native App to the New Architecture
    
    
    5 mins read
    https:// blog.awesomecompany.com/
    Lessons Learned from using Fabric and TurboModules in production
    
    
    7 mins read
    https:// blog.anotherwesomecompany.com/
    How we approached the New Architecture at YAC
    
    
    5 mins read
    https:// blog.yetanothercompay.com/
    

    View Slide

65. Tell us your
    
    
    migration story
    

    View Slide

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

    View Slide