Installation
Install the Package
1yarn add @gfean/react-native-bundle-drop
2cd ios && pod install && cd ..Authenticate and Initialize
Before you run init, make sure you already have a valid organization and at least one project in Bundle Drop. Initialization is project-scoped, so the CLI needs a real project to connect this app to.
If you have not created those yet, start with Project Creation.
For local development, start with the CLI login:
1npx bundle-drop loginIf you already have a Personal Access Token, or you want to script setup in CI, initialize directly with a token:
1npx bundle-drop init --token bdp_pat_xxxAfter you run bundle-drop login or bundle-drop init, Bundle Drop will try to handle the setup for you:
- If your account has access to multiple organizations or projects, the CLI will ask you to choose the right ones with the arrow keys and Enter.
- It creates
bundle.drop.config.js. - It can add the Metro alias automatically.
- It can try to patch the native entrypoints for standard React Native app templates.
If that automatic setup works, review the generated changes and continue.
If it does not work, or your app has a customized native setup, use the manual native setup instructions below.
If you want to rerun just the native patch step:
1npx bundle-drop init-nativeProject Config
The CLI creates bundle.drop.config.js for you. You can also view the same project config from the dashboard under Project Settings -> View Project Config. If you need to edit it manually, it should look like this:
1module.exports = {
2 serverUrl: "https://api.bundledrop.app",
3 runtimeVersion: {
4 ios: "1.0.0",
5 android: "1.0.0",
6 },
7 org: { slug: "your-org-slug" },
8 project: {
9 name: "Your App Name",
10 slug: "your-app-slug",
11 apiKey: "optional-api-key", // project-scoped; auto-filled by CLI init/login
12 },
13};runtimeVersion is the compatibility key for OTA updates. When you ship a native change that requires a new binary, update the matching platform runtime version too. The full rule is covered on Runtime Version.
Metro Setup
The CLI can usually add the Metro alias for you. If it does not, apply this in metro.config.js:
1const path = require("path");
2
3module.exports = {
4 resolver: {
5 extraNodeModules: {
6 "bundle-drop-config": path.resolve(__dirname, "bundle.drop.config.js"),
7 },
8 },
9};Manual Native Setup
If the automatic native patching does not work, add the following changes manually.
Android MainApplication
Use the tab that matches your app template:
1import com.bundledrop.BundleDropModule
2
3override fun getJSBundleFile(): String? =
4 BundleDropModule.resolveJSBundleFile(applicationContext, super.getJSBundleFile())iOS AppDelegate
Use the tab that matches your iOS app delegate file:
1import BundleDrop
2
3override func bundleURL() -> URL? {
4 #if DEBUG
5 return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
6 #else
7 if let url = BundleDropLocator.bundleURL() {
8 return url
9 }
10 return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
11 #endif
12}