From c878206ba452923c9a8ecd5832f7390a711b2336 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 22 Oct 2024 22:13:07 +0530 Subject: [PATCH] docs: Fix typos, code examples, and other inconsistencies in Native Development section (#4290) --- docs/appendix.md | 2 +- docs/the-new-architecture/codegen-cli.md | 2 +- .../create-module-library.md | 12 +- docs/the-new-architecture/custom-cxx-types.md | 10 +- docs/the-new-architecture/pure-cxx-modules.md | 155 +++++++----------- docs/the-new-architecture/using-codegen.md | 4 +- docs/the-new-architecture/what-is-codegen.md | 2 +- docs/turbo-native-modules-android.md | 20 ++- docs/turbo-native-modules-ios.md | 8 +- docs/turbo-native-modules.md | 19 ++- 10 files changed, 107 insertions(+), 127 deletions(-) diff --git a/docs/appendix.md b/docs/appendix.md index 40ef1769343..00e0b7d30ae 100644 --- a/docs/appendix.md +++ b/docs/appendix.md @@ -29,7 +29,7 @@ You may use the following table as a reference for which types are supported and ### Notes: -[1] We strongly recommend using Object literals intead of Objects. +[1] We strongly recommend using Object literals instead of Objects. :::info You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository. diff --git a/docs/the-new-architecture/codegen-cli.md b/docs/the-new-architecture/codegen-cli.md index 68d7992afb5..d1f22a45d2e 100644 --- a/docs/the-new-architecture/codegen-cli.md +++ b/docs/the-new-architecture/codegen-cli.md @@ -1,6 +1,6 @@ # The Codegen CLI -Calling Gradle or manually calling a script might be hard to remember and it requires a lot of cerimony. +Calling Gradle or manually calling a script might be hard to remember and it requires a lot of ceremony. To simplify it, we created a CLI tool that can help you running those tasks: the **Codegen** cli. This command runs [react-native-codegen](https://www.npmjs.com/package/react-native-codegen) for your project. The following options are available: diff --git a/docs/the-new-architecture/create-module-library.md b/docs/the-new-architecture/create-module-library.md index 18bb93f1ce5..4eff1272f03 100644 --- a/docs/the-new-architecture/create-module-library.md +++ b/docs/the-new-architecture/create-module-library.md @@ -33,7 +33,7 @@ npx create-react-native-library@latest 4. Continue filling the form until you reach the question _"What type of library do you want to develop?"_ ![What type of Library](/docs/assets/what-library.png) 5. For the sake of this guide, select the _Turbo module_ option. Notice that you can create libraries for both New Architecture and Legacy Architecture. -6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a sahred C++ library (C++ for Android and iOS). +6. Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS). 7. Finally, select the `Test App` as last option. This option creates the library with a separate app already configured within the library folder. Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code: @@ -45,9 +45,9 @@ Feel free to explore the code that has been created for you. However, the most i - The `android` folder: this is where the Android code lives - The `cpp` folder: this is where we the c++ code lives - The `ios` folder: this is where we the iOS code lives -- The `src` forder: this is where the JS code lives. +- The `src` folder: this is where the JS code lives. -The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run codegen. +The `package.json` is already configured with all the information that we provided to the `create-react-native-library` tool, including the name and the description of the package. Notice that the `package.json` is also already configured to run Codegen. ```json "codegenConfig": { @@ -64,7 +64,7 @@ The `package.json` is already configured with all the information that we provid }, ``` -Finally the library contains already all the infrastruction to let the library be linked with iOS and Android. +Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android. ### 2. Copy the Code over from Your App @@ -105,7 +105,7 @@ To test your library: 4. Build and run Android with `yarn android` from the `example` folder. 5. Build and run iOS with `yarn ios` from the `example` folder. -## Use your library as a Local Module. +## Use your library as a Local Module There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM. @@ -164,7 +164,7 @@ At this point, you can build and run your app as usual: - Build and run Android with `yarn android` from the `example` folder. - Build and run iOS with `yarn ios` from the `example` folder. -## Publish the Library on NPM. +## Publish the Library on NPM The setup to publish everything on NPM is already in place, thanks to `create-react-native-library`. diff --git a/docs/the-new-architecture/custom-cxx-types.md b/docs/the-new-architecture/custom-cxx-types.md index f851e408636..f0592ab26ee 100644 --- a/docs/the-new-architecture/custom-cxx-types.md +++ b/docs/the-new-architecture/custom-cxx-types.md @@ -110,7 +110,7 @@ export default (TurboModuleRegistry.getEnforcing( In this files, we are defining the function that needs to be implemented in C++. -### 3. Implement the Native Code. +### 3. Implement the Native Code Now, we need to implement the function that we declared in the JS specification. @@ -161,7 +161,7 @@ std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string inpu } // namespace facebook::react ``` -The implementation imports the `` C++ library to perform mathematical operations, then it implements the `cubicRoot` function usinf the `cbrt` primitive from the `` module. +The implementation imports the `` C++ library to perform mathematical operations, then it implements the `cubicRoot` function using the `cbrt` primitive from the `` module. ### 4. Test your code in Your App @@ -211,7 +211,7 @@ First, we need to update the `App.tsx` file to use the new method from the Turbo ## Adding a New Structured Custom Type: Address -The approach above can be generalized to any kind of type. For structured types, React Native provides some helper functions that make it easier to bridge them from JS to C++ and viceversa. +The approach above can be generalized to any kind of type. For structured types, React Native provides some helper functions that make it easier to bridge them from JS to C++ and vice versa. Let's assume that we want to bridge a custom `Address` type with the following properties: @@ -288,7 +288,7 @@ It is also possible to have functions that return custom types. From the `Address` type defined in the specs, Codegen will generate two helper types: `NativeSampleModuleAddress` and `NativeSampleModuleAddressBridging`. -The first type is the definition of the `Address`. The second type contains all the infrastructure to bridge the custom type from JS to C++ and viceversa. The only extra step we need to add is to define the `Bridging` structure that extends the `NativeSampleModuleAddressBridging` type. +The first type is the definition of the `Address`. The second type contains all the infrastructure to bridge the custom type from JS to C++ and vice versa. The only extra step we need to add is to define the `Bridging` structure that extends the `NativeSampleModuleAddressBridging` type. 1. Open the `shared/NativeSampleModule.h` file 2. Add the following code in the file: @@ -358,7 +358,7 @@ Once we manually parsed the object, we can implement the logic that we need. If you want to learn more about `JSI` and how it works, have a look at this [great talk](https://youtu.be/oLmGInjKU2U?feature=shared) from App.JS 2024 ::: -### 4. Testing the code in the app. +### 4. Testing the code in the app To test the code in the app, we have to modify the `App.tsx` file. diff --git a/docs/the-new-architecture/pure-cxx-modules.md b/docs/the-new-architecture/pure-cxx-modules.md index d6e89950d7b..6bdc2126060 100644 --- a/docs/the-new-architecture/pure-cxx-modules.md +++ b/docs/the-new-architecture/pure-cxx-modules.md @@ -22,10 +22,10 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 Pure C++ Turbo Native Modules are Turbo Native Modules. They needs a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS. -Specs files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript +Specs files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript. 1. Inside the root folder of your app, create a new folder called `specs`. -2. Create a new file called `NativeSampleModule.ts` +2. Create a new file called `NativeSampleModule.ts` with the following code: :::warning All Native Turbo Module spec files must have the prefix `Native`, otherwise Codegen will ignore them. @@ -34,7 +34,7 @@ All Native Turbo Module spec files must have the prefix `Native`, otherwise Code -```ts +```ts title="specs/NativeSampleModule.ts" // @flow import type {TurboModule} from 'react-native' import { TurboModuleRegistry } from "react-native"; @@ -51,7 +51,7 @@ export default (TurboModuleRegistry.getEnforcing( -```ts +```ts title="specs/NativeSampleModule.ts" import {TurboModule, TurboModuleRegistry} from 'react-native'; export interface Spec extends TurboModule { @@ -68,60 +68,23 @@ export default TurboModuleRegistry.getEnforcing( ## 2. Configure Codegen -The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. - -1. Open the `package.json` file -2. Modify it as it follows: - -```diff -{ - "name": "SampleApp", - "version": "0.0.1", - "private": true, - "scripts": { - "android": "react-native run-android", - "ios": "react-native run-ios", - "lint": "eslint .", - "start": "react-native start", - "test": "jest" - }, - "dependencies": { - "react": "18.3.1", - "react-native": "0.76.0" - }, - "devDependencies": { - "@babel/core": "^7.25.2", - "@babel/preset-env": "^7.25.3", - "@babel/runtime": "^7.25.0", - "@react-native-community/cli": "15.0.0", - "@react-native-community/cli-platform-android": "15.0.0", - "@react-native-community/cli-platform-ios": "15.0.0", - "@react-native/babel-preset": "0.76.0", - "@react-native/eslint-config": "0.76.0", - "@react-native/metro-config": "0.76.0", - "@react-native/typescript-config": "0.76.0", - "@types/react": "^18.2.6", - "@types/react-test-renderer": "^18.0.0", - "babel-jest": "^29.6.3", - "eslint": "^8.19.0", - "jest": "^29.6.3", - "prettier": "2.8.8", - "react-test-renderer": "18.3.1", - "typescript": "5.0.4" - }, - "engines": { - "node": ">=18" - }, -+ "codegenConfig": { -+ "name": "AppSpecs", -+ "type": "modules", -+ "jsSrcsDir": "specs", -+ "android": { -+ "javaPackageName": "com.sampleapp.specs" -+ } -+ }, - "packageManager": "yarn@3.6.4" -} +The next step is to configure [Codegen](what-is-codegen.md) in your `package.json`. Update the file to include: + +```json title="package.json" + "start": "react-native start", + "test": "jest" + }, + // highlight-add-start + "codegenConfig": { + "name": "AppSpecs", + "type": "modules", + "jsSrcsDir": "specs", + "android": { + "javaPackageName": "com.sampleapp.specs" + } + }, + // highlight-add-end + "dependencies": { ``` This configuration tells Codegen to look for specs files in the `specs` folder. It also instruct Codegen to only generate code for `modules` and to namespace the generated code as `AppSpecs`. @@ -133,7 +96,7 @@ Writing a C++ Turbo Native Module allow you to share the code between Android an 1. Create a folder named `shared` at the same level of the `android` and `ios` folders. 2. Inside the `shared` folder, create a new file called `NativeSampleModule.h`. - ```cpp + ```cpp title="shared/NativeSampleModule.h" #pragma once #include @@ -156,7 +119,7 @@ Writing a C++ Turbo Native Module allow you to share the code between Android an 3. Inside the `shared` folder, create a new file called `NativeSampleModule.cpp`. - ```cpp + ```cpp title="shared/NativeSampleModule.cpp" #include "NativeSampleModule.h" namespace facebook::react { @@ -171,15 +134,12 @@ Writing a C++ Turbo Native Module allow you to share the code between Android an } // namespace facebook::react ``` -Let's have a look at the two files we created. - -The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement. - -The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace. +Let's have a look at the two files we created: -The class `NativeSampleModule` is the actual Turbo Native Mdoule class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module. - -Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement. +- The `NativeSampleModule.h` file is the header file for a Pure C++ TurboModule. The `include` statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement. +- The module lives in the `facebook::react` namespace to have access to all the types that live in that namespace. +- The class `NativeSampleModule` is the actual Turbo Native Module class and it extends the `NativeSampleModuleCxxSpec` class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module. +- Finally, we have the constructor, that accepts a pointer to the `CallInvoker`, to communicate with JS if needed and the function's prototype we have to implement. The `NativeSampleModule.cpp` files is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs. @@ -193,7 +153,7 @@ This is the only time when we will have to write some platform-specific code. To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to: -1. Create a `CMakeLists.txt` to access our C++ code +1. Create a `CMakeLists.txt` to access our C++ code. 2. Modify `build.gradle` to point to the newly created `CMakeLists.txt` file. 3. Create an `OnLoad.cpp` file in our Android app to register the new Turbo Native Module. @@ -201,10 +161,10 @@ To make sure that the Android app can effectively build the C++ Turbo Native Mod Android uses CMake to build. CMake needs to access the files we defined in our shared folder, to be able to build them. -1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives -2. Create a `CMakeLists.txt` file and add this context +1. Create a new folder `SampleApp/android/app/src/main/jni`. The `jni` folder is where the C++ side of Android lives. +2. Create a `CMakeLists.txt` file and add this context: -```shell +```shell title="CMakeLists.txt" cmake_minimum_required(VERSION 3.13) # Define the library name here. @@ -223,18 +183,18 @@ target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared) The CMake file does the following things: - Defines the `appmodules` library, where all the app C++ code will be included. -- Loads the base React Native's CMake file -- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ TM lives. -- Specify where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder. +- Loads the base React Native's CMake file. +- Adds the Module C++ source code that we need to build with the `target_sources` directives. By default React Native will already populate the `appmodules` library with default sources, here we include our custom one. You can see that we need to crawl back from the `jni` folder to the `shared` folder where our C++ Turbo Module lives. +- Specifies where CMake can find the module header files. Also in this case we need to crawl back from the `jni` folder. #### 2. Modify `build.gradle` to include the custom C++ code Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the `CMake` files to build the Turbo Native Module. -1. Open the `SampleApp/android/app/build.gradle` file +1. Open the `SampleApp/android/app/build.gradle` file. 2. Add the following block into the Gradle file, within the existent `android` block: -```diff +```diff title="android/app/build.gradle" buildTypes { debug { signingConfig signingConfigs.debug @@ -270,7 +230,7 @@ curl -O https://raw.githubusercontent.com/facebook/react-native/v0.76.0/packages 2. Then, modify this file as it follows: -```diff +```diff title="android/app/src/main/jni/OnLoad.cpp" #include #include #include @@ -325,39 +285,44 @@ To make sure that the iOS app can effectively build the C++ Turbo Native Module, #### 1. Install Pods and Run Codegen. -The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup React Native dependencies and, as part of the process, it will also run Codegen for us. +The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us. -1. Navigate to the `ios` folder -2. Run `bundle install` to install the Ruby bundler -3. Run `bundle exec pod install` to install the dependencies and run Codegen +```bash +cd ios +bundle install +bundle exec pod install +``` #### 2. Add the shared folder to the iOS project This steps adds the `shared` folder to the project to make it visible to xcode. -1. Open the `SampleApp.xcworkspace` file in Xcode. -2. Click on the `SampleApp` project on the left. -3. Select `Add files to "Sample App"...` -4. Select the `shared` folder and click on `Add` +1. Open the CocoPods generated Xcode Workspace. -These images shows you how to add the folder to the project: +```bash +cd ios +open SampleApp.xcworkspace +``` + +2. Click on the `SampleApp` project on the left and select `Add files to "Sample App"...`. ![Add Files to Sample App...](/docs/assets/AddFilesToXcode1.png) +3. Select the `shared` folder and click on `Add`. + ![Add Files to Sample App...](/docs/assets/AddFilesToXcode2.png) If you did everything right, your project on the left should look like this: ![Xcode Project](/docs/assets/CxxTMGuideXcodeProject.png) -#### 3. Registering the Cxx Turbo Native Module in your app. +#### 3. Registering the Cxx Turbo Native Module in your app With this last step, we will tell the iOS app where to look for to find the pure C++ Turbo Native Module. -1. In Xcode, open the `AppDelegate.mm` file -2. Modify it as it follows: +In Xcode, open the `AppDelegate.mm` file and modify it as follows: -```diff +```diff title="SampleApp/AppDelegate.mm" #import + #import + #import "NativeSampleModule.h" @@ -392,10 +357,10 @@ If you now build your application from Xcode, you should be able to build succes It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the `App.tsx` file to import the Turbo Native Module and to call it in our code. -1. Open the `App.tsx` file -2. Replace the content of the template with the following code +1. Open the `App.tsx` file. +2. Replace the content of the template with the following code: -```ts +```tsx title="App.tsx" import React from 'react'; import { Button, @@ -460,7 +425,7 @@ export default App; The interesting lines in this app are: -- `import SampleTurboModule from './specs/NativeSampleModule';`: this lines imports the Turbo Native Module in the app +- `import SampleTurboModule from './specs/NativeSampleModule';`: this line imports the Turbo Native Module in the app, - `const revString = SampleTurboModule.reverseString(value);` in the `onPress` callback: this is how you can use the Turbo Native Module in your app. :::warning diff --git a/docs/the-new-architecture/using-codegen.md b/docs/the-new-architecture/using-codegen.md index 61434be326f..94a14e2f8c9 100644 --- a/docs/the-new-architecture/using-codegen.md +++ b/docs/the-new-architecture/using-codegen.md @@ -38,9 +38,9 @@ npx @react-native-community/cli@latest init SampleApp --version 0.76.0 }, ``` -You can add this snippet to your app and customise the various fields: +You can add this snippet to your app and customize the various fields: -- `name:` This is the name that will be used to create files containig your specs. As a convention, It should have the suffix `Spec`, but this is not mandatory. +- `name:` This is the name that will be used to create files containing your specs. As a convention, It should have the suffix `Spec`, but this is not mandatory. - `type`: the type of code we need to generate. Allowed values are `modules`, `components`, `all`. - `modules:` use this value if you only need to generate code for Turbo Native Modules. - `components:` use this value if you only need to generate code for Native Fabric Components. diff --git a/docs/the-new-architecture/what-is-codegen.md b/docs/the-new-architecture/what-is-codegen.md index 66eb724966b..bc59eb15eaa 100644 --- a/docs/the-new-architecture/what-is-codegen.md +++ b/docs/the-new-architecture/what-is-codegen.md @@ -10,6 +10,6 @@ React Native invokes **Codegen** automatically every time an iOS or Android app **Codegen** is a process that is tightly coupled with a React Native app. The **Codegen** scripts live inside the `react-native` NPM package and the apps calls those scripts at build time. -**Codegen** crawls the folders in your project, starting form a directory you specify in your `package.json`, looking for some specific JS files that contains the specificiation (or specs) for your custom modules and components. Spec files are JS files written in a typed dialect: React Native currently supports Flow and TypeScript. +**Codegen** crawls the folders in your project, starting form a directory you specify in your `package.json`, looking for some specific JS files that contains the specification (or specs) for your custom modules and components. Spec files are JS files written in a typed dialect: React Native currently supports Flow and TypeScript. Every time **Codegen** finds a spec files, it generates the boilerplate code associated to it. **Codegen** generates some C++ glue-code and then it generates platform-specific code, using Java for Android and Objective-C++ for iOS. diff --git a/docs/turbo-native-modules-android.md b/docs/turbo-native-modules-android.md index f51466349d7..281eb200399 100644 --- a/docs/turbo-native-modules-android.md +++ b/docs/turbo-native-modules-android.md @@ -86,8 +86,16 @@ class NativeLocalStorageModule(reactContext: ReactApplicationContext) : NativeLo override fun removeItem(key: String) { val sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE) - val username = sharedPref.getString(key, "") - return username.toString() + val editor = sharedPref.edit() + editor.remove(key) + editor.apply() + } + + override fun clear() { + val sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE) + val editor = sharedPref.edit() + editor.clear() + editor.apply() } companion object { @@ -152,7 +160,7 @@ public class NativeLocalStoragePackage extends TurboReactPackage { ```kotlin title="android/app/src/main/java/com/nativelocalstorage/NativeLocalStoragePackage.kt" -package com.nativelocalstorage; +package com.nativelocalstorage import com.facebook.react.TurboReactPackage import com.facebook.react.bridge.NativeModule @@ -176,8 +184,8 @@ class NativeLocalStoragePackage : TurboReactPackage() { _className = NativeLocalStorageModule.NAME, _canOverrideExistingModule = false, _needsEagerInit = false, - isCXXModule = false, - isTurobModule = true + isCxxModule = false, + isTurboModule = true ) ) } @@ -192,7 +200,7 @@ Finally, we need to tell the React Native in our main application how to find th In this case, you add it to be returned by the [getPackages](https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233) method. :::info -Later you’ll learn how to distribute your Turbo Native Modules as [npm packages](s](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. +Later you’ll learn how to distribute your Turbo Native Modules as [npm packages](the-new-architecture/create-module-library.md#publish-the-library-on-npm), which our build tooling will autolink for you. ::: diff --git a/docs/turbo-native-modules-ios.md b/docs/turbo-native-modules-ios.md index 62e772e7652..145b58c709f 100644 --- a/docs/turbo-native-modules-ios.md +++ b/docs/turbo-native-modules-ios.md @@ -26,7 +26,7 @@ open TurboModuleExample.xcworkspace 3. In the `NativeLocalStorage` group, create New→File from Template. -Create a new file using the Cocoa Touch Classs template +Create a new file using the Cocoa Touch Class template 4. Use the Cocoa Touch Class. @@ -34,11 +34,11 @@ open TurboModuleExample.xcworkspace 5. Name the Cocoa Touch Class RCTNativeLocalStorage with the Objective-C language. -Create an Objective-C RCTNativeLocalStorage class +Create an Objective-C RCTNativeLocalStorage class 6. Rename RCTNativeLocalStorage.m → RCTNativeLocalStorage.mm making it an Objective-C++ file. -Convert to and Objective-C++ file +Convert to and Objective-C++ file ## Implement localStorage with NSUserDefaults @@ -70,7 +70,7 @@ Then update our implementation to use `NSUserDefaults` with a custom [suite name #import "RCTNativeLocalStorage.h" -static NSString *const RCTNativeLocalStorageKey = @"local-stoarge"; +static NSString *const RCTNativeLocalStorageKey = @"local-storage"; @interface RCTNativeLocalStorage() @property (strong, nonatomic) NSUserDefaults *localStorage; diff --git a/docs/turbo-native-modules.md b/docs/turbo-native-modules.md index a8c72818185..6f043e20218 100644 --- a/docs/turbo-native-modules.md +++ b/docs/turbo-native-modules.md @@ -14,10 +14,14 @@ The basic steps are: 1. **define a typed JavaScript specification** using one of the most popular JavaScript type annotation languages: Flow or TypeScript; 2. **configure your dependency management system to run Codegen**, which converts the specification into native language interfaces; -3. **write you application code** using your specification; and +3. **write your application code** using your specification; and 4. **write your native platform code using the generated interfaces** to write and hook your native code into the React Native runtime environment. -Lets work through each of these steps by building an example Turbo Native Module. +Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command: + +```shell +npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0 +``` ## Native Persistent Storage @@ -32,6 +36,11 @@ To make this work on mobile, we need to use Android and iOS APIs: React Native provides a tool called [Codegen](/the-new-architecture/what-is-codegen.md), which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification. +To create a specs file: + +1. Inside the root folder of your app, create a new folder called `specs`. +2. Create a new file called `NativeLocalStorage.ts`. + :::info You can see all of the types you can use in your specification and the native types that are generated in the [Appendix](/appendix.md) documentation. ::: @@ -41,7 +50,7 @@ Here is an implementation of the `localStorage` specification: -```typescript title="NativeLocalStorage.ts" +```typescript title="specs/NativeLocalStorage.ts" import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native'; @@ -194,13 +203,11 @@ function App(): React.JSX.Element { Current stored value is: {value ?? 'No Value'} - -