simple bottom bar

src/components/bottomTabBar/view/bottomTabBarStyles.js

@@ -2,21 +2,22 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 import { Dimensions } from 'react-native';
 import scalePx from '../../../utils/scalePx';
 
-const deviceWidth = Dimensions.get('window').width;
+const deviceWidth = Dimensions.get('screen').width;
 
 export default EStyleSheet.create({
   wrapper: {
     width: deviceWidth,
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    zIndex: 999,
+    flexDirection: 'row',
+    backgroundColor: '$primaryBackgroundColor',
+    borderTopWidth: 0.1,
+    shadowOpacity: 0.2,
+    height: 50,
+    elevation: 15,
   },
   subContent: {
     flexDirection: 'row',
     zIndex: 1,
     position: 'absolute',
-    bottom: 0,
     marginHorizontal: scalePx(20),
     justifyContent: 'space-between',
   },

src/components/bottomTabBar/view/bottomTabBarView.js

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import get from 'lodash/get';
 
 // Services and Actions
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { updateActiveBottomTab } from '../../../redux/actions/uiAction';
 
 // Constants
@@ -13,7 +14,7 @@ import ROUTES from '../../../constants/routeNames';
 import { ThemeContainer } from '../../../containers';
 
 // Components
-import TabBar from './tabbar';
+// import TabBar from './tabbar';
 
 // Styles
 import styles from './bottomTabBarStyles';
@@ -47,31 +48,17 @@ const BottomTabBarView = ({
     <ThemeContainer>
       {({ isDarkTheme }) => (
         <SafeAreaView style={styles.wrapper}>
-          <TabBar
-            selectedIndex={index}
-            circleBackgroundColor="#357ce6"
-            backgroundColor={isDarkTheme ? '#2e3d51' : '#f6f6f6'}
-            onChange={(i) => _jumpTo(routes[i], index, routes, jumpTo)}
-            activeTintColor={activeTintColor}
-            inactiveTintColor={inactiveTintColor}
-          >
-            {routes.map((route) => (
-              <TabBar.Item
-                icon={renderIcon({
+          {routes.map((route, idx) => (
+            <View key={route.key} style={{ flex: 1, alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => _jumpTo(route, idx, routes, jumpTo)}>
+                {renderIcon({
                   route,
-                  focused: false,
-                  tintColor: inactiveTintColor,
+                  focused: index === idx,
+                  tintColor: index === idx ? activeTintColor : inactiveTintColor,
                 })}
-                selectedIcon={renderIcon({
-                  route,
-                  focused: true,
-                  tintColor: activeTintColor,
-                })}
-                key={route}
-                disabled={route.routeName === ROUTES.TABBAR.POST_BUTTON}
-              />
-            ))}
-          </TabBar>
+              </TouchableOpacity>
+            </View>
+          ))}
         </SafeAreaView>
       )}
     </ThemeContainer>

src/components/icon/view/iconStyles.js

@@ -5,7 +5,7 @@ export default EStyleSheet.create({
   badge: {
     color: '$primaryLightGray',
     alignItems: 'center',
-    fontSize: 10,
+    fontSize: scalePx(12),
     fontWeight: '600',
   },
   badgeWrapper: {
@@ -17,8 +17,8 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 99,
-    height: scalePx(20),
-    minWidth: scalePx(20),
-    borderRadius: scalePx(10),
+    height: scalePx(17),
+    minWidth: scalePx(17),
+    borderRadius: scalePx(15),
   },
 });

src/components/postButton/postButtonView.js

@@ -16,7 +16,13 @@ const PostButtonView = ({ navigation }) => (
     }
     activeOpacity={1}
   >
-    <Icon iconType="MaterialCommunityIcons" name="pencil" color="#c1c5c7" size={scalePx(26)} />
+    <Icon
+      iconType="MaterialCommunityIcons"
+      style={{ padding: 15 }}
+      name="pencil"
+      color="#c1c5c7"
+      size={scalePx(26)}
+    />
   </TouchableOpacity>
 );
 

src/navigation/routes.js

@@ -45,7 +45,13 @@ const bottomTabNavigator = createBottomTabNavigator(
       screen: Feed,
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
-          <Icon iconType="MaterialIcons" name="view-day" color={tintColor} size={scalePx(26)} />
+          <Icon
+            iconType="MaterialIcons"
+            style={{ padding: 15 }}
+            name="view-day"
+            color={tintColor}
+            size={scalePx(26)}
+          />
         ),
       }),
     },
@@ -57,6 +63,7 @@ const bottomTabNavigator = createBottomTabNavigator(
             isBadge
             badgeType="notification"
             iconType="MaterialIcons"
+            style={{ padding: 15 }}
             name="notifications"
             color={tintColor}
             size={scalePx(26)}
@@ -67,7 +74,7 @@ const bottomTabNavigator = createBottomTabNavigator(
     [ROUTES.TABBAR.POST_BUTTON]: {
       screen: () => null,
       navigationOptions: {
-        tabBarIcon: () => <PostButton />,
+        tabBarIcon: <PostButton />,
       },
     },
     [ROUTES.TABBAR.WALLET]: {
@@ -76,6 +83,7 @@ const bottomTabNavigator = createBottomTabNavigator(
         tabBarIcon: ({ tintColor }) => (
           <Icon
             iconType="MaterialIcons"
+            style={{ padding: 15 }}
             name="account-balance-wallet"
             color={tintColor}
             size={scalePx(26)}
@@ -87,7 +95,13 @@ const bottomTabNavigator = createBottomTabNavigator(
       screen: Profile,
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
-          <Icon iconType="MaterialIcons" name="person" color={tintColor} size={scalePx(26)} />
+          <Icon
+            iconType="MaterialIcons"
+            style={{ padding: 15 }}
+            name="person"
+            color={tintColor}
+            size={scalePx(26)}
+          />
         ),
       }),
     },
@@ -96,7 +110,7 @@ const bottomTabNavigator = createBottomTabNavigator(
     tabBarComponent: (props) => <BottomTabBar {...props} />,
     tabBarOptions: {
       showLabel: false,
-      activeTintColor: '#f6f6f6',
+      activeTintColor: '#357ce6',
       inactiveTintColor: '#c1c5c7',
     },
   },