Routes.jsx

import React, { Fragment } from 'react'
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack'
import MainNavigator from './MainNavigator'
import { magic } from '../lib/authentication'
import SearchNavigator from './SearchNavigator'
import AccountNavigator from './AccountNavigator'
import PricingPlans from '../screens/PricingPlans'
import { getNavigationOptions } from './MainNavigator/utils'
import useReadinessTimeout from '../hooks/useReadinessTimeout'
import useSystemInformation from '../hooks/useSystemInformation'
import FreeMemberRegistration from '../screens/FreeMemberRegistration'
import FreeMemberAuthentication from '../screens/FreeMemberAuthentication'
import DeterminingAuthenticationState from '../screens/DeterminingAuthenticationState'
import Checkout from '../screens/Checkout'
import CreateUserWatchlist from '../screens/CreateUserWatchlist'
import UpdateUserWatchlist from '../screens/UpdateUserWatchlist'

const Stack = createStackNavigator()

const AppNavigator = () => {
  useSystemInformation()

  /**
   * Adds buffer for loading so we have time to show the animation
   */
  const ready = useReadinessTimeout(2000)

  const isReady = ready

  return (
    <Fragment>
      <Stack.Navigator>
        {isReady ? (
          <Fragment>
            <Stack.Screen
              name="Main"
              component={MainNavigator}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="CreateUserWatchlist"
              component={CreateUserWatchlist}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="UpdateUserWatchlist"
              component={UpdateUserWatchlist}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="FreeMemberRegistration"
              component={FreeMemberRegistration}
              options={getNavigationOptions({
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="FreeMemberAuthentication"
              component={FreeMemberAuthentication}
              options={getNavigationOptions({
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="Account"
              component={AccountNavigator}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="Search"
              component={SearchNavigator}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="PricingPlans"
              component={PricingPlans}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="Checkout"
              component={Checkout}
              options={getNavigationOptions({
                cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                headerShown: false,
              })}
            />
          </Fragment>
        ) : (
          <Stack.Screen
            name="DeterminingAuthenticationState"
            component={DeterminingAuthenticationState}
            options={{ headerShown: false }}
          />
        )}
      </Stack.Navigator>
      <magic.Relayer />
    </Fragment>
  )
}

export default AppNavigator