appNavigator.js

import React from 'react';
import {Image} from 'react-native';
import Icon from '@saypr/icon';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Appearance } from 'react-native-appearance';

import InitialKanvaz from './screens/InitialKanvaz';
import Home from './screens/Home';
import Summary from './screens/Summary';
import Account from './screens/Account';
import Payment from './screens/Payment';
import Help from './screens/Help';
import Login from './screens/Login';
import TransactionDetail from './screens/TransactionDetail';
import PaymentTransaction from './screens/PaymentTransaction';
import PINScreen from './screens/PINScreen';
import MapDetail from './screens/MapDetail';


    const DashboardTabNavigator = createBottomTabNavigator({
        Home: {screen: Home, navigationOptions:{tabBarIcon: ({tintColor}) => <Icon name="home3" color={tintColor} /> }},
Summary: {screen: Summary, navigationOptions:{tabBarIcon: ({tintColor}) => <Icon name="pie-chart" color={tintColor} /> }},
Account: {screen: Account, navigationOptions:{tabBarIcon: ({tintColor}) => <Icon name="user" color={tintColor} /> }},
Payment: {screen: Payment, navigationOptions:{tabBarIcon: ({tintColor}) => <Icon name="credit-card" color={tintColor} /> }},
Help: {screen: Help, navigationOptions:{tabBarIcon: ({tintColor}) => <Icon name="lifebuoy" color={tintColor} /> }},
    }, {
      defaultNavigationOptions: () => {
        let mode = Appearance.getColorScheme();
  
        Appearance.addChangeListener(({colorScheme}) => {
          mode = colorScheme;
        });
  
        return {
          tabBarOptions: {
            style: {
              backgroundColor:
                mode === 'dark'
                  ? 'rgb(0, 0, 0)'
                  : 'rgba(255, 255, 255, 0.5)',
              borderTopWidth: 1,
              borderTopColor: 'rgba(0, 0, 0, 0.1)',
              left: 0,
              right: 0,
              bottom: 0,
            },
          },
        };
      },
  });
    

    const MainnavigationNavigator = createStackNavigator(
      {
        Login: {screen: Login, navigationOptions: {gesturesEnabled: false}},
        TransactionDetail: {screen: TransactionDetail},
        DashboardTab: {screen: DashboardTabNavigator},
        PaymentTransaction: {screen: PaymentTransaction},
        PIN: {screen: PINScreen},
        MapDetail: {screen: MapDetail},
      },
      {defaultNavigationOptions: {headerShown: false}},
    );
    

    const navigationWrapperNavigator = createSwitchNavigator({
        InitialKanvaz: {screen: InitialKanvaz, },
Mainnavigation: {screen: MainnavigationNavigator},
    }, );
    

const appNavigator = createAppContainer(navigationWrapperNavigator);

export default appNavigator;