Views.js

import React, { Component, View, ScrollView, Text } from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer, StackActions, NavigationActions } from 'react-navigation';
import { Constants } from 'react-native-unimodules'

import Splash from './../views/Splash.js'
import Login from './../views/Login.js'
import CodeConfirmation from './../views/CodeConfirmation.js'
import Share from './../views/Share.js'
import Content from './../views/Content.js'
import Main from './../views/Main.js'
import Profile from './../views/Profile.js'
import EditProfile from './../views/EditProfile.js'
import ListPeople from './../views/ListPeople.js'
import Bio from './../views/Bio.js'a
import Direct from './../views/Direct.js'
import Chat from './../views/Chat.js'
import SimpleList from './../views/SimpleList.js'
import V from './../views/V.js'
import SearchAddress from './../views/SA.js'
import SVT. from './../views/SVT.js'
import SearchV from './../views/SearchV.js'
import Ads from './../views/Ads.js'
import MyAs from './../views/MyAs.js'
import MC from './../views/MC.js'
import VC from './../views/VC.js'
import VAds from './../views/VAds.js'
import NotificationItem from './../views/NotificationItem.js'
import Backend from './Backend.js'

let Feather = null

const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let IconComponent = Feather;
  let iconName;
  /*if (routeName === 'Home') {
    iconName = `ios-information-circle${focused ? '' : '-outline'}`;
    // We want to add badges to home tab icon
    IconComponent = HomeIconWithBadge;
  } else if (routeName === 'Settings') {
    iconName = `ios-options${focused ? '' : '-outline'}`;
  }*/

  //add badge https://snack.expo.io/@react-navigation/tabs-with-icons-v3

  if (routeName === 'Home') {
    iconName = `map-pin`;
    // We want to add badges to home tab icon
    //IconComponent = HomeIconWithBadge;
  } else if (routeName === 'Search') {
    iconName = `search`;
  } else if (routeName === 'Conversation') {
    iconName = `message-circle`;
  } else if (routeName === 'Notification') {
    iconName = `bell`;
  }
  //iconName = `ios-information-circle${focused ? '' : '-outline'}`;
  // You can return any component that you like here!
  return <IconComponent name={iconName} size={25} color={tintColor} />;
};



class Views {
  static navigator = null
  static TabContainer = null

  static initTabs = async () => {
    if(!this.TabContainer){
      Feather = require('react-native-vector-icons/Feather').default
      //https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2
      this.TabContainer = createAppContainer(
        createBottomTabNavigator({
            Home: createStackNavigator({screen: require('./../views/Home.js').default}),
            Search: {screen: require('./../views/Search.js').default},
            Conversation: createStackNavigator({screen: require('./../views/Conversation.js').default}),
            Notification: createStackNavigator({screen: require('./../views/Notification.js').default}),
          },{
          defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => getTabBarIcon(navigation, focused, tintColor)
          }),
          tabBarOptions: {
            showLabel: false,
            activeTintColor: '#f13a59',
            inactiveTintColor: '#000',
          }
        })
      )
    }
    return this.TabContainer
  }

  static Container = createAppContainer(
    createStackNavigator({
      Splash: { screen: Splash }, //ok
      Login: { screen: Login }, //ok
      CodeConfirmation: { screen: CodeConfirmation }, //ok
      Main: { screen: Main }, //ok
      Content: { screen: Content }, //ok
      Profile: { screen: Profile }, //ok
      EditProfile: { screen: EditProfile }, //ok
      ListPeople: {screen: ListPeople}, //ok
      Bio: {screen: Bio}, //ok
      Direct: {screen: Direct}, //ok
      Chat: {screen: Chat},
      SimpleList: {screen: SimpleList}, //ok
      Share: {screen: Share}, //ok
      V: {screen: V}, //ok
      SA: {screen: SA}, //ok
      SVT: {screen: SVT}, //ok
      SV: {screen: SV}, //ok
      Ad: {screen: Ad}, //ok
      MyAs: {screen: MyAs},//ok
      MC: {screen: MC},//ok
      VC: {screen: VC},//ok
      VA: {screen: VA},//ok
      NotificationItem: {screen: NotificationItem},//ok
    },{
      defaultNavigationOptions:{
        headerStyle: {
          paddingTop: Constants.statusBarHeight,
          height: 60 + Constants.statusBarHeight,
        }
      }
    })
  )

  static setNavigator(navigator){
    Views.navigator=navigator
  }

  static reset(view){
    let resetAction = StackActions.reset({
      key: null, //XXX maybe !
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: view,
          key: Backend.uuid()
        })
      ]
    });
    Views.navigator.dispatch(resetAction);
  }
}

export default Views;