From 91a4386a0f296d72598403db5851f222d41a0f62 Mon Sep 17 00:00:00 2001 From: szymonrybczak Date: Tue, 10 Oct 2023 17:45:28 +0200 Subject: [PATCH 1/8] feat: mention local modules --- docs/local-library-setup.md | 80 +++++++++++++++++++ docs/native-components-android.md | 4 + docs/native-modules-intro.md | 7 +- docs/native-modules-setup.md | 4 +- .../pillars-fabric-components.md | 4 + .../pillars-turbomodule.md | 4 + website/sidebars.json | 3 +- 7 files changed, 99 insertions(+), 7 deletions(-) create mode 100644 docs/local-library-setup.md diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md new file mode 100644 index 00000000000..373a7919477 --- /dev/null +++ b/docs/local-library-setup.md @@ -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: + + + + + +```json +"dependencies": { + "awesome-module": "file:./modules/awesome-module" +} +``` + + + + +```json +"dependencies": { + "awesome-module": "link:./modules/awesome-module" +} +``` + + + + +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: + + + + + +```shell +npm install +``` + + + + +```shell +yarn install +``` + + + + +### 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'; +``` diff --git a/docs/native-components-android.md b/docs/native-components-android.md index 0d6a49ef860..1d82515d02c 100644 --- a/docs/native-components-android.md +++ b/docs/native-components-android.md @@ -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. diff --git a/docs/native-modules-intro.md b/docs/native-modules-intro.md index 35162726dfa..6c40fb1c8f9 100644 --- a/docs/native-modules-intro.md +++ b/docs/native-modules-intro.md @@ -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 three 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 local library that can be imported in your React Native application and can be created with one command. 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. diff --git a/docs/native-modules-setup.md b/docs/native-modules-setup.md index f68f078b961..dc628d3b137 100644 --- a/docs/native-modules-setup.md +++ b/docs/native-modules-setup.md @@ -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 @@ -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). diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index 5cae0200fa8..d23b4c2f5f6 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -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: diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index d9bb6144d2d..8cc034e2884 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -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: diff --git a/website/sidebars.json b/website/sidebars.json index 45cc7e83d10..8a81c4373cd 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -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", From e734df4c9424721acaf7ec2f4bac0f745d6cb0d3 Mon Sep 17 00:00:00 2001 From: Szymon Rybczak Date: Thu, 2 Nov 2023 15:09:03 +0100 Subject: [PATCH 2/8] Update docs/native-modules-intro.md Co-authored-by: Riccardo Cipolleschi --- docs/native-modules-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/native-modules-intro.md b/docs/native-modules-intro.md index 6c40fb1c8f9..2128a743b00 100644 --- a/docs/native-modules-intro.md +++ b/docs/native-modules-intro.md @@ -15,7 +15,7 @@ The NativeModule system exposes instances of Java/Objective-C/C++ (native) class There are three ways to write a native module for your React Native application: -1. Creating local library that can be imported in your React Native application and can be created with one command. Read [Creating local libraries](local-library-setup) guide to learn more. +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. From 3c492421d29b6262eb6457be7b1fe97b82edb883 Mon Sep 17 00:00:00 2001 From: Szymon Rybczak Date: Thu, 2 Nov 2023 15:09:12 +0100 Subject: [PATCH 3/8] Update docs/native-modules-intro.md Co-authored-by: Riccardo Cipolleschi --- docs/native-modules-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/native-modules-intro.md b/docs/native-modules-intro.md index 2128a743b00..cbcdb8568d5 100644 --- a/docs/native-modules-intro.md +++ b/docs/native-modules-intro.md @@ -13,7 +13,7 @@ The NativeModule system exposes instances of Java/Objective-C/C++ (native) class ## Native Module Setup -There are three 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. 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 From 65acd61ca8f984e485d75fef3970b0d14813af5f Mon Sep 17 00:00:00 2001 From: Szymon Rybczak Date: Mon, 6 Nov 2023 07:15:27 +0100 Subject: [PATCH 4/8] Update docs/local-library-setup.md Co-authored-by: Satyajit Sahoo --- docs/local-library-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md index 373a7919477..364682dcb87 100644 --- a/docs/local-library-setup.md +++ b/docs/local-library-setup.md @@ -73,7 +73,7 @@ yarn install ### Using module inside your app -To use the module inside your app, you need to import it from the `node_modules` folder: +To use the module inside your app, you can import it by its name: ```js import {multiply} from 'awesome-module'; From f5f4a949cd3dd3e94d8cab9277a7387a296bc0ef Mon Sep 17 00:00:00 2001 From: Szymon Rybczak Date: Mon, 18 Dec 2023 22:29:15 +0100 Subject: [PATCH 5/8] Update docs/local-library-setup.md --- docs/local-library-setup.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md index 364682dcb87..21b37b5e04d 100644 --- a/docs/local-library-setup.md +++ b/docs/local-library-setup.md @@ -47,10 +47,6 @@ This creates a symlink to the library under `node_modules` which makes autolinki ### 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: From 642343b6bfee156b8cabe3d1ea3c7e4c9b788960 Mon Sep 17 00:00:00 2001 From: Szymon Rybczak Date: Fri, 9 Feb 2024 13:40:36 +0100 Subject: [PATCH 6/8] Update docs/local-library-setup.md Co-authored-by: Satyajit Sahoo --- docs/local-library-setup.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md index 21b37b5e04d..537901e4ec9 100644 --- a/docs/local-library-setup.md +++ b/docs/local-library-setup.md @@ -5,7 +5,25 @@ 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. +A local library is a library containing views or modules that's local to your app and not published to a registry. This is different from the traditional setup for view and modules in the sense that a local library is decoupled from your app's native code. + +The local library is created outside of the `android/` and `ios/` folders and makes use of autolinking to integrate with your app. The structure with a local library may look like this: + +\``` +MyApp +├── node_modules +├── modules <-- folder for your local libraries +│ └── awesome-module <-- your local library +├── android +├── ios +├── src +├── index.js +└── package.json +\``` + +Since a local library's code exists outside of `android/` and `ios/` folders, it makes it easier to upgrade React Native versions in the future, copy to other projects etc. + +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 From bbd9fc722689225f565d803ef50928c79c5b41b9 Mon Sep 17 00:00:00 2001 From: szymonrybczak Date: Fri, 9 Feb 2024 18:06:33 +0100 Subject: [PATCH 7/8] chore: run linter --- docs/local-library-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md index 537901e4ec9..22efd77be75 100644 --- a/docs/local-library-setup.md +++ b/docs/local-library-setup.md @@ -13,7 +13,7 @@ The local library is created outside of the `android/` and `ios/` folders and ma MyApp ├── node_modules ├── modules <-- folder for your local libraries -│ └── awesome-module <-- your local library +│ └── awesome-module <-- your local library ├── android ├── ios ├── src From 99bb676290024008f78f0538aad5878f59e0054e Mon Sep 17 00:00:00 2001 From: szymonrybczak Date: Fri, 9 Feb 2024 18:18:11 +0100 Subject: [PATCH 8/8] fix: snippet --- docs/local-library-setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/local-library-setup.md b/docs/local-library-setup.md index 22efd77be75..fff5daefaed 100644 --- a/docs/local-library-setup.md +++ b/docs/local-library-setup.md @@ -9,7 +9,7 @@ A local library is a library containing views or modules that's local to your ap The local library is created outside of the `android/` and `ios/` folders and makes use of autolinking to integrate with your app. The structure with a local library may look like this: -\``` +```plaintext MyApp ├── node_modules ├── modules <-- folder for your local libraries @@ -19,7 +19,7 @@ MyApp ├── src ├── index.js └── package.json -\``` +``` Since a local library's code exists outside of `android/` and `ios/` folders, it makes it easier to upgrade React Native versions in the future, copy to other projects etc.