ref(routes): routes optimization

Author: B3ns44d

App.js

@@ -3,7 +3,7 @@ import {Platform, StatusBar} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 // eslint-disable-next-line no-unused-vars
 import AppsStateService from './src/services/appStates';
-import {NavigationScreens} from './src/routes';
+import {NavigationScreens} from './src/router/router';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {LoadingSheet} from './src/components/loadingSheet';
 import FlashMessage from 'react-native-flash-message';
@@ -15,6 +15,7 @@ function App() {
       StatusBar.setBackgroundColor('black');
     }
   } catch (e) {}
+
   const CoingrigTheme = {
     colors: {
       background: Colors.background,

src/i18n/index.js

@@ -1,6 +1,6 @@
 import i18n from 'i18next';
 import {initReactI18next} from 'react-i18next';
-var numeral = require('numeral');
+const numeral = require('numeral');
 import english from './languages/en.json';
 import french from './languages/fr.json';
 // import romanian from './languages/ro.json';

src/router/router.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import 'react-native-gesture-handler';
+import {createStackNavigator} from '@react-navigation/stack';
+import {screens} from './utils/screens';
+
+const Stack = createStackNavigator();
+
+// const BT = React.memo(BottomTabs);
+// export const NavigationScreens = React.memo(NS);
+
+export const NavigationScreens = () => {
+  return (
+    <Stack.Navigator>
+      {screens?.map(({name, component, options}) => (
+        <Stack.Screen
+          key={name}
+          name={name}
+          component={component}
+          options={options}
+        />
+      ))}
+    </Stack.Navigator>
+  );
+};

src/router/utils/components/Icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {Colors} from 'utils/colors';
+
+const Icon = () => (
+  <Ionicons
+    name="close"
+    size={30}
+    color={Colors.foreground}
+    style={{padding: 10}}
+  />
+);
+
+export default Icon;

src/router/utils/index.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import CONFIG from 'config';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Image, Platform, View, Text} from 'react-native';
+import {Colors} from 'utils/colors';
+import {tabs} from './tabs';
+
+export const isTestnet = () => {
+  if (!CONFIG.TESTNET) {
+    return;
+  }
+  return (
+    <View
+      style={{
+        backgroundColor: '#d9534f',
+        padding: 5,
+        borderRadius: 5,
+        marginLeft: 15,
+      }}>
+      <Text
+        style={{
+          color: 'white',
+          fontSize: 10,
+        }}>
+        TESTNET
+      </Text>
+    </View>
+  );
+};
+
+export const TabLogo = (inverse = false) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Image
+        source={require('../../assets/logo_small.png')}
+        style={{
+          height: 280 / 13,
+          width: 279 / 13,
+          tintColor: inverse ? Colors.foreground : Colors.background,
+          marginLeft: 3,
+        }}
+      />
+    </View>
+  );
+};
+
+export const SmallLogo = () => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Image
+        source={require('../../assets/logo_small.png')}
+        style={{
+          height: 280 / 13,
+          width: 279 / 13,
+          tintColor: Colors.foreground,
+          marginLeft: 3,
+        }}
+      />
+      {isTestnet()}
+    </View>
+  );
+};
+
+const Tab = createBottomTabNavigator();
+
+export function BottomTabs() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Dashboard"
+      headerMode="screen"
+      screenOptions={({route}) => ({
+        tabBarShowLabel: false,
+        tabBarActiveTintColor: '#FFFFFF',
+        tabBarActiveBackgroundColor: Colors.foreground,
+        tabBarStyle: {
+          borderTopWidth: 0,
+          elevation: 0,
+          height: Platform.OS === 'android' ? 60 : 75,
+          marginTop: 3,
+        },
+        tabBarItemStyle: {
+          marginHorizontal: 20,
+          borderRadius: 40,
+          paddingVertical: 5,
+          marginBottom: Platform.OS === 'android' && 10,
+        },
+        tabBarIcon: ({focused}) => {
+          if (route.name === 'Dashboard') {
+            return focused ? TabLogo(false) : TabLogo(true);
+          } else if (route.name === 'PortfolioScreen') {
+            return (
+              <Icon
+                name="wallet"
+                size={24}
+                color={focused ? Colors.inverse : Colors.foreground}
+              />
+            );
+          } else if (route.name === 'MarketScreen') {
+            return (
+              <Icon
+                name="stats-chart"
+                size={22}
+                color={focused ? Colors.inverse : Colors.foreground}
+              />
+            );
+          }
+          return null;
+        },
+      })}>
+      {tabs?.map(({name, component, options}) => (
+        <Tab.Screen
+          key={name}
+          name={name}
+          component={component}
+          options={options}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+}