{"id":19356915,"url":"https://github.com/alexfigliolia/react-native-module-paths","last_synced_at":"2026-05-18T05:03:32.434Z","repository":{"id":218820724,"uuid":"747442367","full_name":"alexfigliolia/react-native-module-paths","owner":"alexfigliolia","description":"A small HTTP server designed to automatically synchronize preloaded module paths in React Native apps","archived":false,"fork":false,"pushed_at":"2024-10-06T20:10:26.000Z","size":193,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T17:50:44.007Z","etag":null,"topics":["performance","ram-bundling","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-module-paths","language":"TypeScript","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/alexfigliolia.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-23T23:47:48.000Z","updated_at":"2024-10-06T20:10:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"413209e2-c907-40ae-bb88-f642339825a6","html_url":"https://github.com/alexfigliolia/react-native-module-paths","commit_stats":null,"previous_names":["alexfigliolia/react-native-module-paths"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Freact-native-module-paths","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Freact-native-module-paths/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Freact-native-module-paths/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Freact-native-module-paths/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexfigliolia","download_url":"https://codeload.github.com/alexfigliolia/react-native-module-paths/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240473334,"owners_count":19807119,"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":["performance","ram-bundling","react-native"],"created_at":"2024-11-10T07:05:49.720Z","updated_at":"2026-05-18T05:03:27.396Z","avatar_url":"https://github.com/alexfigliolia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Module Paths\nA utility for synchronizing your RAM Bundle's preloaded module paths in real time.\n\nWhen working with React Native RAM Bundles, your metro config consumes your preloaded module paths to optimize your production build. \n\nThe process of manually synchronizing the module paths during development became a bit tedious - and difficult to properly verify for large teams.\n\nUsing this package, you can spin up a simple CLI that will update your module paths each time a new critical file is added, removed, or renamed.\n\n## Installation\n```bash\nyarn add react-native-module-paths\n# or \nnpm i -D react-native-module-paths\n\nnpm link\n```\n\n### Curl\n```bash\n# Mac\nbrew install curl\n# Linux \nsudo apt-get install curl\n# Windows\nchoco install curl\n```\n\n### Ngrok\nNext, sign up for a free account at `https://ngrok.com` then click on \"Set Up and Installation\". \n\nNgrok is going to ensure that any physical device you may be testing your code on can send your preloaded module paths back to your local repository.\n\nYour setup steps should look like the following:\n```bash\nbrew install ngrok\n# or for Windows\nchoco install ngrok\n# Then add your auth token using the CLI\nngrok config add-authtoken \u003cyour-token\u003e\n# Your token can be found here: \"https://dashboard.ngrok.com/get-started/setup/\"\n```\n\n### Registering your Module Paths\nIn the entrypoint of your application, add the following two lines:\n\n```typescript\nif (__DEV__) {\n  const { RNModulePaths } = require(\"react-native-module-paths\");\n  RNModulePaths.registerAssets();\n}\n```\n\nNow you can now spin up the `react-native-module-paths` CLI when developing your app:\n\n```bash\nnpx react-native-module-paths\n```\n\nWith this running, anytime you add, delete, or rename a critical file in your application it'll appear in your `modulePaths.js` file!\n\n\n### CLI Options\n#### `--port | -p`\nAn option to override the default port number (4321)\n#### `--path | -w`\n A path to your `modulePaths.js` file. It will default to `process.cwd()/modulePaths.js`\n#### `--format | -f`\nWhether or not to format your module paths file for legibility when it's updated. This options defaults to true and runs `prettier` directly on the file.\n\n### Dev Loop Tips\nWhen using this package, my development setup for React Native projects looks like the following:\n\n```typescript\n// DevServer.ts\nimport { ChildProcess } from \"@figliolia/child-process\";\n\nexport class DevServer extends ChildProcess {\n  static CPs: ChildProcess[] = [];\n\n  public static async run() {\n    this.bindToExit();\n    this.CPs = [\n      new ChildProcess(\"npx react-native-module-paths\"),\n      new ChildProcess(\"npx react-native start\"),\n    ];\n    try {\n      this.bindExits(this.CPs.map(CP =\u003e CP.process));\n      await Promise.all(this.CPs.map(CP =\u003e CP.handler));\n    } catch (error) {\n      this.tearDown();\n    }\n  }\n\n  private static bindToExit() {\n    process.on(\"SIGINT\", () =\u003e {\n      this.tearDown();\n    });\n  }\n\n  private static tearDown() {\n    this.CPs.forEach(CP =\u003e CP.process.kill());\n    this.CPs = [];\n  }\n}\n\n(async () =\u003e {\n  await DevServer.run();\n})().catch(console.log);\n```\n\nI can then simply run `ts-node DevServer.ts` to run both `react-native` and `react-native-module-paths` CLI's at once without having to spin up two shells. \n\nI'll often create `devloop` scripts such as this one so that I can easily add more tools into my workflow without flooding my package.json's scripts object.\n\nHappy hacking :)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Freact-native-module-paths","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexfigliolia%2Freact-native-module-paths","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Freact-native-module-paths/lists"}