📚 [Guide] Create a backward compatible Turbomodule

[cipolleschi]

This PR contains a first draft of a Guide to create a TurboModule which is backward compatible with the new architecture.

This guide is intended to be used as a reference to understand better how the backward compatibility can be achieved and what are the differences between a Native Module and a Turbomodule, from a developer perspective.

[netlify]

✅ Deploy Preview for react-native ready!

🔨 Explore the source changes: 95db79d

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native/deploys/6239a2c0899af50008deb46e

😎 Browse the preview: https://deploy-preview-3023--react-native.netlify.app

[Simek]

Hello @cipolleschi, thank you for the great work on fixing and extending the documentation lately! 👍

It looks like the page is not linked in any sidebar, which makes the page only accessible via URL. You probably want to add this page somewhere in there:

• https://github.com/facebook/react-native-website/blob/main/website/sidebars.json#L83-L111

Other that that, I have left two, small suggestions according to the new page content.

[cipolleschi]

Hi @Simek! Thanks for the suggestions. I'll go through applying them now.

About the sidebar thing, I left the article out on purpose for two reasons:

1. It is not complete (missing the android parts) so I didn't want it to be found by final users.
2. I'd like to discuss the structure of the New Architecture section because I think it could be organidsed in a more linear way.

What do you think?

[cipolleschi]

I should have fixed all the comments! :D

[Simek]

Suggested change

	```sh title=""
	```sh

Just a small fix suggestion.

[Simek]

Thank you for the quick updates! For the formatting and website perspective this LGTM.

Let's have a @cortinico look at the technical side of this. 🙂

There are few more small formatting (capitalization of Metro, JavaScript, TypeScript etc.) and punctuation issues (mostly missing dots at the end of sentences), but since this still a draft we can correct this in the future.

[cipolleschi]

Great, thanks!
I should have fixed also the capitalizations and the punctuation issues that I could find.

[cortinico]

Suggested change

	"author": "<Your Name> <your_email@your_provide.com> (https://github.com/<your_github_handle>)",
	"author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",

[cortinico]

I think that the "Consider that most of the code of a Native Module is needed for a Turbomodule" is confusing for the reader.

If a reader is looking into creating a TurboModule without dealing with backward compat, probably is not even reading this page right?

[cipolleschi]

I agree. I moved the sentence to the previous paragraph, adding some more context.

[cortinico]

Great stuff 👍

A couple of things that are worth mentioning:

1. We should potentially mention that the New Architecture approach would work for apps that have the TM system enabled.
2. For that reason, we could link users to this page: https://reactnative.dev/docs/next/new-architecture-app-modules-ios
3. We should clarify what happens if you import the New Arch file but you have the TM system disabled (i.e. you're on the old arch).

[cipolleschi]

Thanks!

For your points 1 and 2, I added a sentence at line 426.

It's not clear to me what do you mean for your point 3, though. The whole point of the article is that we can install the module in both the architecture. Some problem arises if:

1. A user in the old architecture runs RCT_NEW_ARCH_ENABLED=1 pod install
2. A user in the new architecture runs pod install

But I think that these are clearly explained throughout the guide and also with the summary. I think that the user can expect some error if it forget about these steps. What do you think?

[cortinico]

It's not clear to me what do you mean for your point 3, though. The whole point of the article is that we can install the module in both the architecture. Some problem arises if:

Discussed offline but following up here for the sake of transparency.

I think we will adjust the guide a bit to adopt the approach followed by some of the Software Mansion library:

https://github.com/software-mansion/react-native-gesture-handler/blob/a144c0ebaba3b544d3455c7eced084d66dff5d7e/src/components/GestureHandlerButton.tsx#L6-L10

Ideally we would like to don't ask the user to update the import but just have an abstraction that will expose the correct object given the underlying infrastructure.

[cortinico]

Closing as this is stale and merged in #3037