{"id":4569,"url":"https://github.com/zetachang/react-native-dotenv","last_synced_at":"2025-10-02T23:35:38.340Z","repository":{"id":141842239,"uuid":"67438768","full_name":"zetachang/react-native-dotenv","owner":"zetachang","description":"A Babel preset let you import application configs from .env file (zero runtime dependency)","archived":true,"fork":false,"pushed_at":"2020-05-27T18:01:02.000Z","size":65,"stargazers_count":915,"open_issues_count":46,"forks_count":68,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-09-29T06:21:36.812Z","etag":null,"topics":["babel","dotenv","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/zetachang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-09-05T17:20:11.000Z","updated_at":"2024-09-15T16:13:12.000Z","dependencies_parsed_at":"2024-01-27T01:21:32.803Z","dependency_job_id":"767e47df-751d-4777-bbbb-ea18ae299daa","html_url":"https://github.com/zetachang/react-native-dotenv","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetachang%2Freact-native-dotenv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetachang%2Freact-native-dotenv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetachang%2Freact-native-dotenv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetachang%2Freact-native-dotenv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zetachang","download_url":"https://codeload.github.com/zetachang/react-native-dotenv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235051559,"owners_count":18928185,"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":["babel","dotenv","react-native"],"created_at":"2024-01-05T20:17:16.542Z","updated_at":"2025-10-02T23:35:38.009Z","avatar_url":"https://github.com/zetachang.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["System"],"readme":"# react-native-dotenv\n\nLet you `import` environment variables from a **.env** file in React Native, **don't** need any native code integration.\n\n[![CircleCI](https://circleci.com/gh/zetachang/react-native-dotenv.svg?style=svg)](https://circleci.com/gh/zetachang/react-native-dotenv)\n[![npm version](https://img.shields.io/npm/v/react-native-dotenv.svg?style=flat-square)](https://www.npmjs.com/package/react-native-dotenv)\n[![npm downloads](https://img.shields.io/npm/dt/react-native-dotenv.svg?style=flat-square)](https://www.npmjs.com/package/react-native-dotenv)\n\n## Install\n\n```sh\n$ npm install react-native-dotenv --save-dev\n```\n\nAdd the `react-native-dotenv` preset to your **.babelrc** file at the project root.\n\n```json\n{\n  \"presets\": [\"module:metro-react-native-babel-preset\", \"module:react-native-dotenv\"]\n}\n```\n\nIf you haven't got **.babelrc** set up for React Native, remember to install `metro-react-native-babel-preset` first.\n\n```sh\n$ npm install metro-react-native-babel-preset --save-dev\n```\n\n## Usage\n\nAdd your app configuration in an **.env** file.\n\n```\nAPI_KEY=lorem\nANOTHER_CONFIG=foobar\n```\n\nNow you can import it in your **.js** file.\n\n```js\nimport { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv'\n\nApiClient.init(API_KEY, ANOTHER_CONFIG)\n```\n\n## How does it work?\n\nAs you can see, it's implemented as a babel plugin. All referenced imported members are replaced as the values specified in the **.env** file.\n\nThe example above will get compiled as below.\n\n```js\n\nApiClient.init('lorem', 'foobar')\n```\n\n## FAQ\n\n### Changes to .env file is not updated\n\nManually edit the file importing `react-native-dotenv` by either adding an empty line or whitespace will work.\n\n### Can I use different **.env** settings for production ?\n\nYes, simply create a separate **.env.production** file and the default release process of react-native will pickup the right config.\n\n#### iOS\n\nYou can use the **Release** configuration to launch the Simulator. (Only supported in RN v0.39+)\n\n```\nreact-native run-ios --configuration Release\n```\n#### Android\n\n1. `Command⌘` + `M` to launch the developer menu in Android emulator.\n2. Tap **DevSettings**.\n3. Toggle **JS Dev Mode**.\n\n### Can I have more than `production` \u0026 `development` environment configs?\n\nSadly, it's not available so far. One of the workaround is generating **.env** file before triggering RN's bundle script automatically using either shell script or your own custom build pipeline.\n\n## Contact\n\n[David Chang](http://github.com/zetachang)\n[@zetachang](https://twitter.com/zetachang)\n\n## LICENSE\n\nMIT License, see LICENSE file for detail.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzetachang%2Freact-native-dotenv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzetachang%2Freact-native-dotenv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzetachang%2Freact-native-dotenv/lists"}