ref: routes components to their own files

src/router/utils/components/IsTestnet/IsTestnet.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import type {VFC} from 'react';
+import CONFIG from 'config';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#d9534f',
+    padding: 5,
+    borderRadius: 5,
+    marginLeft: 15,
+  },
+  text: {
+    color: 'white',
+    fontSize: 10,
+  },
+});
+
+export const isTestnet: VFC = () => {
+  if (!CONFIG.TESTNET) {
+    return;
+  }
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text} />
+    </View>
+  );
+};

src/router/utils/components/IsTestnet/index.ts

@@ -0,0 +1 @@
+export * from './IsTestnet';

src/router/utils/components/SmallLogo/SmallLogo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, StyleSheet, Image} from 'react-native';
+import type {VFC} from 'react';
+import {Colors} from 'utils/colors';
+import {isTestnet} from '../IsTestnet';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    height: 280 / 13,
+    width: 279 / 13,
+    tintColor: Colors.foreground,
+    marginLeft: 3,
+  },
+});
+
+export const SmallLogo: VFC = () => {
+  return (
+    <View style={styles.container}>
+      <Image source={require('assets/logo_small.png')} style={styles.image} />
+      {isTestnet()}
+    </View>
+  );
+};

src/router/utils/components/SmallLogo/index.ts

@@ -0,0 +1 @@
+export * from './SmallLogo';

src/router/utils/components/TabLogo/TabLogo.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {View, Image, StyleSheet} from 'react-native';
+import type {VFC} from 'react';
+import {Colors} from 'utils/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: inverse => ({
+    height: 280 / 13,
+    width: 279 / 13,
+    tintColor: inverse ? Colors.foreground : Colors.background,
+    marginLeft: 3,
+  }),
+});
+
+export const TabLogo: VFC = (inverse = false) => {
+  return (
+    <View style={styles.container}>
+      <Image
+        source={require('assets/logo_small.png')}
+        style={styles.image(inverse)}
+      />
+    </View>
+  );
+};

src/router/utils/components/TabLogo/index.ts

@@ -0,0 +1 @@
+export * from './TabLogo';

src/router/utils/index.tsx

@@ -1,76 +1,10 @@
 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 {Platform} 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>
-  );
-};
+import {TabLogo} from './components/TabLogo/';
 
 const Tab = createBottomTabNavigator();
 

src/router/utils/tabs.ts

@@ -1,5 +1,5 @@
 import {Colors} from 'utils/colors';
-import {SmallLogo} from './index';
+import {SmallLogo} from './components/SmallLogo';
 import DashboardScreen from 'screens/Dashboard';
 import MarketScreen from 'screens/Market';
 import PortfolioScreen from 'screens/Portfolio';