feat: Customers Screen done

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.json

@@ -0,0 +1,28 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "plugin:react/jsx-runtime",
+        "standard-with-typescript",
+        "prettier"
+    ],
+    "overrides": [],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+        "project": [
+            "tsconfig.json"
+        ]
+    },
+    "plugins": [
+        "react",
+        "react-native"
+    ],
+    "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/strict-boolean-expressions": "off",
+        "@typescript-eslint/no-misused-promises": "off"
+    }
+}

.gitignore

@@ -9,6 +9,8 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.env
+env.ts
 
 # macOS
 .DS_Store

.prettierrc.json

@@ -0,0 +1,13 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "quoteProps": "as-needed",
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "useTabs": false,
+    "tabWidth": 2,
+    "trailingComma": "es5"
+}

App.tsx

@@ -1,37 +1,37 @@
 import { useFonts } from 'expo-font';
-import { StyleSheet } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { TailwindProvider } from 'tailwind-rn';
 
+import { ApolloProvider } from '@apollo/client';
 import { NavigationContainer } from '@react-navigation/native';
 
+import getEnvVars from './env';
+import { client } from './src/Apollo';
 import RootNavigator from './src/Navigator/RootNavigator';
 import utilities from './tailwind.json';
 
 export default function App() {
-const [fontsLoaded] = useFonts({
-  "Poppins-Regular" : require('./assets/fonts/Poppins-Regular.ttf'),
-  "Poppins-SemiBold": require('./assets/fonts/Poppins-SemiBold.ttf'),
-  "Poppins-Bold": require('./assets/fonts/Poppins-Bold.ttf'),
-"Poppins-Thin": require('./assets/fonts/Poppins-Thin.ttf'),
-"Poppins-Medium": require('./assets/fonts/Poppins-Medium.ttf'),
-"Poppins-Black":require('./assets/fonts/Poppins-Black.ttf')
-});
+  const [fontsLoaded] = useFonts({
+    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
+    'Poppins-SemiBold': require('./assets/fonts/Poppins-SemiBold.ttf'),
+    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
+    'Poppins-Thin': require('./assets/fonts/Poppins-Thin.ttf'),
+    'Poppins-Medium': require('./assets/fonts/Poppins-Medium.ttf'),
+    'Poppins-Black': require('./assets/fonts/Poppins-Black.ttf'),
+  });
 
+  if (!fontsLoaded) {
+    return <ActivityIndicator />;
+  }
+  console.warn('as', getEnvVars().stepzenApiUrl);
   return (
-    // @ts-ignore - TailwindProvider is missing a type definition
+    // @ts-expect-error - TailwindProvider is missing a type definition
     <TailwindProvider utilities={utilities}>
-      <NavigationContainer>
-      <RootNavigator/>
-      </NavigationContainer>
+      <ApolloProvider client={client}>
+        <NavigationContainer>
+          <RootNavigator />
+        </NavigationContainer>
+      </ApolloProvider>
     </TailwindProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

babel.config.js

@@ -1,6 +1,20 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          moduleName: '@env',
+          path: '.env',
+          safe: true,
+          allowUndefined: true,
+          blocklist: null,
+          allowlist: null,
+          verbose: false,
+        },
+      ],
+    ],
   };
 };

codegen.yml

@@ -0,0 +1,7 @@
+overwrite: true
+schema: "http://localhost:5001/api/moldy-goose"
+documents: "src/**/*.query.ts"
+generates:
+  src/Apollo/generated:
+    preset: "client"
+    plugins: []

env.example.ts

@@ -0,0 +1,14 @@
+import Constants from 'expo-constants';
+
+const ENV = {
+  dev: {
+    stepzenApiUrl: 'YOUR_API_LINK',
+    stepzenAuthKey: 'YOUR_API_KEY',
+  },
+};
+
+const getEnvVars = (env = Constants?.manifest?.releaseChannel) => {
+  return ENV.dev;
+};
+
+export default getEnvVars;