{"id":17046552,"url":"https://github.com/calintamas/react-native-environments-guide","last_synced_at":"2025-04-12T15:31:23.510Z","repository":{"id":46226986,"uuid":"171105725","full_name":"calintamas/react-native-environments-guide","owner":"calintamas","description":"Set up environments in React Native using react-native-config, Xcode build schemes and Android product flavors","archived":false,"fork":false,"pushed_at":"2024-12-05T14:15:56.000Z","size":522,"stargazers_count":35,"open_issues_count":0,"forks_count":11,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-26T10:05:25.840Z","etag":null,"topics":["config","environment","react-native"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":false,"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/calintamas.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":"2019-02-17T09:51:21.000Z","updated_at":"2025-02-23T06:02:45.000Z","dependencies_parsed_at":"2024-12-05T15:36:26.955Z","dependency_job_id":null,"html_url":"https://github.com/calintamas/react-native-environments-guide","commit_stats":null,"previous_names":["calintamas/react-native-environments-guide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calintamas%2Freact-native-environments-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calintamas%2Freact-native-environments-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calintamas%2Freact-native-environments-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calintamas%2Freact-native-environments-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calintamas","download_url":"https://codeload.github.com/calintamas/react-native-environments-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248589498,"owners_count":21129626,"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":["config","environment","react-native"],"created_at":"2024-10-14T09:46:41.513Z","updated_at":"2025-04-12T15:31:23.502Z","avatar_url":"https://github.com/calintamas.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-environments-guide\n\nAccording to the [twelve-factor app guidelines](https://12factor.net/config):\n\n\u003e an app’s config is everything that is likely to vary between deploys (staging, production, dev).\n\nMoreover, a twelve-factor app:\n\n\u003e requires strict separation of config from code. Config varies substantially across deploys, code does not.\n\nIn the context of a React Native app, this means having:\n\n1. a bunch of `.env` files, one for each environment\n1. a script to build the app for a specific environment (and platform).\n\nIn the end, I want to make a build with a command-line invocation, like this:\n\n```sh\nfastlane ios build --env production\n```\n\nwhere `env` can be `production`, `staging` or `dev`.\n\n---\n\nTo achieve this, I'll use [react-native-config](https://github.com/lugg/react-native-config), [Xcode build schemes](https://developer.apple.com/documentation/xcode/customizing-the-build-schemes-for-a-project/) and [Android product flavors](https://developer.android.com/build/build-variants#product-flavors).\n\n- [Start here](#start-here)\n- [Setup iOS](#setup-ios)\n- [Setup Android]()\n- [Write the build scripts]()\n- [(Bonus) Validate env variables]()\n\n## Start here\n\nFirst, let's make sure we are on the same page. For this particular guide, I'm using the following package versions:\n\n```sh\nreact-native@0.74\nreact-native-config@1.5.1\n```\n\nI want to set up 3 environments: `dev`, `staging`\nand `production`. The naming is completely arbitrary, it can be anything you prefer (like `local`, `alpha` and `release`, as another example).\n\nI'm creating a new `env` directory, where I'll place these three `.env.*` files.\n\n```sh\nmkdir env\ntouch ./env/.env.dev ./env/.env.staging ./env/.env.production\n```\n\nAnd in the project's root, an empty `.env` file, which I'll add add to `.gitignore`:\n\n```sh\ntouch .env\necho \".env\" \u003e\u003e .gitignore\n```\n\n\u003e [!IMPORTANT]\n\u003e -- Why do I add it to `.gitignore`? The main `.env` will be the _working_ file, changed before every build to contain the desired environment variables. Considering its _volatile_ nature, it's not something we want to track in source control.\n\nNow the directory structure looks like this:\n\n```sh\n/example\n  /env\n  ├── .env.dev\n  ├── .env.production\n  └── .env.staging\n  .env\n  ...\n```\n\n\u003e [!TIP]\n\u003e -- using [tree](https://formulae.brew.sh/formula/tree) to pretty-print the directory content.\n\n## Setup iOS\n\nI'm relying on [Xcode build schemes](https://developer.apple.com/documentation/xcode/customizing-the-build-schemes-for-a-project/) to create one scheme per environment.\n\n![dev scheme](./.github/assets/dev-scheme.png)\n\n## Setup Android\n\nTODO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalintamas%2Freact-native-environments-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalintamas%2Freact-native-environments-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalintamas%2Freact-native-environments-guide/lists"}