Add responsive design

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

src/app.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React from 'react';
 import { StatusBar, useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -8,7 +8,7 @@ import { Meme, Tag } from './database';
 import NavigationContainer from './navigation';
 import { SettingsProvider } from './contexts/settings';
 
-function App(): JSX.Element {
+function App() {
   const colorScheme = useColorScheme();
   const isDarkMode = colorScheme === 'dark';
   const theme = isDarkMode ? darkTheme : lightTheme;

src/components/actionButton.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { FAB, Portal } from 'react-native-paper';
 import { noOp } from '../constants';
+import { verticalScale } from '../styles';
 
 const styles = StyleSheet.create({
   fab: {
-    paddingBottom: 90,
+    paddingBottom: verticalScale(75),
   },
 });
 

src/components/paddedView.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from 'react-native-paper';
-
+import styles from '../styles';
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: '5%',
-  },
-  centered: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
 
 const PaddedView = ({
   children,
@@ -21,11 +11,17 @@ const PaddedView = ({
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
-  }): React.JSX.Element => {
+}) => {
   const { colors } = useTheme();
 
   return (
-    <View style={[styles.container, centered && styles.centered, { backgroundColor: colors.background }, style]}>
+    <View
+      style={[
+        styles.padding,
+        centered && styles.centered,
+        { backgroundColor: colors.background },
+        style,
+      ]}>
       {children}
     </View>
   );

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 }) => (
+              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="home" color={color} size={20} />
+                <FontAwesome5 name="home" color={color} size={size} />
               ),
             }}
           />
@@ -78,8 +83,8 @@ function NavigationContainer() {
             name="Search"
             component={Search}
             options={{
-              tabBarIcon: ({ color }) => (
+              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="search" color={color} size={20} />
+                <FontAwesome5 name="search" color={color} size={size} />
               ),
             }}
           />
@@ -87,8 +92,8 @@ function NavigationContainer() {
             name="Tags"
             component={Tags}
             options={{
-              tabBarIcon: ({ color }) => (
+              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="tags" color={color} size={20} />
+                <FontAwesome5 name="tags" color={color} size={size} />
               ),
             }}
           />
@@ -96,8 +101,8 @@ function NavigationContainer() {
             name="Settings"
             component={Settings}
             options={{
-              tabBarIcon: ({ color }) => (
+              tabBarIcon: ({ color, size }) => (
-                <FontAwesome5 name="cog" color={color} size={20} />
+                <FontAwesome5 name="cog" color={color} size={size} />
               ),
             }}
           />

src/styles.tsx

@@ -1,17 +1,35 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+
+const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size;
+const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
+const moderateScale = (size: number, factor = 0.5) =>
+  size + (horizontalScale(size) - size) * factor;
 
 const styles = StyleSheet.create({
   marginBottom: {
-    marginBottom: 15,
+    marginBottom: verticalScale(5),
+  },
+  padding: {
+    padding: '5%',
   },
   spaceBetweenHorizontal: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   centerText: {
     textAlign: 'center',
   },
 });
 
-export default styles;
+export { horizontalScale, verticalScale, moderateScale, styles as default };