Skip to content

feat: mention local modules #3877

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.

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 8 commits into from
Feb 9, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
80 changes: 80 additions & 0 deletions docs/local-library-setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
id: local-library-setup
title: Local libraries setup
---

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

The local library is created outside of the `android/` and `ios/` folders and makes use of autolinking to integrate with your app. To create local library we will use [create-react-native-library](https://callstack.github.io/react-native-builder-bob/create). This tool contains all the necessary templates.

### Getting Started

Inside your React Native application's root folder, run the following command:

```shell
npx create-react-native-library@latest awesome-module
```

Where `awesome-module` is the name you would like for the new module. After going through the prompts, you will have a new folder called `modules` in your project's root directory which contains the new module.

### Linking

By default, the generated library is automatically linked to the project using `link:` protocol when using Yarn and `file:` when using npm:

<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>

<TabItem value="npm">

```json
"dependencies": {
"awesome-module": "file:./modules/awesome-module"
}
```

</TabItem>
<TabItem value="yarn">

```json
"dependencies": {
"awesome-module": "link:./modules/awesome-module"
}
```

</TabItem>
</Tabs>

This creates a symlink to the library under `node_modules` which makes autolinking work.

### Installing dependencies

:::note
Depending on module type you may have to make additional steps to make it work. Follow the instructions provided by the tool.
:::

To link the module you need to install dependencies:

<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>

<TabItem value="npm">

```shell
npm install
```
Comment on lines +74 to +76
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we make a call and only use yarn, @cortinico?
I remember having discussions that npm is brittle, but I'm, not totally sure.

Copy link
Contributor

Choose a reason for hiding this comment

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

In theory this should be tabbed npm/yarn as we do for all the other pages (like here https://reactnative.dev/docs/react-devtools)


</TabItem>
<TabItem value="yarn">

```shell
yarn install
```

</TabItem>
</Tabs>

### Using module inside your app

To use the module inside your app, you need to import it from the `node_modules` folder:

```js
import {multiply} from 'awesome-module';
```
4 changes: 4 additions & 0 deletions docs/native-components-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ There are tons of native UI widgets out there ready to be used in the latest app

Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing `ImageView` component available in the core React Native library.

:::info
You can also setup local library containing native component with one command. Read the guide to [Local libraries setup](local-library-setup) for more details.
:::

## ImageView example

For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
Expand Down
7 changes: 4 additions & 3 deletions docs/native-modules-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ The NativeModule system exposes instances of Java/Objective-C/C++ (native) class

## Native Module Setup

There are two ways to write a native module for your React Native application:
There are different ways to write a native module for your React Native application:

1. Directly within your React Native application’s iOS/Android projects
2. As a NPM package that can be installed as a dependency by your/other React Native applications
1. Creating a local library that can be imported in your React Native application. Read [Creating local libraries](local-library-setup) guide to learn more.
2. Directly within your React Native application's iOS/Android projects
3. As a NPM package that can be installed as a dependency by your/other React Native applications.

This guide will first walk you through implementing a native module directly within a React Native application. However the native module you build in the following guide can be distributed as an NPM package. Check out the [Setting Up a Native Module as a NPM Package](native-modules-setup) guide if you are interested in doing so.

Expand Down
4 changes: 1 addition & 3 deletions docs/native-modules-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import NativeDeprecated from './the-new-architecture/\_markdown_native_deprecati

Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.

To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://github.com/callstack/react-native-builder-bob). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:
To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://callstack.github.io/react-native-builder-bob/create). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:

```shell
npx create-react-native-library@latest react-native-awesome-module
Expand All @@ -31,5 +31,3 @@ yarn example ios
```

When all steps above are done, you will be able to continue with [Android Native Modules](native-modules-android) or [iOS Native Modules](native-modules-ios) guides to add in some code.

> For a less opinionated setup, have a look at the third party tool [create-react-native-module](https://github.com/brodybits/create-react-native-module).
4 changes: 4 additions & 0 deletions docs/the-new-architecture/pillars-fabric-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ Fabric Native Components only works with the **New Architecture** enabled.
To migrate to the **New Architecture**, follow the [Migration guide](../new-architecture-intro)
:::

:::info
You can also setup local library containing Fabric Native Component with one command. Read the guide to [Local libraries setup](../local-library-setup) for more details.
:::

## How to Create a Fabric Native Components

To create a Fabric Native Component, you have to follow these steps:
Expand Down
4 changes: 4 additions & 0 deletions docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ Turbo Native Modules only work with the **New Architecture** enabled.
To migrate to the **New Architecture**, follow the [Migration guide](../new-architecture-intro)
:::

:::info
You can also setup local library containing Turbo Native Module with one command. Read the guide to [Local libraries setup](../local-library-setup) for more details.
:::

## How to Create a Turbo Native Module

To create a Turbo Native Module, we need to:
Expand Down
3 changes: 2 additions & 1 deletion website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@
"native-modules-intro",
"native-modules-android",
"native-modules-ios",
"native-modules-setup"
"native-modules-setup",
"local-library-setup"
],
"Native Components": [
"native-components-android",
Expand Down