small hack, todo: find better way

src/components/bottomTabBar/view/bottomTabBarStyles.js

@@ -23,9 +23,16 @@ export default EStyleSheet.create({
     alignItems: 'center',
     zIndex: 0,
     paddingBottom: 20,
-    paddingRight: 3,
     width: (deviceWidth - 38) / 5,
   },
+  navItem2: {
+    paddingRight: 5,
+    paddingLeft: 2,
+  },
+  navItem3: {
+    paddingRight: 0,
+    paddingLeft: 2,
+  },
   circle: {
     bottom: 25,
   },

src/components/bottomTabBar/view/tabbar.js

@@ -144,7 +144,14 @@ const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, di
   if (selected) {
     if (showIcon) {
       return (
-        <TouchableHighlight underlayColor="transparent" style={styles.navItem}>
+        <TouchableHighlight
+          underlayColor="transparent"
+          style={[
+            styles.navItem,
+            (index === 0 || index === 1) && styles.navItem2,
+            (index === 3 || index === 4) && styles.navItem3,
+          ]}
+        >
           <View style={styles.circle}>{selectedIcon || icon}</View>
         </TouchableHighlight>
       );