Source: navigations/MainNavigator.js

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '@expo/vector-icons';

import MarketplaceIcon from '../assets/icons/MarketplaceIcon';
import OrderIcon from '../assets/icons/OrderIcon';
import Dashboardicon from '../assets/icons/DashboardIcon';
import NewAdIcon from '../assets/icons/NewAdIcon';

import NotificationBadge from '../components/NotificationBadge';

import DashboardScreen from '../screens/dashboard/DashboardScreen';
import Marketplace from '../screens/marketplace/Marketplace';
import NewAdsScreen from '../screens/newAds/newAdScreen';
import NotificationSettings from '../screens/settings/NotificationSettings';
import todoScreen from '../screens/todo/todoScreen';
import WebviewPage from '../screens/todo/WebviewPage';

/**
 * Set the default navigationOptions for the app.
 * @param {object} param NavigatorObject.
 */
const defaultNavOptions = ({ navigation }) => ({
  headerStyle: {
    backgroundColor: '#333'
  },
  headerTitleStyle: {
    fontFamily: 'MuseoSansRounded-900',
    fontSize: 23
  },
  headerTintColor: 'white',
  headerBackTitle: 'Tilbake',
  headerBackTitleStyle: {
    fontFamily: 'MuseoSansRounded-900'
  },
  headerRight: (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Settings', { screen: NotificationSettings });
      }}
    >
      <Ionicons style={{ color: 'white', marginRight: 20 }} name={'ios-settings'} size={30} />
    </TouchableOpacity>
  )
});

const settingsProperties = {
  Settings: {
    screen: NotificationSettings,
    navigationOptions: {
      headerTitle: 'Innstillinger'
    }
  }
};

const marketplaceNavigator = createStackNavigator(
  {
    Marketplace: {
      screen: Marketplace,
      navigationOptions: {
        headerTitle: 'Markedsplassen'
      }
    },
    Settings: {
      screen: NotificationSettings,
      navigationOptions: {
        headerTitle: 'Innstillinger'
      }
    }
  },
  {
    defaultNavigationOptions: defaultNavOptions
  }
);

const newAdsNavigaotr = createStackNavigator(
  {
    newAds: {
      screen: NewAdsScreen,
      navigationOptions: {
        headerTitle: 'Nye annonser'
      }
    },
    Settings: {
      screen: NotificationSettings,
      navigationOptions: {
        headerTitle: 'Innstillinger'
      }
    }
  },
  {
    defaultNavigationOptions: defaultNavOptions
  }
);

const todoNavigator = createStackNavigator(
  {
    Todo: {
      screen: todoScreen,
      navigationOptions: {
        headerTitle: 'Gjøremål'
      }
    },
    Settings: {
      screen: NotificationSettings,
      navigationOptions: {
        headerTitle: 'Innstillinger'
      }
    },
    WebviewPage: {
      screen: WebviewPage
    }
  },
  {
    defaultNavigationOptions: defaultNavOptions
  }
);

const dashboardNavigator = createStackNavigator(
  {
    Dashboard: {
      screen: DashboardScreen,
      navigationOptions: {
        headerTitle: 'Dashboard'
      }
    },
    Settings: {
      screen: NotificationSettings,
      navigationOptions: {
        headerTitle: 'Innstillinger'
      }
    }
  },
  {
    defaultNavigationOptions: defaultNavOptions
  }
);

const bottomTabNavigator = {
  Markedsplassen: {
    screen: marketplaceNavigator,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => {
        // return <Ionicons style={{ color: tintColor }} name="ios-home" size={25} />;
        return (
          <MarketplaceIcon
            style={{
              color: tintColor,
              height: 50,
              width: 50,
              marginLeft: 8,
              marginTop: 6
            }}
          />
        );
      },
      tabBarColor: 'white'
    }
  },
  'Nye annonser': {
    screen: newAdsNavigaotr,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => {
        return (
          <View>
            <NewAdIcon
              style={{
                color: tintColor,
                height: 25,
                width: 25
              }}
            />
            <NotificationBadge type="ads" />
          </View>
        );
      }
    },
    tabBarColor: 'white'
  },
  Gjøremål: {
    screen: todoNavigator,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => {
        return (
          <View>
            <OrderIcon
              style={{
                color: tintColor,
                height: 60,
                width: 65,
                padding: 20
              }}
            />
            <NotificationBadge customStyle={{ marginTop: 16, marginRight: 10 }} />
          </View>
        );
      }
    },
    tabBarColor: 'white'
  },
  Dashboard: {
    screen: dashboardNavigator,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => {
        return (
          <Dashboardicon
            style={{
              color: tintColor,
              height: 28,
              width: 28
            }}
          />
        );
      }
    },
    tabBarColor: 'white'
  }
};

const MainNavigator = createBottomTabNavigator(bottomTabNavigator, {
  style: {
    backgroundColor: '#333'
  },
  tabBarOptions: {
    activeTintColor: '#D6FE90',
    inactiveTintColor: 'white',
    style: {
      backgroundColor: '#333'
    },
    labelStyle: {
      fontFamily: 'MuseoSansRounded-900'
    }
  }
});

export default createAppContainer(MainNavigator);