Add responsive design

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/navigation.tsx

@@ -8,6 +8,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { BottomNavigation, useTheme } from 'react-native-paper';
 import { Home, Search, Tags, Settings } from './screens';
 import ActionButton from './components/actionButton';
+import { horizontalScale } from './styles';
 
 function NavigationContainer() {
   const TabNavigator = createBottomTabNavigator();
@@ -56,7 +57,11 @@ function NavigationContainer() {
               renderIcon={({ route, focused, color }) => {
                 const { options } = descriptors[route.key];
                 if (options.tabBarIcon) {
-                  return options.tabBarIcon({ focused, color, size: 24 });
+                  return options.tabBarIcon({
+                    focused,
+                    color,
+                    size: horizontalScale(20),
+                  });
                 }
               }}
               getLabelText={({ route }) => {
@@ -69,8 +74,8 @@ function NavigationContainer() {
             name="Home"
             component={Home}
             options={{
-              tabBarIcon: ({ color }) => (
-                <FontAwesome5 name="home" color={color} size={20} />
+              tabBarIcon: ({ color, size }) => (
+                <FontAwesome5 name="home" color={color} size={size} />
               ),
             }}
           />
@@ -78,8 +83,8 @@ function NavigationContainer() {
             name="Search"
             component={Search}
             options={{
-              tabBarIcon: ({ color }) => (
-                <FontAwesome5 name="search" color={color} size={20} />
+              tabBarIcon: ({ color, size }) => (
+                <FontAwesome5 name="search" color={color} size={size} />
               ),
             }}
           />
@@ -87,8 +92,8 @@ function NavigationContainer() {
             name="Tags"
             component={Tags}
             options={{
-              tabBarIcon: ({ color }) => (
-                <FontAwesome5 name="tags" color={color} size={20} />
+              tabBarIcon: ({ color, size }) => (
+                <FontAwesome5 name="tags" color={color} size={size} />
               ),
             }}
           />
@@ -96,8 +101,8 @@ function NavigationContainer() {
             name="Settings"
             component={Settings}
             options={{
-              tabBarIcon: ({ color }) => (
-                <FontAwesome5 name="cog" color={color} size={20} />
+              tabBarIcon: ({ color, size }) => (
+                <FontAwesome5 name="cog" color={color} size={size} />
               ),
             }}
           />