iOS back label

NavigationContainer.js

import React, { useEffect } from 'react'
import { Pressable, View } from 'react-native'
// Navigation
import {
  DrawerActions,
  getFocusedRouteNameFromRoute,
  useNavigation,
  useRoute,
} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { connect } from 'react-redux'
// Icons
import Ionicons from 'react-native-vector-icons/Ionicons'
// Screens
import LoginScreen from '../screens/authentication/login'
import RegisterScreen from '../screens/authentication/register'
import ForgotPasswordScreen from '../screens/authentication/forgotPassword'
import ConfirmScreen from '../screens/authentication/confirmEmail'
import ConfirmNewPassScreen from '../screens/authentication/confirmNewPassword'
import HomeScreen from '../screens/home'
import ServicesScreen from '../screens/services'
import UkkScreen from '../screens/ukk'
import ProfileScreen from '../screens/profile'
import AccidentsScreen from '../screens/accidents'
import CarAccidentScreen from '../screens/accidents/carAccident'
import PersonalAccidentScreen from '../screens/accidents/personalAccident'
import AssetsAccidentScreen from '../screens/accidents/assetsAccident'
import TrafficAccidentScreen from '../screens/accidents/trafficAccident'
import NoTowingTrafficScreen from '../screens/accidents/noTowingTraffic'
import TowingScreen from '../screens/accidents/towing'
import GlassAccidentScreen from '../screens/accidents/glassAccident'
import RockOnWindowScreen from '../screens/accidents/rockOnWindow'
import CrackOnWindowScreen from '../screens/accidents/crackOnWindow'
import YesGlassInsuranceScreen from '../screens/accidents/yesGlassInsurance'
import NoGlassInsuranceScreen from '../screens/accidents/noGlassInsurance'
import TechnicalIssueScreen from '../screens/accidents/technicalIssue'
import CarBrokenScreen from '../screens/accidents/carBroken'
import CarBrokenNoTowingScreen from '../screens/accidents/carBrokenNoTowing'
import BrokenCarTireScreen from '../screens/accidents/brokenCarTire'
import BrokenCarTireNoTowingScreen from '../screens/accidents/brokenCarTireNoTowing'
import CarNeedsRepairScreen from '../screens/accidents/carRequiresRepair'
import LocalServicesScreen from '../screens/services/localServices'
import CarServicesScreen from '../screens/services/carServices'
import PersonServicesScreen from '../screens/services/personServices'
import AssetServicesScreen from '../screens/services/assetServices'
import NoticesScreen from '../screens/notices'
import Info from '../screens/info'
import Settings from '../screens/settings/settings'
import OnBoardingScreen from '../screens/onboarding'
import DrawerMenu from '../navigation/Drawer'
// Colors
import colors from '../styles/Colors'

// Main tab navigation
const Tab = createBottomTabNavigator()

const HomeTab = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route, navigation }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName

          if (route.name === 'Koti') {
            iconName = focused ? 'ios-home' : 'ios-home-outline'
          } else if (route.name === 'Palvelut') {
            iconName = focused ? 'ios-pin' : 'ios-pin-outline'
          } else if (route.name === 'Ukk') {
            iconName = focused ? 'ios-help-circle' : 'ios-help-circle-outline'
          } else if (route.name === 'Omat tiedot') {
            iconName = focused
              ? 'ios-person-circle'
              : 'ios-person-circle-outline'
          }
          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />
        },
        tabBarActiveTintColor: colors.red,
        tabBarInactiveTintColor: colors.black,
        tabBarStyle: [
          {
            display: 'flex',
          },
          null,
        ],
        headerShown: true,
        headerTitleAlign: 'center',
        headerRight: () => (
          <>
            <Pressable
              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
            >
              <Ionicons
                testID='DrawerMenu'
                name='ios-menu-outline'
                size={40}
                color={colors.white}
              />
            </Pressable>
          </>
        ),
      })}
    >
      <Tab.Screen
        name='Koti'
        component={HomeStack}
        options={{ headerTitle: 'Vahingonsattuessa', headerShown: false }}
      />
      <Tab.Screen name='Palvelut' component={ServicesScreen} />
      <Tab.Screen name='Ukk' component={UkkScreen} />
      <Tab.Screen name='Omat tiedot' component={ProfileScreen} />
    </Tab.Navigator>
  )
}

const Drawer = createDrawerNavigator()

const DrawerNav = (props, { navigation, route }) => {
  return props.completed === false ? (
    <BoardingStack />
  ) : (
    <Drawer.Navigator
      drawerContent={(props) => <DrawerMenu {...props} />}
      screenOptions={{ headerShown: false }}
    >
      <Drawer.Screen name='HomeTab' component={HomeTab} />
    </Drawer.Navigator>
  )
}

const Boarding = createStackNavigator()

const BoardingStack = () => {
  return (
    <Boarding.Navigator>
      <Boarding.Screen
        name='Boarding'
        component={OnBoardingScreen}
        options={{ headerShown: false }}
      />
    </Boarding.Navigator>
  )
}

const Home = createStackNavigator()

