Fixed auto navigate action for tabbar

src/components/bottomTabBar/view/bottomTabBarStyles.js

@@ -2,15 +2,10 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   wrapper: {
-    flexDirection: 'row',
-    height: 56,
     width: '$deviceWidth',
-    backgroundColor: '$primaryBackgroundColor',
+    position: 'absolute',
-    borderTopWidth: 0.1,
+    bottom: 0,
-    shadowOpacity: 0.1,
+    left: 0,
-    elevation: 10,
+    zIndex: 99999,
-  },
-  safeArea: {
-    backgroundColor: '$primaryBackgroundColor',
   },
 });

src/components/bottomTabBar/view/bottomTabBarView.js

@@ -71,20 +71,12 @@ class BottomTabBarView extends PureComponent {
     } = this.props;
 
     return (
-      <SafeAreaView
+      <SafeAreaView style={styles.wrapper}>
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          zIndex: 99999,
-          width: Dimensions.get('window').width,
-        }}
-      >
         <TabBar
-          selectedIndex={0}
+          selectedIndex={index}
           circleBackgroundColor="#357ce6"
           backgroundColor="#f6f6f6"
-          onChange={index => this._jumpTo(routes[index])}
+          onChange={i => this._jumpTo(routes[i])}
           activeTintColor={activeTintColor}
           inactiveTintColor={inactiveTintColor}
         >

src/components/bottomTabBar/view/tabbar.js

@@ -1,11 +1,4 @@
-import {
+import { StyleSheet, View, TouchableHighlight, Animated, Dimensions } from 'react-native';
-  StyleSheet,
-  View,
-  TouchableHighlight,
-  Animated,
-  Dimensions,
-  SafeAreaView,
-} from 'react-native';
 import React, { Component } from 'react';
 import Svg, { Circle, Path } from 'react-native-svg';
 
@@ -58,6 +51,14 @@ export default class TabBar extends Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    const { selectedIndex } = this.props;
+
+    if (prevProps.selectedIndex !== selectedIndex) {
+      this._onPress(selectedIndex);
+    }
+  }
+
   _onPress = (i, disabled) => {
     const { onChange } = this.props;
     if (!disabled) {