From 8c752c00f4d2ab442b644552d9ef3862abeaa9f2 Mon Sep 17 00:00:00 2001
From: Mustafa Buyukcelebi <mustafa.buyukcel@gmail.com>
Date: Thu, 5 Dec 2019 01:04:09 +0300
Subject: [PATCH] Fixed navbar design issue

---
 .../bottomTabBar/view/bottomTabBarStyles.js          | 10 ++++++----
 src/components/bottomTabBar/view/tabbar.js           |  8 +++++---
 src/components/icon/view/iconView.js                 |  2 --
 src/components/postButton/postButtonView.js          |  3 ++-
 .../postElements/body/view/postBodyView.js           |  4 ++--
 src/navigation/baseNavigator.js                      |  9 +++++----
 src/utils/scalePx.js                                 | 12 ++++++++++++
 7 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/scalePx.js

diff --git a/src/components/bottomTabBar/view/bottomTabBarStyles.js b/src/components/bottomTabBar/view/bottomTabBarStyles.js
index be73eeab6..fce75287a 100644
--- a/src/components/bottomTabBar/view/bottomTabBarStyles.js
+++ b/src/components/bottomTabBar/view/bottomTabBarStyles.js
@@ -1,5 +1,6 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { Dimensions } from 'react-native';
+import scalePx from '../../../utils/scalePx';
 
 const deviceWidth = Dimensions.get('window').width;
 
@@ -16,16 +17,17 @@ export default EStyleSheet.create({
     zIndex: 1,
     position: 'absolute',
     bottom: 0,
-    marginHorizontal: 20,
+    marginHorizontal: scalePx(20),
     justifyContent: 'space-between',
   },
   navItem: {
     alignItems: 'center',
     zIndex: 0,
-    padding: 20,
-    width: (deviceWidth - 38) / 5,
+    paddingVertical: scalePx(8),
+    paddingHorizontal: scalePx(10),
+    width: (deviceWidth - scalePx(38)) / 5,
   },
   circle: {
-    bottom: 25,
+    bottom: scalePx(25),
   },
 });
diff --git a/src/components/bottomTabBar/view/tabbar.js b/src/components/bottomTabBar/view/tabbar.js
index ccb63de69..dba398214 100644
--- a/src/components/bottomTabBar/view/tabbar.js
+++ b/src/components/bottomTabBar/view/tabbar.js
@@ -1,7 +1,9 @@
-import { View, TouchableHighlight, Animated } from 'react-native';
 import React, { Component } from 'react';
+import { View, TouchableHighlight, Animated } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
+import scalePx from '../../../utils/scalePx';
+
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -110,8 +112,8 @@ export default class TabBar extends Component {
           x="0px"
           y="0px"
           width="100%"
-          height="100"
-          viewBox="0 0 661 136"
+          height={scalePx(100)}
+          viewBox="0 0 661 100"
           space="preserve"
         >
           <AnimatedPath
diff --git a/src/components/icon/view/iconView.js b/src/components/icon/view/iconView.js
index 8b2887fce..9c88bc9b2 100644
--- a/src/components/icon/view/iconView.js
+++ b/src/components/icon/view/iconView.js
@@ -1,7 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
-
 import { Platform, View, Text } from 'react-native';
-
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
diff --git a/src/components/postButton/postButtonView.js b/src/components/postButton/postButtonView.js
index 4c85989e7..90a43569b 100644
--- a/src/components/postButton/postButtonView.js
+++ b/src/components/postButton/postButtonView.js
@@ -5,6 +5,7 @@ import { Icon } from '../icon';
 
 // Constant
 import { default as ROUTES } from '../../constants/routeNames';
+import scalePx from '../../utils/scalePx';
 
 const PostButtonView = ({ navigation }) => (
   <TouchableOpacity
@@ -15,7 +16,7 @@ const PostButtonView = ({ navigation }) => (
     }
     activeOpacity={1}
   >
-    <Icon iconType="MaterialCommunityIcons" name="pencil" color="#c1c5c7" size={26} />
+    <Icon iconType="MaterialCommunityIcons" name="pencil" color="#c1c5c7" size={scalePx(26)} />
   </TouchableOpacity>
 );
 
diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js
index 5c36943c7..6d33b4ab2 100644
--- a/src/components/postElements/body/view/postBodyView.js
+++ b/src/components/postElements/body/view/postBodyView.js
@@ -120,7 +120,7 @@ const PostBody = ({
     }
   };
 
-  const test = body.replace(/<a/g, '<a target="_blank"');
+  const html = body.replace(/<a/g, '<a target="_blank"');
   const customStyle = `
   * {
     color: ${EStyleSheet.value('$primaryBlack')};
@@ -209,7 +209,7 @@ const PostBody = ({
   return (
     <Fragment>
       <AutoHeightWebView
-        source={{ html: test }}
+        source={{ html }}
         style={{ width: isComment ? WIDTH - (32 + 29 * commentDepth) : WIDTH - 32 }}
         customStyle={customStyle}
         onMessage={_handleOnLinkPress}
diff --git a/src/navigation/baseNavigator.js b/src/navigation/baseNavigator.js
index 25484235d..c6dd7f266 100644
--- a/src/navigation/baseNavigator.js
+++ b/src/navigation/baseNavigator.js
@@ -3,6 +3,7 @@ import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 // Constants
 import ROUTES from '../constants/routeNames';
+import scalePx from '../utils/scalePx';
 
 // Components
 import { Icon, IconContainer } from '../components/icon';
@@ -15,7 +16,7 @@ const BaseNavigator = createBottomTabNavigator(
       screen: Feed,
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
-          <Icon iconType="MaterialIcons" name="view-day" color={tintColor} size={26} />
+          <Icon iconType="MaterialIcons" name="view-day" color={tintColor} size={scalePx(26)} />
         ),
       }),
     },
@@ -29,7 +30,7 @@ const BaseNavigator = createBottomTabNavigator(
             iconType="MaterialIcons"
             name="notifications"
             color={tintColor}
-            size={26}
+            size={scalePx(26)}
           />
         ),
       }),
@@ -48,7 +49,7 @@ const BaseNavigator = createBottomTabNavigator(
             iconType="MaterialIcons"
             name="account-balance-wallet"
             color={tintColor}
-            size={26}
+            size={scalePx(26)}
           />
         ),
       }),
@@ -57,7 +58,7 @@ const BaseNavigator = createBottomTabNavigator(
       screen: Profile,
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
-          <Icon iconType="MaterialIcons" name="person-outline" color={tintColor} size={26} />
+          <Icon iconType="MaterialIcons" name="person-outline" color={tintColor} size={scalePx(26)} />
         ),
       }),
     },
diff --git a/src/utils/scalePx.js b/src/utils/scalePx.js
new file mode 100644
index 000000000..92c8d9f8a
--- /dev/null
+++ b/src/utils/scalePx.js
@@ -0,0 +1,12 @@
+import { Dimensions, PixelRatio } from 'react-native';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// based on iphone X's scale
+const scale = SCREEN_WIDTH / 414;
+
+export default size => {
+  const newSize = size * scale;
+
+  return Math.round(PixelRatio.roundToNearestPixel(newSize));
+};