From fa5a00f1819fa465dcfd0e9f421aaf9e12fa86ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Tue, 2 Aug 2022 14:57:41 +0200 Subject: [PATCH 1/4] Add spaces in the example --- docs/new-architecture-library-intro.md | 2 ++ .../version-0.68/new-architecture-library-intro.md | 2 ++ .../version-0.69/new-architecture-library-intro.md | 2 ++ 3 files changed, 6 insertions(+) diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index 0f6fc905586..614de2e181e 100644 --- a/docs/new-architecture-library-intro.md +++ b/docs/new-architecture-library-intro.md @@ -452,9 +452,11 @@ return ; ```js title="RNTMyNativeViewNativeComponent.js" import { requireNativeComponent } from 'react-native'; + const RNTMyNativeViewNativeComponent = requireNativeComponent( 'RNTMyNativeView' ); + export default RNTMyNativeViewNativeComponent; ``` 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..7c54338142f 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 @@ -403,9 +403,11 @@ return ; ```js title="RNTMyNativeViewNativeComponent.js" import { requireNativeComponent } from 'react-native'; + const RNTMyNativeViewNativeComponent = requireNativeComponent( 'RNTMyNativeView' ); + export default RNTMyNativeViewNativeComponent; ``` 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..614de2e181e 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 @@ -452,9 +452,11 @@ return ; ```js title="RNTMyNativeViewNativeComponent.js" import { requireNativeComponent } from 'react-native'; + const RNTMyNativeViewNativeComponent = requireNativeComponent( 'RNTMyNativeView' ); + export default RNTMyNativeViewNativeComponent; ``` From 2bf2be84df3d4b2ed3ea7f9b0b8c6b4df8909292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Tue, 2 Aug 2022 15:23:55 +0200 Subject: [PATCH 2/4] Add section about codegen types --- docs/new-architecture-library-intro.md | 13 +++++++++++++ .../version-0.68/new-architecture-library-intro.md | 13 +++++++++++++ .../version-0.69/new-architecture-library-intro.md | 13 +++++++++++++ 3 files changed, 39 insertions(+) diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index 614de2e181e..f9059e2f56e 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. 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 7c54338142f..9ca9db16d80 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. 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 614de2e181e..f9059e2f56e 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. From 5ae4245d93cf579126aadf134cf67ee4b2439886 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Tue, 2 Aug 2022 15:30:27 +0200 Subject: [PATCH 3/4] Correct section title --- docs/new-architecture-library-intro.md | 4 ++-- .../version-0.68/new-architecture-library-intro.md | 4 ++-- .../version-0.69/new-architecture-library-intro.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index f9059e2f56e..8e30850e742 100644 --- a/docs/new-architecture-library-intro.md +++ b/docs/new-architecture-library-intro.md @@ -194,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` @@ -506,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'; 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 9ca9db16d80..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 @@ -145,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` @@ -457,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 f9059e2f56e..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 @@ -194,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` @@ -506,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'; From cce6b92799432987b3a557e66969f917cd16538c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Kwa=C5=9Bniewski?= Date: Tue, 2 Aug 2022 15:42:36 +0200 Subject: [PATCH 4/4] Add information about requireNativeComponent --- docs/new-architecture-library-intro.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/new-architecture-library-intro.md b/docs/new-architecture-library-intro.md index 8e30850e742..d4134a2886a 100644 --- a/docs/new-architecture-library-intro.md +++ b/docs/new-architecture-library-intro.md @@ -484,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.