[FEAT][TNA] Fabric Component - Add Native Code (iOS)

[cipolleschi]

This PR adds the Native code for a Fabric Component.

It explains how to use the CodeGen manually, to check what RN will generate, and it proceed by creating the native code.

This PR only contains the iOS part. The Android part will come in a different PR.

[netlify]

❌ Deploy Preview for react-native failed.

Name	Link
🔨 Latest commit	e8af588
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/629e079785a2280008c90063

[cortinico]

LGTM 👍

[lindboe]

I am not sure I understand why we add the component module to the app, but then have codegen output the generated code to the component module?

[cipolleschi]

To run the CodeGen, we need a React Native app (which can access the React Native code). A module alone does not have that dependency, therefore we need to add the module to the app.

Once that is done, we can invoke the CodeGen manually to see what it will outputs, so that we can use the right filenames and types.
By invoking the codegen manually, we need to define an output folder and I thought it was easier to use the module folder as root.

As specified in the caution block above, the code generated manually should not be committed to the code versioning system and will be discarded. React Native relies on the code generated automatically when building the app.

[lindboe]

Cool, that makes sense -- it might be good to briefly explain the intention here, the reader may wonder (as I did) if this process is necessary in the normal course of development

[cipolleschi]

I added a couple of paragraphs before the iOS section to describe that. Let me know what do you think!

[lindboe]

We should say specifically where: in the top level of the ios directory?

I'm also wondering something that I think would be good to explicitly state: is the reader intended to be using XCode to work on this in the RTNCenteredText/ios directory and be able to use the imports? I'm not sure what the intended way is to do that, particularly when the generated code is in another directory that's a sibling with ios/android

[cipolleschi]

We should say specifically where: in the top level of the ios directory?

Good point. It will be in the centered-text/ios folder.

I'm also wondering something that I think would be good to explicitly state: is the reader intended to be using XCode to work on this in the RTNCenteredText/ios directory and be able to use the imports? I'm not sure what the intended way is to do that, particularly when the generated code is in another directory that's a sibling with ios/android

For this sample, I didn't used Xcode at all. The problem with Xcode is that we have to tell them to create an .xcodeproject file (for a static library) otherwise Xcode won't be able to work with those properly. In any case, they won't be able to build the module from Xcode because they miss the React Native dependencies.

So, at the end of the day, I don't think we should suggest them to use Xcode... It could create more confusion with the errors it will display.

[lindboe]

What's your flow for writing this code? Do you use any other tooling to help make sure it's correct?

I think it's important for a guide like this to demonstrate what the regular development flow should be like, or people are likely to feel stuck after they aren't just copying files

[cipolleschi]

Yeah, you are completely right, but that's a pain point, unfortunately. Currently, there is no easy way to do that.

The tool I use is VisualStudio code and then I have a test app that I use as test bed. Basically, I yarn add the module, install the dependencies and I try to build it. If there are errors, I fix them in the Development Pods folder until they are ok and then I have to copy-and-paste the files back in the RTNCenteredText folder.

That's far from being ideal and I think it is a little bit too convoluted to explain it to the users... what do you think?