added svg component plugin; added bottom tab svgs

declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import {SvgProps} from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}

ios/Podfile.lock

@@ -355,6 +355,8 @@ PODS:
     - Yoga
   - RNScreens (2.18.1):
     - React-Core
+  - RNSVG (12.1.0):
+    - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -414,6 +416,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -498,6 +501,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -546,6 +551,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 7d2b97cf2dd7c8c69956080fe911edc08cf0a8c7
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

metro.config.js

@@ -1,17 +1,17 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const {getDefaultConfig} = require('metro-config');
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
+module.exports = (async () => {
+  const {
+    resolver: {sourceExts, assetExts},
+  } = await getDefaultConfig();
+
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  };
+})();

package.json

@@ -23,6 +23,8 @@
     "react-native-reanimated": "^2.0.1",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^2.18.1",
+    "react-native-svg": "^12.1.0",
+    "react-native-svg-transformer": "^0.14.3",
     "react-redux": "^7.2.3",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",

src/navigation/tabs/TabsStack.tsx

@@ -6,11 +6,46 @@ import WalletRoot from './Wallet/WalletStack';
 import CardRoot from './Card/CardStack';
 import SettingsRoot from './Settings/SettingsStack';
 
+import HomeIcon from '../../assets/img/tab-icons/home.svg';
+import HomeFocusedIcon from '../../assets/img/tab-icons/home-focused.svg';
+import WalletIcon from '../../assets/img/tab-icons/wallet.svg';
+import WalletFocusedIcon from '../../assets/img/tab-icons/wallet-focused.svg';
+import CardIcon from '../../assets/img/tab-icons/card.svg';
+import CardFocusedIcon from '../../assets/img/tab-icons/card-focused.svg';
+import SettingsIcon from '../../assets/img/tab-icons/settings.svg';
+import SettingsFocusedIcon from '../../assets/img/tab-icons/settings-focused.svg';
+
+import {SvgProps} from 'react-native-svg';
+
+const Icons: {[key: string]: React.FC<SvgProps>} = {
+  Home: HomeIcon,
+  HomeFocused: HomeFocusedIcon,
+  Wallet: WalletIcon,
+  WalletFocused: WalletFocusedIcon,
+  Card: CardIcon,
+  CardFocused: CardFocusedIcon,
+  Settings: SettingsIcon,
+  SettingsFocused: SettingsFocusedIcon,
+};
+
 const Tab = createBottomTabNavigator();
 
 const TabsStack = () => {
   return (
-    <Tab.Navigator>
+    <Tab.Navigator
+      tabBarOptions={{showLabel: false}}
+      initialRouteName="Home"
+      lazy={true}
+      screenOptions={({route}) => ({
+        tabBarIcon: ({focused}) => {
+          let {name: icon} = route;
+          if (focused) {
+            icon += 'Focused';
+          }
+          const Icon = Icons[icon];
+          return <Icon />;
+        },
+      })}>
       <Tab.Screen name="Home" component={HomeRoot} />
       <Tab.Screen name="Wallet" component={WalletRoot} />
       <Tab.Screen name="Card" component={CardRoot} />

src/store/index.ts

@@ -16,7 +16,7 @@ const basePersistConfig = {
 const rootPersistConfig = {
   ...basePersistConfig,
   key: 'root',
-  blacklist: ['APP', 'AUTH'],
+  blacklist: [],
 };
 
 /*