Skip to content

📚Improve documentation about JS Specs #3017

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
cortinico merged 1 commit into from
Mar 17, 2022
Merged

📚Improve documentation about JS Specs #3017

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 27 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 @@ -20,14 +20,16 @@ As the first step to adopting the new architecture, you will start by creating t
The JavaScript spec defines all APIs that are provided by the native module, along with the types of those constants and functions.
Using a **typed** spec file allows to be intentional and declare all the input arguments and outputs of your native module’s methods.

By convention, JavaScript spec files are named `Native<MODULE_NAME>.js` and they export a `TurboModuleRegistry` `Spec` object.

:::info

Currently, this guide is written under the assumption that you will be using [Flow](https://flow.org/). The `react-native-codegen` package is also currently working only with Flow source as input. We know that a lot of our users are using **TypeScript** instead and we hope to release TypeScript support really soon. This guide will be updated once the TypeScript support is also available.

:::

#### Turbomodules

JavaScript spec files **must** be named `Native<MODULE_NAME>.js` and they export a `TurboModuleRegistry` `Spec` object. The name convention is important because the Codegen process looks for modules whose `js` spec file starts with the keyword `Native`.

The following is a basic JavaScript spec template, written using the [Flow](https://flow.org/) syntax.

```ts
Expand All @@ -46,6 +48,29 @@ export interface Spec extends TurboModule {
export default (TurboModuleRegistry.get<Spec>('<MODULE_NAME>'): ?Spec);
```

#### Fabric Components

JavaScript spec files **must** be named `<FABRIC COMPONENT>NativeComponent.js` and they export a `HostComponent` object. The name convention is important: the Codegen process looks for components whose `js` spec file ends with the keyword `NativeComponent`.

The following is a basic JavaScript spec template, written using the [Flow](https://flow.org/) syntax.

```ts
// @flow strict-local

import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
import type {HostComponent} from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

type NativeProps = $ReadOnly<{|
...ViewProps,
// add other props here
|}>;

export default (codegenNativeComponent<NativeProps>(
'<FABRIC COMPONENT>',
): HostComponent<NativeProps>);
```

### Supported Flow Types

When using Flow, you will be using [type annotations](https://flow.org/en/docs/types/) to define your spec. Keeping in mind that the goal of defining a JavaScript spec is to ensure the generated native interface code is type safe, the set of supported Flow types will be those that can be mapped one-to-one to a corresponding type on the native platform.
Expand Down