Swap react-native-dotenv for react-native-config (#71)

Author: markmur

babel.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: ['module:react-native-dotenv'],
 };

sample/babel.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-  plugins: ['module:react-native-dotenv'],
 };

sample/ios/Podfile.lock

@@ -315,6 +315,10 @@ PODS:
   - React-jsinspector (0.72.8)
   - React-logger (0.72.8):
     - glog
+  - react-native-config (1.5.1):
+    - react-native-config/App (= 1.5.1)
+  - react-native-config/App (1.5.1):
+    - React-Core
   - react-native-safe-area-context (4.7.4):
     - React-Core
   - React-NativeModulesApple (0.72.8):
@@ -464,7 +468,7 @@ PODS:
   - RNScreens (3.27.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
-  - RNShopifyCheckoutSheetKit (1.0.0):
+  - RNShopifyCheckoutSheetKit (1.0.2):
     - React-Core
     - ShopifyCheckoutSheetKit (~> 1.0.1)
   - RNVectorIcons (10.0.2):
@@ -499,6 +503,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../../node_modules/react-native/ReactCommon/logger`)
+  - react-native-config (from `../node_modules/react-native-config`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-NativeModulesApple (from `../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -578,6 +583,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../../node_modules/react-native/ReactCommon/logger"
+  react-native-config:
+    :path: "../node_modules/react-native-config"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-NativeModulesApple:
@@ -653,6 +660,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 03baea362e7475543e7cd091cb4fcf2bd78e041e
   React-jsinspector: fdf0a09bddecf9ce8da830bcb89a9814230c04a4
   React-logger: c2e7bb772d6e9fc3d0109d1243b81546a9c93c0f
+  react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
   react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
   React-NativeModulesApple: f6153767facad322a10b07fa2dbd747abbe10302
   React-perflogger: 2a7d221549cd5b69e95c5afa2e8d336f0465e1ec
@@ -675,7 +683,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 7909c50383a18f0cb10ce1db7262b9a6da504c03
   RNReanimated: b3fe5092e7c7da790180e28c48f31e6b2bd3bfec
   RNScreens: 3c2d122f5e08c192e254c510b212306da97d2581
-  RNShopifyCheckoutSheetKit: 222ec9eafcf1bacd1c0e4f83eccc4d472ef27bd8
+  RNShopifyCheckoutSheetKit: 80878bf51cf6fbc9466c312dc37102591b4fd65f
   RNVectorIcons: 23b6e11af4aaf104d169b1b0afa7e5cf96c676ce
   ShopifyCheckoutSheetKit: b5f689803c6ddf5793191d39ef2ae7db52e5936c
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

sample/package.json

@@ -26,7 +26,7 @@
     "@shopify/checkout-sheet-kit": "*",
     "graphql": "^16.8.1",
     "jotai": "^2.6.0",
-    "react-native-dotenv": "^3.4.9",
+    "react-native-config": "^1.5.1",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.7.4",
     "react-native-screens": "^3.27.0",
@@ -48,7 +48,6 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native/metro-config": "^0.72.11",
-    "@types/react-native-dotenv": "^0.2.1",
     "@types/react-native-vector-icons": "^6.4.18",
     "babel-plugin-module-resolver": "^5.0.0",
     "metro-react-native-babel-preset": "0.76.8"

sample/src/App.tsx

@@ -26,7 +26,7 @@ import {Link, NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {ApolloClient, InMemoryCache, ApolloProvider} from '@apollo/client';
-import {STOREFRONT_DOMAIN, STOREFRONT_ACCESS_TOKEN} from '@env';
+import env from 'react-native-config';
 import Icon from 'react-native-vector-icons/Entypo';
 
 import CatalogScreen from './screens/CatalogScreen';
@@ -83,11 +83,11 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 export const cache = new InMemoryCache();
 
 const client = new ApolloClient({
-  uri: `https://${STOREFRONT_DOMAIN}/api/2023-10/graphql.json`,
+  uri: `https://${env.STOREFRONT_DOMAIN}/api/2023-10/graphql.json`,
   cache,
   headers: {
     'Content-Type': 'application/json',
-    'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
+    'X-Shopify-Storefront-Access-Token': env.STOREFRONT_ACCESS_TOKEN ?? '',
   },
 });
 
@@ -168,9 +168,11 @@ function CatalogStack() {
 }
 
 function CartIcon() {
+  const theme = useTheme();
+
   return (
     <Link to="/CartModal">
-      <Icon name="shopping-basket" size={20} />
+      <Icon name="shopping-basket" size={24} color={theme.colors.secondary} />
     </Link>
   );
 }

sample/src/utils.ts

@@ -1,4 +1,8 @@
-import {
+import env from 'react-native-config';
+import {NativeModules, Platform} from 'react-native';
+import {AppConfig} from './context/Config';
+
+const {
   EMAIL,
   ADDRESS_1,
   ADDRESS_2,
@@ -10,9 +14,7 @@ import {
   PROVINCE,
   ZIP,
   PHONE,
-} from '@env';
-import {NativeModules, Platform} from 'react-native';
-import {AppConfig} from './context/Config';
+} = env;
 
 export function createBuyerIdentityCartInput(appConfig: AppConfig) {
   if (!appConfig.prefillBuyerInformation) {

yarn.lock

@@ -8546,6 +8546,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-config@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "react-native-config@npm:1.5.1"
+  peerDependencies:
+    react-native-windows: ">=0.61"
+  peerDependenciesMeta:
+    react-native-windows:
+      optional: true
+  checksum: bde915ccc2c43df5e5a3f1df1c68495b598dc788cd0227d3b7a847b37fd6bbcf094a5cf9932816f7599132fa9e201c1d4db134f99e72565d20c30f69777d07ed
+  languageName: node
+  linkType: hard
+
 "react-native-dotenv@npm:^3.4.9":
   version: 3.4.9
   resolution: "react-native-dotenv@npm:3.4.9"
@@ -9100,13 +9112,12 @@ __metadata:
     "@react-navigation/native-stack": "npm:^6.9.17"
     "@react-navigation/stack": "npm:^6.3.21"
     "@shopify/checkout-sheet-kit": "npm:*"
-    "@types/react-native-dotenv": "npm:^0.2.1"
     "@types/react-native-vector-icons": "npm:^6.4.18"
     babel-plugin-module-resolver: "npm:^5.0.0"
     graphql: "npm:^16.8.1"
     jotai: "npm:^2.6.0"
     metro-react-native-babel-preset: "npm:0.76.8"
-    react-native-dotenv: "npm:^3.4.9"
+    react-native-config: "npm:^1.5.1"
     react-native-reanimated: "npm:^3.5.4"
     react-native-safe-area-context: "npm:^4.7.4"
     react-native-screens: "npm:^3.27.0"