Merge pull request #1359 from esteemapp/bugfix/navbar

Fixed navbar design issue

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,24 +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,
-    paddingBottom: 20,
-    width: (deviceWidth - 38) / 5,
-  },
-  navItem2: {
-    paddingRight: 5,
-    paddingLeft: 2,
-  },
-  navItem3: {
-    paddingRight: 0,
-    paddingLeft: 2,
+    paddingVertical: scalePx(8),
+    paddingHorizontal: scalePx(10),
+    width: (deviceWidth - scalePx(38)) / 5,
   },
   circle: {
-    bottom: 25,
+    bottom: scalePx(25),
   },
 });

src/components/bottomTabBar/view/tabbar.js

@@ -1,9 +1,11 @@
-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';
 import styles from './bottomTabBarStyles';
 
+
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -111,8 +113,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
@@ -147,9 +149,7 @@ const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, di
         <TouchableHighlight
           underlayColor="transparent"
           style={[
-            styles.navItem,
-            (index === 0 || index === 1) && styles.navItem2,
-            (index === 3 || index === 4) && styles.navItem3,
+            styles.navItem
           ]}
         >
           <View style={styles.circle}>{selectedIcon || icon}</View>

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';

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>
 );
 

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}

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)} />
         ),
       }),
     },

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));
+};