diff --git a/.gitignore b/.gitignore index 43cfe626..1f760fd6 100644 --- a/.gitignore +++ b/.gitignore @@ -44,6 +44,7 @@ local.properties android/.classpath android/.settings android/.project + # Node node_modules *.log @@ -87,3 +88,7 @@ RNTester/build # VS Code .vscode/ + +# Lerna +.nx/ +nx.json \ No newline at end of file diff --git a/DEVELOPING.md b/DEVELOPING.md index f158d4cf..c2276fc0 100644 --- a/DEVELOPING.md +++ b/DEVELOPING.md @@ -13,7 +13,9 @@ Any new package under ./packages/ will get automatically picked up as a new Yarn - `package.json` with name, description, main, typings (other fields will be filled by yarn constraints, version is supplied by Lerna) - `tsconfig.json` that extends from the one at the root - `README.md` -- `src/` and `__tests__/` folders to contain the code for the package +- `src/` and `__tests__/` folders to contain the code for the package. + +If an item from the previous list is missing, the package won't compile. ## Adding dependencies @@ -25,6 +27,119 @@ are shared between multiple packages then they should be added to the Yarn const This is also where we define common peerDependencies and enforce a common version. These are packages such as React Native that our packages require but that we leave to the customer to have defined as explicit dependencies. +## Adding new Native Modules + +If new packages needs to connect with native code there are few things to have in mind. +The folder structure should be something like the following: + +``` +packages/ +└── my-new-package/ + ├── ios/ # containing an Xcode workspace/project + ├── android/ # containing an Android workspace/project + ├── src/ + │ ├── __tests__/ + │ └── index.ts + ├── tsconfig.json + ├── package.json + ├── .eslintrc.js + ├── README.md + └── MyNewPackage.podspec +``` + +> Make sure the new `package.json` file list all files/folders we want to get packed during the build and pack process. Example: + +```json +{ + "files": [ + "lib", + "android", + "ios", + "NewPackageModule.podspec" + ], +} +``` + +This example is configured to pack lib/, android/, ios/ and NewPackageModule.podspec into the package we will publish in the future. All folders/files that should be packed and published should be listed here. If they are not there, the pack/publish process will ignore them. + +## iOS Native Module + +References are very important when developing a new iOS Standalone Native Module, we encourage developers to create new modules through Xcode to avoid any issue related to this. + +### Recommended steps + +- Open Xcode and create a new workspace. +- Create a new target with the same name +- Create the proper files following the [iOS Native Modules for React Native](https://reactnative.dev/docs/native-modules-ios) official documentation. + +This repository already contains classes using Swift. We highly recommend to keep this approach. More information about how to do it can be found in the (official documentation)[https://reactnative.dev/docs/native-modules-ios#exporting-swift]. + +At the end of this process the ios folder structure should contain something like the following: + +``` +ios/ +└── MyNewModule.xcworkspace +└── MyNewModule/ + ├── MyNewModule.xcodeproj + ├── MyNewModule-Bridging-Header.h + ├── MyNewModule.m + └── MyNewModule.swift +``` + +This is the bare minimum we need to create a new iOS Native Module. + +> Do not forget to properly create the .podspec file outside the ios folder listing all dependencies. Also it's a good idea to check in that this file is in place after run the build and pack the new package. Without this file the new iOS Native Module won't be recognized by the application and won't be installed. + +## Android Native Module + +Also for Android Standalone Native Modules we highly recommend to start the development process using Android Studio. + +### Recommended steps + +- Open Android Studio and create a new project using Empty Activity template. +- Provide a proper Project and Package Name (i.e MyNewPiece and io.embrace.mynewpiece respectively) +- Choose a location to save the new project (under android/ folder), select the languaje for the project and the build configuration and finish the process. + +This process is going to create several folders/files with an structure like + +``` +android/ +├── src/ +│ └── main/ +│ ├── java/ +│ │ └── io/ +│ │ └── embrace/ +│ │ └── mynewpiece/ +│ │ └── MyNewPiece.java # we will tweak this file name in following steps +│ ├── res/ +│ └── AndroidManifest.xml +├── gradlew.bat +├── gradlew +├── gradle/ +│ └── wrapper/ +│ ├── gradle-wrapper.properties +│ └── gradle-wrapper.jar +├── local.properties +├── gradle.properties +├── settings.gradle (or settings.gradle.kts) +└── build.gradle (or build.gradle.kts) +``` + +In order to create an (Android React Native Module)[https://reactnative.dev/docs/native-modules-android] it's also recommended to follow the official documentation + +Once this is done files should be the following inside `io.embrace.mynewpiece`: + +``` +src/ +└── main/ + └── java/ + └── io/ + └── embrace/ + └── myapplication/ + ├── MyNewPieceModule.java + └── MyNewPiecePackage.java +``` + ## Testing changes during development From the root of the project you can lint and test all packages with: diff --git a/integration-tests/basic-test-app/app/(tabs)/index.tsx b/integration-tests/basic-test-app/app/(tabs)/index.tsx index 14900b98..fd21486a 100644 --- a/integration-tests/basic-test-app/app/(tabs)/index.tsx +++ b/integration-tests/basic-test-app/app/(tabs)/index.tsx @@ -51,7 +51,7 @@ const HomeScreen = () => { "custom.property.test": "hey", "another.property": "ho", "yet.another": "hum", - "rn.sdk.test": 1234567, + "rn.sdk.test": "1234567", }); }, []); @@ -84,6 +84,22 @@ const HomeScreen = () => { title="CRASH (not anonymous)" /> + + + Logs +