Skip to content

Add more info to Prerequisites for Libraries guide #3238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 2, 2022
Merged

Add more info to Prerequisites for Libraries guide #3238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa5a00f
Add spaces in the example
okwasniewski Aug 2, 2022
2bf2be8
Add section about codegen types
okwasniewski Aug 2, 2022
5ae4245
Correct section title
okwasniewski Aug 2, 2022
cce6b92
Add information about requireNativeComponent
okwasniewski Aug 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions docs/new-architecture-library-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
Comment on lines +137 to +142
Copy link
Contributor

@cipolleschi cipolleschi Aug 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these only Flow types? Do you know if these works in the same way for TypeScript or what are the equivalent TypeScript types?

Copy link
Contributor Author

@okwasniewski okwasniewski Aug 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These types for typescript are defined here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/61466/files

So they should work the same


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.
Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -452,9 +465,11 @@ return <RNTMyNativeViewNativeComponent />;

```js title="RNTMyNativeViewNativeComponent.js"
import { requireNativeComponent } from 'react-native';

const RNTMyNativeViewNativeComponent = requireNativeComponent(
'RNTMyNativeView'
);

export default RNTMyNativeViewNativeComponent;
```

Expand All @@ -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;
Comment on lines +500 to +501
Copy link
Contributor

@satya164 satya164 Aug 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think would be better not to mix commonjs & ES module

Copy link
Contributor

@cipolleschi cipolleschi Aug 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so, the proper way will be

module.exports = require('./RNTMyNativeViewNativeComponent').default

?

Copy link
Contributor

@satya164 satya164 Aug 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cipolleschi maybe

export { default } from './RNTMyNativeViewNativeComponent';

```

### 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.
Expand All @@ -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';
Expand Down
19 changes: 17 additions & 2 deletions website/versioned_docs/version-0.68/new-architecture-library-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -403,9 +416,11 @@ return <RNTMyNativeViewNativeComponent />;

```js title="RNTMyNativeViewNativeComponent.js"
import { requireNativeComponent } from 'react-native';

const RNTMyNativeViewNativeComponent = requireNativeComponent(
'RNTMyNativeView'
);

export default RNTMyNativeViewNativeComponent;
```

Expand Down Expand Up @@ -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';
Expand Down
19 changes: 17 additions & 2 deletions website/versioned_docs/version-0.69/new-architecture-library-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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`

Expand Down Expand Up @@ -452,9 +465,11 @@ return <RNTMyNativeViewNativeComponent />;

```js title="RNTMyNativeViewNativeComponent.js"
import { requireNativeComponent } from 'react-native';

const RNTMyNativeViewNativeComponent = requireNativeComponent(
'RNTMyNativeView'
);

export default RNTMyNativeViewNativeComponent;
```

Expand Down Expand Up @@ -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';
Expand Down