const HomeStack = (props) => {
  const navigation = useNavigation()
  const route = useRoute()
  const tabHiddenRoutes = [
    'Asetukset',
    'Kirjaudu',
    'Rekisteröidy',
    'Resetoi salasana',
    'Vahvista tili',
    'Vaihda salasana',
  ]

  useEffect(() => {
    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarStyle: { display: 'none' } })
    } else {
      navigation.setOptions({ tabBarStyle: { display: 'flex' } })
    }
  }, [tabHiddenRoutes])

  return (
    <Home.Navigator
      screenOptions={({ navigation }) => {
        return {
          animationEnabled: false,
          headerTitleAlign: 'center',
          headerTitleStyle: {
            color: colors.white,
          },
          headerStyle: {
            backgroundColor: colors.red,
            shadowColor: 'transparent',
          },
          headerRight: () => (
            <>
              <Pressable
                onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
              >
                <Ionicons
                  testID='DrawerMenu'
                  name='ios-menu-outline'
                  size={40}
                  color={colors.white}
                />
              </Pressable>
            </>
          ),
        }
      }}
    >
      <Home.Screen
        name='HomeScreen'
        component={HomeScreen}
        options={{ headerTitle: 'Vahingonsattuessa' }}
      />
      <Home.Screen name='Vahinkopalvelut' component={AccidentsScreen} />
      <Home.Screen
        name='Ajoneuvovahinko / vika'
        component={CarAccidentScreen}
      />
      <Home.Screen name='Henkilövahinko' component={PersonalAccidentScreen} />
      <Home.Screen name='Omaisuusvahinko' component={AssetsAccidentScreen} />
      <Home.Screen
        name='Liikennevahinko / muu vahinko'
        component={TrafficAccidentScreen}
      />
      <Home.Screen name='Hinaus' component={TowingScreen} />
      <Home.Screen name='Lasivahinko' component={GlassAccidentScreen} />
      <Home.Screen
        name='Tuulilasiin tuli kivi / nasta'
        component={RockOnWindowScreen}
      />
      <Home.Screen
        name='Tuulilasissa on halkeama'
        component={CrackOnWindowScreen}
      />
      <Home.Screen
        name='Lasivakuutus kyllä'
        component={YesGlassInsuranceScreen}
      />
      <Home.Screen name='Lasivakuutus ei' component={NoGlassInsuranceScreen} />

      <Home.Screen name='Tekninenvika' component={TechnicalIssueScreen} />
      <Home.Screen
        name='Ajoneuvollani ei voi ajaa'
        component={CarBrokenScreen}
      />
      <Home.Screen
        name='Ajoneuvo rikki ei hinausta'
        component={CarBrokenNoTowingScreen}
      />
      <Home.Screen
        name='Ajoneuvostani rikkoutui rengas'
        component={BrokenCarTireScreen}
      />
      <Home.Screen
        name='Rengas rikki ei hinausta'
        component={BrokenCarTireNoTowingScreen}
      />
      <Home.Screen
        name='Ajoneuvoni tarvitsee huoltoa'
        component={CarNeedsRepairScreen}
      />
      <Home.Screen
        name='Paikalliset palvelut'
        component={LocalServicesScreen}
      />
      <Home.Screen
        name='Liikennevahinko ei hinausta'
        component={NoTowingTrafficScreen}
      />
      <Home.Screen name='Ajoneuvopalvelut' component={CarServicesScreen} />
      <Home.Screen name='Henkilöpalvelut' component={PersonServicesScreen} />
      <Home.Screen name='Omaisuuspalvelut' component={AssetServicesScreen} />
      <Home.Screen name='Tiedotteet' component={NoticesScreen} />
      <Home.Screen name='Info' component={Info} />
      <Home.Screen
        name='Asetukset'
        component={Settings}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
      <Home.Screen
        name='Kirjaudu'
        component={LoginScreen}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
      <Home.Screen
        name='Rekisteröidy'
        component={RegisterScreen}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
      <Home.Screen
        name='Resetoi salasana'
        component={ForgotPasswordScreen}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
      <Home.Screen
        name='Vahvista tili'
        component={ConfirmScreen}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
      <Home.Screen
        name='Vaihda salasana'
        component={ConfirmNewPassScreen}
        options={{
          headerTitleStyle: { color: colors.black, fontSize: 20 },
          headerStyle: { backgroundColor: colors.white },
          headerRight: () => <View />,
        }}
      />
    </Home.Navigator>
  )
}

// Root navigation stack that includes tab navigation after you are signed/registered in
const Root = createStackNavigator()

const Navigation = () => {
  return (
    <Root.Navigator
      screenOptions={() => {
        return {
          headerTitleAlign: 'center',
        }
      }}
    >
      <Root.Screen
        name='Vahginonsattuessa'
        component={DrawerNav}
        options={() => {
          return {
            headerShown: false,
            headerStyle: {
              backgroundColor: colors.white,
              shadowColor: 'transparent',
            },
          }
        }}
      />
    </Root.Navigator>
  )
}

const mapStateToProps = (state) => ({
  completed: state.boardingReducer.completed,
})

export default connect(mapStateToProps, null)(DrawerNav, Navigation)