{"id":19381087,"url":"https://github.com/j2kun/babel-plugin-react-native-config","last_synced_at":"2025-07-04T05:07:27.633Z","repository":{"id":71944094,"uuid":"82845502","full_name":"j2kun/babel-plugin-react-native-config","owner":"j2kun","description":"A babel plugin for react-native-config to avoid clean/rebuild for javascript config changes","archived":false,"fork":false,"pushed_at":"2020-06-09T03:12:46.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T03:48:51.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j2kun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-02-22T19:45:13.000Z","updated_at":"2018-04-21T15:45:52.000Z","dependencies_parsed_at":"2023-04-06T22:04:22.076Z","dependency_job_id":null,"html_url":"https://github.com/j2kun/babel-plugin-react-native-config","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":0.05882352941176472,"last_synced_commit":"9798956b2615de286da165dd882475e20d38b9f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2kun%2Fbabel-plugin-react-native-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2kun%2Fbabel-plugin-react-native-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2kun%2Fbabel-plugin-react-native-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j2kun%2Fbabel-plugin-react-native-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j2kun","download_url":"https://codeload.github.com/j2kun/babel-plugin-react-native-config/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250509674,"owners_count":21442475,"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":[],"created_at":"2024-11-10T09:15:50.665Z","updated_at":"2025-04-23T20:31:49.752Z","avatar_url":"https://github.com/j2kun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-native-config\n\nThe [react-native-config](https://github.com/luggit/react-native-config) project is great! Sadly, but appropriately, it doesn't hot-reload config variable changes unless you do a clean and rebuild, which can take minutes. Minutes!\n\nThis babel plugin is a layer on top of `react-native-config` that allows you to get hot reloading. It works by bypassing the Config module entirely, and transpiling the configvars for faster development.\n\nI.e., it turns this:\n\n```\nimport Config from 'react-native-config';\n\nvar API_URL = Config.API_URL || 'api.my-default-url.com';\nvar WWW_URL = Config.WWW_URL || 'my-default-web-url.biz';\nvar FONT = Config.FONT || 'Helvetica';\nvar NAVBAR_HEIGHT = Config.NAVBAR_HEIGHT || 64;\nvar ENABLE_FUN = Boolean(Config.ENABLE_FUN);  // undefined\n```\n\nWith the following `.env`:\n\n```\nAPI_URL=foo\nWWW_URL=bar\nFONT=baz\nNAVBAR_HEIGHT=65\n```\n\ninto this\n\n```\nimport Config from 'react-native-config';\n\nvar API_URL = 'foo' || 'api.my-default-url.com';\nvar WWW_URL = 'bar' || 'my-default-web-url.biz';\nvar FONT = 'baz' || 'Helvetica';\nvar NAVBAR_HEIGHT = '65' || 64;\nvar ENABLE_FUN = Boolean(undefined);  // undefined\n```\n\n## Setup\n\nI will run through the setup of this plugin in a fresh React Native project using React Native 0.41.2.\n\n```\nreact-native init TestPlugin\ncd TestPlugin\nnpm install --save react-native-config\nnpm install --save-dev babel-plugin-react-native-config\n```\n\nCreate `.env` with\n\n```\nAPI_URL=hello\n```\n\nAnd update `.babelrc` to have\n\n```\n{\n  \"presets\": [\n    \"react-native\"\n  ],\n  \"env\": {\n    \"development\": {\n      \"plugins\": [\n         [\"babel-plugin-react-native-config\", { envfile: \".env\" }]\n      ]\n    }\n  }  \n}\n```\n\nNote that the `envfile` config option is a problem because the filesystem lookup is relative to the working directory of the react-native package manager, which can be different depending on your setup. For example, when running `react-native run-ios`, the packager runs in `node_modules/react-native/packager`, which seems like a bad design decision to me, but I don't work for an organization bent on world domination, so what do I know? If you run the packager manually, i.e. via `react-native start` (which is the only way to get command line flags into the packager), the working directory will be different.\n\nSo after all that tofu, this plugin will start by looking for the `envfile` in the current working directory, whatever that is. If it's not found, it will recursively look in parent directories until either\n\n 1. The root of the filesystem is reached.\n 2. A directory containing `.babelrc` is found.\n 3. A file containing `envfile` is found.\n\nYou can override the `envfile` config by setting `ENVFILE` in the environment of the process running babel.\n\nNow modify `index.ios.js` to include\n\n```\nimport Config from 'react-native-config';\n\n...\n\nexport default class TestPlugin extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.welcome}\u003e\n          Welcome to React Native!\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          API_URL = { Config.API_URL }\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nAnd then run `react-native run-ios` to see `hello` show up in the simulator.\n\nNow change the variable in `.env`, and refresh the code. Uh oh! It didn't change! This is because the react-packager only watches for javascript code changes before re-transpiling. Until I can figure out [a principled way](http://stackoverflow.com/questions/42212314/tell-react-native-packager-to-watch-a-non-javascript-file) to re-transpile when a specific file changes, you have to change both `.env` and the file that imports `react-native-config`. Adding or removing a blank line will do the trick.\n\n## Tests\n\nAs of now the tests are manual, because this project is still a work in progress. To test, run `babel` manually, or use one of my provided test source files in `tests`. If unit testing in javascript weren't so awful, I'd consider writing automated tests. But as it stands this is the simplest and clearest way to see what the plugin actually does to code. If you disagree, we can take it outside.\n\n```\nbabel --plugins \"../index.js\" tests/test3.js -o tests/test3.out.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj2kun%2Fbabel-plugin-react-native-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj2kun%2Fbabel-plugin-react-native-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj2kun%2Fbabel-plugin-react-native-config/lists"}