About RN new architecture

[sebastianMagnaldi]

Hey guys !

I have a question related with Reanimated 3.x and react-native new archictecture.
Basically the question is if my application (rn 0.74) is not using the new architecture but i'm using reanimated 3.x is reanimated using the new architecture or my application must have the new arch enabled to allow reanimated to use it ?

[MatiPl01]

Hey!

Reanimated has no impact on which architecture your app uses and it won't use a different architecture than is used by your app. If your app uses the old architecture, reanimated will use the old one as well. If you decide to migrate to the new architecture, it will start using the new architecture code in reanimated.

tl;dr

Reanimated runs in the same architecture as your app

[MatiPl01]

You are welcome!

[santitopo]

Hey @MatiPl01 ! Thanks for clarifying.

imo, the whole topic of the New Arch has been a bit hard to follow through the years, even though it’s been around for a while already. Questions like what implications it's had on existing libraries, how mature it is, and what parts of the new architecture are still experimental remain unclear to me. I'm happy with this though because it means that all the efforts of the responsible teams have been focused on the development of the tool rather than on advertising it. Hoping that with the next version of RN which will bring it ON by default everything will start being more clear!

Still, adding to the question above... I remember reading long ago that Reanimated 2 was based on TurboModules and JSI (in fact I think it was the first library to use this new API), which if I'm not wrong are two of the pillars of the New Arch. Reference to the docs where this is mentioned. Would you mind lingering on this? Thanks for your time!

[sebastianMagnaldi]

Really interesting question. I'm changing the status of the question back to "Unanswered" bc i really want to know the answer to your question @santitopo and also i'd like to stress the point of what would happen with TurboModules, JSI and the Threading Model if the app is not using the new architecture ?

Is it correct to say if the app where reanimated is installed is not using the new architecture then reanimated is not going to use TurboModules and JSI ?

[tomekzaw]

I remember reading long ago that Reanimated 2 was based on TurboModules and JSI (in fact I think it was the first library to use this new API), which if I'm not wrong are two of the pillars of the New Arch. Reference to the docs where this is mentioned. Would you mind lingering on this? Thanks for your time!

Reanimated was the first third-party React Native library to use JSI. JSI (JavaScript Interface) is a C++ API for interacting with JS runtimes such as JSC, Hermes or V8. JSI is indeed one of the pilliars of the architecture, however it's just a building block of the new architecture and it's alslo available to be used on the old architecture. Reanimated uses JSI since 2020 (I think) no matter the architecture.

TurboModules are the spiritual successors to NativeModules. TurboModule is an instance of jsi::HostObject with some logic written in C++ to dispatch JS calls to respective C++ methods. This logic is generated during build time by @react-native/codegen based on the specification (spec) of the API of given TurboModule written either in Flow (JS dialect developed by Facebook/Meta) or Typescript. Finally, TurboModules also come with autolinking mechanism (in React Native CLI) so developer don't need to configure (link) it manually.

Back in 2020, neither codegen nor autolinking for TurboModules worked out-of-the-box in RN apps so we couldn't go that way back then. The workaround was to generate code once locally and commit it to the repository instead of relying on codegen on the app side. In fact, this is still how things work, because NativeReanimatedModule (one of the internal pieces of Reanimated) used to (and, in fact, still does) inherit from TurboModule class from react-native (actually, we used to commit TurboModule.h file to the repo but now we #include it like other react-native headers).

The current state (as of 2024) is that Reanimated uses RN TurboModule (using codegen and autolinking) with one method called install that injects NativeReanimatedModuleto the RN runtime (which inherits fromTurboModule` class but doesn't use codegen or autolinking).

For more details on the new architecture, I'd recommend watching my talk from April 2024: https://www.youtube.com/watch?v=jf0WTF4z8O0

Is it correct to say if the app where reanimated is installed is not using the new architecture then reanimated is not going to use TurboModules and JSI ?

@santitopo Not really. Reanimated always uses JSI, no matter the architecture. Also, Reanimated uses TurboModule class internally no matter the architecture. However, Reanimated will use TurboModule mechanism to install itself (inject JSI bindings) on the new architecture, but this mechanism is backward-compatible and also works on the old architecture.

[sebastianMagnaldi]

@tomekzaw thanks for such a complete answer. This topic is pretty interesting and i really like the way you guys have managed to use some of the main buildings blocks of the new architecture (and bringing their benefits) without forcing us to have it enabled in our apps.

For sure i'll be watching your talk on the new arch later today.