diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index 0f6fc905586..d4134a2886a 100644 --- a/docs/new-architecture-library-intro.md +++ b/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` - Sets default value for type +- `BubblingEventHandler` - For bubbling events (eg: `onChange`). +- `DirectEventHandler` - 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 ; ```js title="RNTMyNativeViewNativeComponent.js" import { requireNativeComponent } from 'react-native'; + const RNTMyNativeViewNativeComponent = requireNativeComponent( 'RNTMyNativeView' ); + export default RNTMyNativeViewNativeComponent; ``` @@ -469,6 +484,23 @@ const RCTWebViewNativeComponent: HostComponent = 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( + 'RNTMyNativeView', +): HostComponent); +``` + +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 { } ``` -**Creating the NativeCommands with `codegenNativeCommands`** +**Creating NativeCommands with `codegenNativeCommands`** ```ts title="MyCustomMapNativeComponent.js" import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; diff --git a/website/versioned_docs/version-0.68/new-architecture-library-intro.md b/website/versioned_docs/version-0.68/new-architecture-library-intro.md index a80473f7255..914fdafbc4e 100644 --- a/website/versioned_docs/version-0.68/new-architecture-library-intro.md +++ b/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` - Sets default value for type +- `BubblingEventHandler` - For bubbling events (eg: `onChange`). +- `DirectEventHandler` - 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 ; ```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 { } ``` -**Creating the NativeCommands with `codegenNativeCommands`** +**Creating NativeCommands with `codegenNativeCommands`** ```ts title="MyCustomMapNativeComponent.js" import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; diff --git a/website/versioned_docs/version-0.69/new-architecture-library-intro.md b/website/versioned_docs/version-0.69/new-architecture-library-intro.md index 0f6fc905586..8e30850e742 100644 --- a/website/versioned_docs/version-0.69/new-architecture-library-intro.md +++ b/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` - Sets default value for type +- `BubblingEventHandler` - For bubbling events (eg: `onChange`). +- `DirectEventHandler` - 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 ; ```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 { } ``` -**Creating the NativeCommands with `codegenNativeCommands`** +**Creating NativeCommands with `codegenNativeCommands`** ```ts title="MyCustomMapNativeComponent.js" import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';