feat(env): Switch to using react-native-dotenv (#197 by @jamonholmgren)

boilerplate.js

@@ -81,6 +81,7 @@ async function install(context) {
     version: getReactNativeVersion(context),
     useNpm: !ignite.useYarn,
   })
+
   if (rnInstall.exitCode > 0) process.exit(rnInstall.exitCode)
 
   // remove the __tests__ directory, App.js, and unnecessary config files that come with React Native
@@ -126,6 +127,7 @@ async function install(context) {
     { template: "index.js.ejs", target: "index.js" },
     { template: "README.md", target: "README.md" },
     { template: ".gitignore.ejs", target: ".gitignore" },
+    { template: ".env.example", target: ".env" },
     { template: ".prettierignore", target: ".prettierignore" },
     { template: ".solidarity", target: ".solidarity" },
     { template: ".babelrc", target: ".babelrc" },

boilerplate/.babelrc

@@ -1,24 +1,15 @@
 {
-  "presets": ["module:metro-react-native-babel-preset"],
+  "presets": ["module:metro-react-native-babel-preset", "module:react-native-dotenv"],
   "env": {
-    "production": {
-    }
+    "production": {}
   },
   "plugins": [
-    [
-      "transform-inline-environment-variables",
-      {
-        "include": ["NODE_ENV", "API"]
-      }
-    ],
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
     ],
-    [
-      "@babel/plugin-proposal-optional-catch-binding"
-    ]
+    ["@babel/plugin-proposal-optional-catch-binding"]
   ]
-}
+}

boilerplate/.env.example

@@ -1,6 +1,8 @@
-# This is an example where you can store your environment variables. Copy this file to .env
-# Now your app will have access to the variables added below. 
-# For more instructions see section "Secrets" in README.md
+# This is an example where you can store your environment variables.
+# It uses `react-native-dotenv` as a babel transform.
+#
+# Then just do this to import them:
+# import { API_URL } from 'react-native-dotenv'
 
 API_URL=https://myapi.com
 GOOGLE_MAPS_API_KEY=abcdefgh

boilerplate/README.md

@@ -30,7 +30,6 @@ ignite-project
 │   ├── services
 │   ├── theme
 │   ├── app.tsx
-│   ├── environment-variables.ts
 ├── storybook
 │   ├── views
 │   ├── index.ts
@@ -63,7 +62,9 @@ ignite-project
 │   ├── IgniteProject-tvOSTests
 │   ├── IgniteProject.xcodeproj
 │   └── IgniteProjectTests
+├── .env
 └── package.json
+
 ```
 
 ### ./app directory
@@ -82,8 +83,7 @@ app
 ├── services
 ├── theme
 ├── utils
-├── app.tsx
-├── environment-variables.ts
+└── app.tsx
 ```
 
 **components**

boilerplate/app/services/api/api-config.ts

@@ -1,4 +1,4 @@
-import * as env from "../../environment-variables"
+import { API_URL } from 'react-native-dotenv'
 
 /**
  * The options used to configure the API.
@@ -19,6 +19,6 @@ export interface ApiConfig {
  * The default configuration for the app.
  */
 export const DEFAULT_API_CONFIG: ApiConfig = {
-  url: env.API || "https://jsonplaceholder.typicode.com",
-  timeout: 10000,
+  url: API_URL || 'https://jsonplaceholder.typicode.com',
+  timeout: 10000
 }

boilerplate/package.json.ejs

@@ -61,7 +61,6 @@
     "@types/react-test-renderer": "16.8.3",
     "@typescript-eslint/eslint-plugin": "^1.1.0",
     "@typescript-eslint/parser": "^1.1.0",
-    "babel-plugin-transform-inline-environment-variables": "0.4.3",
 <% if (props.includeDetox) { -%>
     "detox": "^12.4.0",
 <% } -%>
@@ -79,6 +78,7 @@
     "patch-package": "6.1.2",
     "postinstall-prepare": "1.0.1",
     "prettier": "1.18.2",
+    "react-native-dotenv": "^0.2.0",
     "react-devtools-core": "3.6.3",
     "react-powerplug": "1.0.0",
     "rimraf": "2.6.3",