feat: add fabric component to app - ios

Author: Riccardo Cipolleschi

docs/the-new-architecture/pillars-fabric-components.md

@@ -313,11 +313,11 @@ To run Codegen for the iOS platform, we need to open a terminal and run the foll
 
 ```sh
 cd MyApp
-yarn add ../RTNCenteredTextFlow
+yarn add ../RTNCenteredText
 cd ..
 node MyApp/node_modules/react-native/scripts/generate-artifacts.js \
   --path MyApp/ \
-  --outputPath RTNCenteredTextFlow/generated/
+  --outputPath RTNCenteredText/generated/
 ```
 
 This script first adds the `RTNCenteredText` module to the app with `yarn add`. Then, it invokes Codegen via the `generate-artifacts.js` script.
@@ -520,3 +520,59 @@ Differently from Native Components, Fabric requires us to manually implement the
 #### Android
 
 ### Adding the Fabric Component To Your App
+
+This is the last step to finally see our Fabric Component running on our app.
+
+#### iOS
+
+To achieve this in iOS, we need to issue a couple of commands and then we can read the Component from JS.
+
+First of all, we need to add the NPM package which contains the Component to the app. This can be done with the following command:
+
+```sh
+cd MyApp
+yarn add ../RTNCenteredText
+```
+
+This command will add the `RTNCenteredText` Component to the `node_modules` of your app. Then, we need to install the new dependencies in our iOS project. To do so, we need to run these commands:
+
+```sh
+cd ios
+RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
+```
+
+This command will look for all the dependencies of the project and it will install the iOS ones. The `RCT_NEW_ARCH_ENABLED=1` instruct **Cocoapods** that it has to run some additional operations to run the **CodeGen** that is required by **Fabric**.
+
+:::note
+You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`. You won't need to run `bundle install` anymore, unless you need to change the ruby dependencies.
+:::
+
+#### Android
+
+#### JS
+Finally, we can read the Component in our JS application.
+To do so, we have to:
+
+1. Import the Component in the js file that uses it. So, if we want to use it in the `App.js`, we need to add this line:
+
+   ```js title="App.js"
+   import RTNCenteredText from 'rnt-centered-text/js/RNTCenteredTextNativeComponent';
+   ```
+
+2. Then, we need to use it in another React Native component. The syntax is the same as for any other component:
+   ```js title="App.js"
+   // ... other code
+   const App: () => Node = () => {
+     // ... other App code ...
+     return (
+       // ...other RN elements...
+       <RTNCenteredText
+         text="Hello World!"
+         style={{ width: '100%', height: 30 }}
+       />
+       // ...other RN Elements
+     );
+   };
+   ```
+
+Now, we can run the React Native app and see our Component on the screen.

docs/the-new-architecture/pillars.md

@@ -25,5 +25,5 @@ Finally, we dive a little deeper into the [CodeGen](pillars-codegen) process tha
 To integrate a TurboModule or a Fabric Component in an app, the app has to run with the New Architecture enabled.
 
 To create a new app adopting the New Architecture, refer to the [Using the App Template](use-app-template) section.
-To migrate an existing app to the New Architecture, refer to the [Migration](/docsq/new-architecture-intro) guide.
+To migrate an existing app to the New Architecture, refer to the [Migration](/docs/new-architecture-intro) guide.
 :::