Проблема с отображением навигации по вкладкам React Native

export default class App extends React.Component {
  render() {
    const Stack = {
      FirstView: {
        screen: TabNavigator(
          {
            map: {
              screen: HomeMapScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            yourEvents: {
              screen: YourEventsScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            ...
          },
          {
            navigationOptions: {
              animationEnabled: "false"
            },
            tabBarPosition: "bottom",
            animationEnabled: false,
            swipeEnabled: false,
            tabBarOptions: {
              showIcon: "true", // Shows an icon for both iOS and Android
              style: {
                backgroundColor: "#04151F"
              },
              showLabel: false,
              activeTintColor: "#59C9A5",
              inactiveTintColor: "#F7FFF7",
              labelStyle: {
                fontSize: 10
              },
              iconSize: Platform.OS === "ios" ? 30 : 24
            }
          }
        )
      },
      ...
      userInfo: {
        screen: UserInfo,
        transitionConfig: () => fromLeft(),
        navigationOptions: {
          drawerLabel: <Hidden />
        }
      },
      ...
    };

    const DrawerRoutes = {
      ...
      Home: {
        name: "Home",
        screen: StackNavigator(Stack, {
          initialRouteName: "FirstView",
          transitionConfig: () => fromLeft(),
          headerMode: "none",
          drawerIcon: () => {
            return <Icon name = "map" type = "foundation" size = {30} color = {tintColor} />;
          }
        })
      },
      SecondViewStack: {
        name: "SecondViewStack",
        screen: StackNavigator(Stack, {
          initialRouteName: "SecondView",
          transitionConfig: () => fromLeft(),
          icon: () => {
            return <Icon name = "map" type = "foundation" size = {30} color = {tintColor} />;
          }
        })
      }
    };

    const RootNavigator = StackNavigator(
      {
        Drawer: {
          name: "Drawer",
          screen: DrawerNavigator(DrawerRoutes, {
            drawerBackgroundColor: "#D8DDEF",
            transitionConfig: () => fromLeft(),
            contentComponent: DrawerContent,
            contentOptions: {
              backgroundColor: 'black',
              flex: 1
            },
          })
        },
        ...Stack
      },
      {
        headerMode: "none"
      }
    );

    return (
      <Provider store = {store}>
        <View style = {styles.container}>
          <MyStatusBar translucent backgroundColor = "#04151F" barStyle = "light-content" />
          <RootNavigator />
        </View>
      </Provider>
    );
  }
}

class YourEventsScreen extends Component {
  state = {
    attendingEvents: true,
    ownedEvents: false,
    isLogoutVisible: false,
    animatePressAttend: new Animated.Value(1),
    animatePressHost: new Animated.Value(1),
    didFinishInitialAnimation: false,
  }

  static navigationOptions = {
    title: "Your Events",
    headerLeft: null,
    tabBarIcon: ({ tintColor }) => {
      return <Icon name = "calendar" size = {30} color = {tintColor} type = "entypo"/>;
    }
  };

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.props.fetchOwnedEvents(this.props.currentUser.userId);
      this.props.fetchAttendingEvents(this.props.currentUser.attendingEvents);

      this.setState({
        ...this.state,
         didFinishInitialAnimation: true,
       });
     });
  }