{"id":13684731,"url":"https://github.com/oblador/react-native-esbuild","last_synced_at":"2025-10-24T00:43:51.569Z","repository":{"id":37533151,"uuid":"496552823","full_name":"oblador/react-native-esbuild","owner":"oblador","description":"Fast bundler and dev server for react-native using esbuild","archived":false,"fork":false,"pushed_at":"2023-07-11T07:14:03.000Z","size":727,"stargazers_count":600,"open_issues_count":2,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-19T18:47:16.774Z","etag":null,"topics":["esbuild","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oblador.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-05-26T09:11:06.000Z","updated_at":"2025-03-28T19:00:25.000Z","dependencies_parsed_at":"2024-01-14T15:21:46.151Z","dependency_job_id":"cfb42ff7-9528-43bd-91f7-27d21ca0d67e","html_url":"https://github.com/oblador/react-native-esbuild","commit_stats":{"total_commits":35,"total_committers":1,"mean_commits":35.0,"dds":0.0,"last_synced_commit":"61a2cda7e1e95c0c1f13e14ee4c7ac4f512b4612"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/oblador/react-native-esbuild","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-esbuild","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-esbuild/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-esbuild/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-esbuild/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oblador","download_url":"https://codeload.github.com/oblador/react-native-esbuild/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oblador%2Freact-native-esbuild/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259827667,"owners_count":22917714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","react-native"],"created_at":"2024-08-02T14:00:37.952Z","updated_at":"2025-10-24T00:43:51.464Z","avatar_url":"https://github.com/oblador.png","language":"JavaScript","funding_links":["https://github.com/sponsors/oblador"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-native-esbuild\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eThe fastest bundler for React Native.\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oblador?tab=followers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/followers/oblador?label=Follow%20%40oblador\u0026style=social\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://twitter.com/trastknast\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/trastknast?label=Follow%20%40trastknast\u0026style=social\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Features\n\n- **Fast** – ~10-50x faster depending on project\n- **Tree shaking** – Smaller bundles means faster apps (**21% smaller** for `init` project)\n- **Compatible** – Drop-in replacement for metro\n- **Configurable** – Support for custom transformers and env variables\n\n## Sponsoring\n\nIf this library helped you, please consider [sponsoring](https://github.com/sponsors/oblador).\n\n## Installation\n\n```shell\nyarn add react-native-esbuild esbuild\n```\n\n## Configuration\n\n### `react-native` CLI plugin\n\nMake sure `react-native.config.js` exists in the root of your project, and create one if not. Add this library to the `commands` section like this:\n\n```js\n// react-native.config.js\nconst { commands } = require('react-native-esbuild');\n\nmodule.exports = {\n  commands,\n};\n```\n\n### Optional: Esbuild settings\n\nIf you want to customize the [esbuild configuration](https://esbuild.github.io/api/#simple-options), for example by adding your own plugins you may do so with the `createEsbuildCommands` function:\n\n```js\n// react-native.config.js\nconst { createEsbuildCommands, babelPlugin } = require('react-native-esbuild');\n\n// See https://esbuild.github.io/api/#simple-options\nconst commands = createEsbuildCommands((config) =\u003e ({\n  ...config,\n  plugins: config.plugins.concat(\n    babelPlugin({\n      filter: /src\\/my-babel-components\\/.+\\.[tj]sx?$/,\n    })\n  ),\n}));\n\nmodule.exports = {\n  commands,\n};\n```\n\n### Optional: Use esbuild for development\n\n1. Open `package.json` in your editor and locate `scripts` section.\n2. Edit `start` script to be `react-native esbuild-start`.\n3. Prevent metro from starting automatically by appending `--no-packager` to the `ios`/`android` scripts.\n\n```json\n{\n  \"scripts\": {\n    \"android\": \"react-native run-android --no-packager\",\n    \"ios\": \"react-native run-ios --no-packager\",\n    \"start\": \"react-native esbuild-start\"\n  }\n}\n```\n\n### Optional: Build production app with esbuild\n\n#### Android\n\nSet `project.ext.react.bundleCommand` to `esbuild-bundle` in `android/app/build.gradle`:\n\n```gradle\n// android/app/build.gradle\nproject.ext.react = [\n    enableHermes: false,\n    bundleCommand: \"esbuild-bundle\",\n]\n```\n\n#### iOS\n\n1. Open your iOS project in Xcode manually or with `xed ios`\n2. Select the `Build Phases` tab in your project settings.\n3. Expand the `Bundle React Native code and images` section and add `export BUNDLE_COMMAND=esbuild-bundle` so it looks like this:\n\n```shell\nset -e\n\nexport BUNDLE_COMMAND=esbuild-bundle\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n```\n\n## Usage\n\nThis library aims to be a plug-in replacement for the metro equivalent commands with the `esbuild-` prefix.\n\n### `react-native esbuild-start`\n\n| **Argument**       | **Description**                  | **Default** |\n| ------------------ | -------------------------------- | ----------- |\n| `--port`           | Port to listen for http requests | `8081`      |\n| `--host`           | Host to listen for http requests | `127.0.0.1` |\n| `--projectRoot`    | Path to a custom project root.   | _None_      |\n| `--reset-cache`    | Removes cached files.            | _N/A_       |\n| `--no-interactive` | Disables interactive mode.       | `false`     |\n\n### `react-native esbuild-bundle`\n\n| **Argument**         | **Description**                                                                   | **Default**       |\n| -------------------- | --------------------------------------------------------------------------------- | ----------------- |\n| `--entry-file`       | Path to the root JS file, either absolute or relative to JS root                  | `index.js`        |\n| `--platform`         | Either `ios` or `android`                                                         | `ios`             |\n| `--dev`              | If `false`, warnings are disabled and the bundle is minified                      | `true`            |\n| `--minify`           | Allows overriding whether bundle is minified otherwise determined by `dev` value. | Opposite of `dev` |\n| `--bundle-output`    | File name where to store the resulting bundle.                                    | _None_            |\n| `--sourcemap-output` | File name where to store the sourcemap file for resulting bundle.                 | _None_            |\n| `--assets-dest`      | Directory name where to store assets referenced in the bundle.                    | _None_            |\n| `--reset-cache`      | Removes cached files.                                                             | _N/A_             |\n\n## Troubleshooting\n\n### Flow syntax errors such as `Expected \"from\" but found \"{\"`\n\nEsbuild doesn't natively support flow so such syntax needs to be stripped with a plugin. By default any file with `@flow` or `@noflow` pragmas will be stripped from flow, but you may also opt-in to flow stripping for more files by passing a custom flow syntax checker:\n\n```js\n// react-native.config.js\nconst {\n  createEsbuildCommands,\n  defaultHasFlowSyntax,\n  syntaxAwareLoaderPlugin,\n} = require('react-native-esbuild');\n\nconst FLOW_MODULES_WITHOUT_PRAGMA = ['react-native-video', 'rn-fetch-blob'];\n\nconst commands = createEsbuildCommands((config, args) =\u003e ({\n  ...config,\n  plugins: config.plugins\n    .filter((plugin) =\u003e plugin.name !== 'syntax-aware-loader')\n    .concat(\n      syntaxAwareLoaderPlugin({\n        filter: /\\.([mc]js|[tj]sx?)$/,\n        cache: args.dev,\n        hasFlowSyntax: (contents, filePath) =\u003e\n          defaultHasFlowSyntax(contents, filePath) ||\n          FLOW_MODULES_WITHOUT_PRAGMA.find((m) =\u003e\n            filePath.includes(`node_modules/${m}/`)\n          ),\n      })\n    ),\n}));\n\nmodule.exports = {\n  commands,\n};\n```\n\n## Limitations\n\n### Hermes engine\n\nHermes doesn't support crucial ES6 features like block level scoping (`let`/`const`) and the team doesn't seem to want to merge this feature mentioning it [being a too big of a change](https://github.com/facebook/hermes/issues/575#issuecomment-902169154) without [having good enough reasons to add it](https://github.com/facebook/hermes/issues/715#issuecomment-1083236894).\n\n### HMR/Fast Refresh\n\nEsbuild [doesn't support Fast Refresh or Hot Module Replacement](https://github.com/evanw/esbuild/issues/151#issuecomment-634441809), but this library supports live reload instead.\n\n## License\n\nMIT © Joel Arvidsson 2022-\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-esbuild","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblador%2Freact-native-esbuild","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblador%2Freact-native-esbuild/lists"}