Add more info to Prerequisites for Libraries guide (#3238)

* Add spaces in the example

* Add section about codegen types

* Correct section title

* Add information about requireNativeComponent

Author: okwasniewski

docs/new-architecture-library-intro.md

@@ -130,6 +130,19 @@ In general, this means you can use primitive types (strings, numbers, booleans),
 
 > See Appendix [I. Flow Type to Native Type Mapping](./new-architecture-appendix#i-flow-type-to-native-type-mapping). (TypeScript to Native Type Mapping will be added soon.)
 
+### Codegen helper types
+
+You can use predefined types for your JavaScript spec, here is a list of them:
+
+- `Double`
+- `Float`
+- `Int32`
+- `WithDefault<Type, Value>` - Sets default value for type
+- `BubblingEventHandler<T>` - For bubbling events (eg: `onChange`).
+- `DirectEventHandler<T>` - For direct events (eg: `onClick`).
+
+Later on those types are compiled to coresponding equivalents on target platforms.
+
 ### Be Consistent Across Platforms and Eliminate Type Ambiguity
 
 Before adopting the new architecture in your native module, you will need to ensure your methods are consistent across platforms. This is something you will realize as you set out to write the JavaScript spec for your native module - remember, that JavaScript spec defines what the methods will look like on all supported platforms.
@@ -181,7 +194,7 @@ While we know that all deprecations are a hassle, this guide is intended to help
 3. Migrating off `setNativeProps`
 4. Move the call to `requireNativeComponent` to a separate file
 5. Migrating off `dispatchViewManagerCommand`
-6. Using `codegenNativeComponent`
+6. Creating NativeCommands with `codegenNativeCommands`
 
 ### Migrating `findNodeHandle` / getting a `HostComponent`
 
@@ -452,9 +465,11 @@ return <RNTMyNativeViewNativeComponent />;
 
 ```js title="RNTMyNativeViewNativeComponent.js"
 import { requireNativeComponent } from 'react-native';
+
 const RNTMyNativeViewNativeComponent = requireNativeComponent(
   'RNTMyNativeView'
 );
+
 export default RNTMyNativeViewNativeComponent;
 ```
 
@@ -469,6 +484,23 @@ const RCTWebViewNativeComponent: HostComponent<mixed> =
   requireNativeComponent < mixed > 'RNTMyNativeView';
 ```
 
+#### Later on you can replace `requireNativeComponent`
+
+When you are ready to migrate to Fabric you can replace `requireNativeComponent` with `codegenNativeComponent`:
+
+```ts title="RNTMyNativeViewNativeComponent.js"
+export default (codegenNativeComponent<NativeProps>(
+   'RNTMyNativeView',
+): HostComponent<NativeProps>);
+```
+
+And update the main file:
+
+```ts title="RNTMyNativeNativeComponent.js"
+export default require('./RNTMyNativeViewNativeComponent')
+  .default;
+```
+
 ### Migrating off `dispatchViewManagerCommand`
 
 Similar to one above, in an effort to avoid calling methods on the UIManager, all view manager methods are now called through an instance of `NativeCommands`. `codegenNativeCommands` is a new API to code-generate `NativeCommands` given an interface of your view manager’s commands.
@@ -491,7 +523,7 @@ class MyComponent extends React.Component<Props> {
 }
 ```
 
-**Creating the NativeCommands with `codegenNativeCommands`**
+**Creating NativeCommands with `codegenNativeCommands`**
 
 ```ts title="MyCustomMapNativeComponent.js"
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';

website/versioned_docs/version-0.68/new-architecture-library-intro.md

@@ -81,6 +81,19 @@ In general, this means you can use primitive types (strings, numbers, booleans),
 
 > See Appendix [I. Flow Type to Native Type Mapping](#i-flow-type-to-native-type-mapping).
 
+### Codegen helper types
+
+You can use predefined types for your JavaScript spec, here is a list of them:
+
+- `Double`
+- `Float`
+- `Int32`
+- `WithDefault<Type, Value>` - Sets default value for type
+- `BubblingEventHandler<T>` - For bubbling events (eg: `onChange`).
+- `DirectEventHandler<T>` - For direct events (eg: `onClick`).
+
+Later on those types are compiled to coresponding equivalents on target platforms.
+
 ### Be Consistent Across Platforms and Eliminate Type Ambiguity
 
 Before adopting the new architecture in your native module, you will need to ensure your methods are consistent across platforms. This is something you will realize as you set out to write the JavaScript spec for your native module - remember, that JavaScript spec defines what the methods will look like on all supported platforms.
@@ -132,7 +145,7 @@ While we know that all deprecations are a hassle, this guide is intended to help
 3. Migrating off `setNativeProps`
 4. Move the call to `requireNativeComponent` to a separate file
 5. Migrating off `dispatchViewManagerCommand`
-6. Using `codegenNativeComponent`
+6. Creating NativeCommands with `codegenNativeCommands`
 
 ### Migrating `findNodeHandle` / getting a `HostComponent`
 
@@ -403,9 +416,11 @@ return <RNTMyNativeViewNativeComponent />;
 
 ```js title="RNTMyNativeViewNativeComponent.js"
 import { requireNativeComponent } from 'react-native';
+
 const RNTMyNativeViewNativeComponent = requireNativeComponent(
   'RNTMyNativeView'
 );
+
 export default RNTMyNativeViewNativeComponent;
 ```
 
@@ -442,7 +457,7 @@ class MyComponent extends React.Component<Props> {
 }
 ```
 
-**Creating the NativeCommands with `codegenNativeCommands`**
+**Creating NativeCommands with `codegenNativeCommands`**
 
 ```ts title="MyCustomMapNativeComponent.js"
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';

website/versioned_docs/version-0.69/new-architecture-library-intro.md

@@ -130,6 +130,19 @@ In general, this means you can use primitive types (strings, numbers, booleans),
 
 > See Appendix [I. Flow Type to Native Type Mapping](./new-architecture-appendix#i-flow-type-to-native-type-mapping). (TypeScript to Native Type Mapping will be added soon.)
 
+### Codegen helper types
+
+You can use predefined types for your JavaScript spec, here is a list of them:
+
+- `Double`
+- `Float`
+- `Int32`
+- `WithDefault<Type, Value>` - Sets default value for type
+- `BubblingEventHandler<T>` - For bubbling events (eg: `onChange`).
+- `DirectEventHandler<T>` - For direct events (eg: `onClick`).
+
+Later on those types are compiled to coresponding equivalents on target platforms.
+
 ### Be Consistent Across Platforms and Eliminate Type Ambiguity
 
 Before adopting the new architecture in your native module, you will need to ensure your methods are consistent across platforms. This is something you will realize as you set out to write the JavaScript spec for your native module - remember, that JavaScript spec defines what the methods will look like on all supported platforms.
@@ -181,7 +194,7 @@ While we know that all deprecations are a hassle, this guide is intended to help
 3. Migrating off `setNativeProps`
 4. Move the call to `requireNativeComponent` to a separate file
 5. Migrating off `dispatchViewManagerCommand`
-6. Using `codegenNativeComponent`
+6. Creating NativeCommands with `codegenNativeCommands`
 
 ### Migrating `findNodeHandle` / getting a `HostComponent`
 
@@ -452,9 +465,11 @@ return <RNTMyNativeViewNativeComponent />;
 
 ```js title="RNTMyNativeViewNativeComponent.js"
 import { requireNativeComponent } from 'react-native';
+
 const RNTMyNativeViewNativeComponent = requireNativeComponent(
   'RNTMyNativeView'
 );
+
 export default RNTMyNativeViewNativeComponent;
 ```
 
@@ -491,7 +506,7 @@ class MyComponent extends React.Component<Props> {
 }
 ```
 
-**Creating the NativeCommands with `codegenNativeCommands`**
+**Creating NativeCommands with `codegenNativeCommands`**
 
 ```ts title="MyCustomMapNativeComponent.js"
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';