React Native - Проблема с вкладкой + навигатором ящика

Question

Я использую React TabNavigation + Side Box, используя React Navigation v3.Я могу переключать вкладки из окна «Ящик», но не могу выделить элемент «Выбранный ящик» при переключении между вкладками!Я провел последние 2 дня и много гуглил.Это то, что происходит (на картинке).Я был дома, но когда я переключился на вкладку «Продать», навигация в ящике не изменилась.Я хотел, чтобы в выдвижном ящике было выделено «Продать», так как я нажал на эту вкладку.

Изображения здесь

Нет успеха!Это мой код навигатора.

import { createStackNavigator, createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';
import { createAppContainer } from '@react-navigation/native';
import React from 'react';
import IonicIcon from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import login from './src/screens/Login';
import signup from './src/screens/SignUp';
import home from './src/screens/Home';
import posts from './src/screens/Posts';
//custom sidebar
import Sidebar from './src/screens/Sidedrawer';

const loginStack = createStackNavigator({
  SignIn: {
    screen: login,
    navigationOptions: () => {
      return {
        title: 'Login'
      }
    }
  }
});

const sellTab = createStackNavigator({
  SignUp: {
    screen: signup,
    navigationOptions: () => {
      return {
        title: 'Sell',
      }
    }
  }
});

const homeTab = createStackNavigator({
  Home: {
    screen: home,
    navigationOptions: () => {
      return {
        title: 'Home',
      }
    }
  }
});


const tabNavigator = createBottomTabNavigator({
  Home: {
    screen: homeTab,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => (
        <IonicIcon name="md-home" size={30} color={tintColor} />
      )
    }
  },
  Sell: {
    screen: sellTab,
    navigationOptions: {
      tabBarLabel: 'Sell',
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="dollar" size={30} color={tintColor} />
      )
    }
  }
}, {
    initialRouteName: 'Home',
    tabBarOptions: {
      showIcon: true
    },
  });

const stackNavigator = createStackNavigator(
  {
    Login: loginStack,
    Tabs: {
      screen: tabNavigator
    }
  }, {
    initialRouteName: 'Login',
    // we dont want to display the header on tabs (Back button navigation bar)
    headerMode: 'none'
  }
);

// to disable the left swipe on login we have to specify the drawerLockMode after route initialization
stackNavigator.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  console.log(navigation, 'Nav');
  if (navigation.state.index === 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
}

const sideDrawerNavigator = createDrawerNavigator(
  {
    Login: stackNavigator,
    // Home: homeTab,
    // Sell: sellTab,
    Posts: posts
  }, {
    contentOptions: {
      activeTintColor: '#1094F6',
      activeBackgroundColor: '#f8f8ff'
    },
    order: ['Login', 'Posts'],
    'drawerPosition': 'left', // you can change to right
    'contentComponent': (props) => <Sidebar {...props} /> // all contentOptions will be passed as props to Sidebar Component
  }
);

export default createAppContainer(sideDrawerNavigator);