From 7ca33bfb70f5764b29ea747a48dfb54988835bb6 Mon Sep 17 00:00:00 2001
From: Mustafa Buyukcelebi <mustafa.buyukcel@gmail.com>
Date: Fri, 4 Oct 2019 11:02:33 +0300
Subject: [PATCH] Fixed auto navigate action for tabbar

---
 .../bottomTabBar/view/bottomTabBarStyles.js     | 13 ++++---------
 .../bottomTabBar/view/bottomTabBarView.js       | 14 +++-----------
 src/components/bottomTabBar/view/tabbar.js      | 17 +++++++++--------
 3 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/components/bottomTabBar/view/bottomTabBarStyles.js b/src/components/bottomTabBar/view/bottomTabBarStyles.js
index e7f28b028..f43ce9a1e 100644
--- a/src/components/bottomTabBar/view/bottomTabBarStyles.js
+++ b/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',
-    borderTopWidth: 0.1,
-    shadowOpacity: 0.1,
-    elevation: 10,
-  },
-  safeArea: {
-    backgroundColor: '$primaryBackgroundColor',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    zIndex: 99999,
   },
 });
diff --git a/src/components/bottomTabBar/view/bottomTabBarView.js b/src/components/bottomTabBar/view/bottomTabBarView.js
index f18dc25d1..0d77d5e00 100644
--- a/src/components/bottomTabBar/view/bottomTabBarView.js
+++ b/src/components/bottomTabBar/view/bottomTabBarView.js
@@ -71,20 +71,12 @@ class BottomTabBarView extends PureComponent {
     } = this.props;
 
     return (
-      <SafeAreaView
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          zIndex: 99999,
-          width: Dimensions.get('window').width,
-        }}
-      >
+      <SafeAreaView style={styles.wrapper}>
         <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}
         >
diff --git a/src/components/bottomTabBar/view/tabbar.js b/src/components/bottomTabBar/view/tabbar.js
index f65f1ffa8..8e4325b16 100644
--- a/src/components/bottomTabBar/view/tabbar.js
+++ b/src/components/bottomTabBar/view/tabbar.js
@@ -1,11 +1,4 @@
-import {
-  StyleSheet,
-  View,
-  TouchableHighlight,
-  Animated,
-  Dimensions,
-  SafeAreaView,
-} from 'react-native';
+import { StyleSheet, View, TouchableHighlight, Animated, Dimensions } 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) {