-
Notifications
You must be signed in to change notification settings - Fork 5.1k
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
Changes from 3 commits
91a4386
e734df4
3c49242
65acd61
f5f4a94
642343b
bbd9fc7
99bb676
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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. | ||
szymonrybczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### 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. | ||
szymonrybczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
::: | ||
|
||
szymonrybczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we make a call and only use There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
szymonrybczak marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```js | ||
import {multiply} from 'awesome-module'; | ||
``` |
Uh oh!
There was an error while loading. Please reload this page.