CHORE: expo router improvement

app/(app)/(authorized)/(tabs)/_layout.tsx

@@ -0,0 +1,15 @@
+import { useScreenOptions } from '~hooks'
+import { ResponsiveNavigator } from '~navigation/tabNavigator/navigator'
+
+export const unstable_settings = {
+  initialRouteName: 'home',
+}
+
+export default function TabsLayout() {
+  // It's added here not in higher layout because we only want to hide header only on this screen
+  useScreenOptions({
+    headerShown: false,
+  })
+
+  return <ResponsiveNavigator />
+}

app/(app)/(authorized)/_layout.tsx

@@ -0,0 +1,17 @@
+import { Redirect, Stack } from 'expo-router'
+
+import { useAuth } from '~hooks'
+
+export const unstable_settings = {
+  initialRouteName: '(tabs)',
+}
+
+export default function AuthorizedLayout() {
+  const { isSignedIn } = useAuth()
+
+  if (isSignedIn === false) {
+    return <Redirect href="/sign-in" />
+  }
+
+  return <Stack screenOptions={{ headerBackTitleVisible: false }} />
+}

app/(app)/(authorized)/big-form.tsx

@@ -0,0 +1,3 @@
+import { TestFormScreen } from '~screens'
+
+export default TestFormScreen

app/(app)/(common)/blog.tsx

@@ -0,0 +1,3 @@
+import { BlogScreen } from '~screens/BlogScreen'
+
+export default BlogScreen

app/(app)/(auth)/_layout.tsx → app/(app)/(not-authorized)/_layout.tsx

@@ -6,7 +6,7 @@ export const unstable_settings = {
   initialRouteName: 'sign-in',
 }
 
-export default function AuthLayout() {
+export default function NotAuthorizedLayout() {
   const { isSignedIn } = useAuth()
 
   if (isSignedIn === true) {

app/(app)/_layout.tsx

@@ -1,10 +1,15 @@
 import { Stack } from 'expo-router'
 
+export const unstable_settings = {
+  initialRouteName: 'index',
+}
+
 export default function AppLayout() {
   return (
-    <Stack screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="(tabs)" />
-      <Stack.Screen name="(auth)" />
+    <Stack screenOptions={{ headerShown: false, headerBackTitleVisible: false }}>
+      <Stack.Screen name="(authorized)" />
+      <Stack.Screen name="(not-authorized)" />
+      <Stack.Screen name="(common)/blog" />
       <Stack.Screen name="(modals)" options={{ presentation: 'modal' }} />
     </Stack>
   )

app/_layout.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@react-navigation/native'
 import { Slot } from 'expo-router'
 
-import { AbsoluteFullFill, Loader } from '~components'
+import { AbsoluteFullFill, Loader, StatusBar } from '~components'
 import { useAuth, useNavigationTheme, useRouterNotifications } from '~hooks'
 import { Providers } from '~providers'
 
@@ -33,6 +33,7 @@ const Layout = () => {
 export default function RootLayout() {
   return (
     <Providers>
+      <StatusBar />
       <Layout />
     </Providers>
   )

app/index.tsx

@@ -1,13 +1,19 @@
 import { Redirect } from 'expo-router'
+import { Platform } from 'react-native'
 
 import { useAuth } from '~hooks'
+import { LandingScreen } from '~screens/LandingScreen'
 
 export default function Root() {
   const { isSignedIn } = useAuth()
 
-  if (isSignedIn === false) {
-    return <Redirect href="/sign-in" />
+  if (isSignedIn === true) {
+    return <Redirect href="/home" />
   }
 
-  return <Redirect href="/home" />
+  if (Platform.OS === 'web') {
+    return <LandingScreen />
+  }
+
+  return <Redirect href="/sign-in" />
 }

jest.setup.js

@@ -3,6 +3,7 @@ import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/asy
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage)
 
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
+jest.mock('expo-router/entry', () => jest.fn())
 
 jest.mock('react-native-keyboard-aware-scroll-view', () => {
   const KeyboardAwareScrollView = ({ children }) => children

package.json

@@ -12,7 +12,7 @@
     "eslint",
     "prettier"
   ],
-  "main": "expo-router/entry",
+  "main": "./App",
   "repository": {
     "type": "git",
     "url": "https://github.com/binarapps/baca-react-native-template.git"

src/components/LandingHeader.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from 'expo-router'
+import { Image, StyleSheet, Platform, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { Box, Button, Icon, Pressable } from '~components'
+import { darkLogoFull, lightLogoFull } from '~constants'
+import { useColorScheme } from '~contexts'
+import { useAuth, useTranslation } from '~hooks'
+import { TabColorsStrings } from '~navigation/tabNavigator/config'
+
+export function LandingHeader() {
+  const { colorScheme } = useColorScheme()
+  const { top } = useSafeAreaInsets()
+  const { t } = useTranslation()
+  const { push, canGoBack, back } = useRouter()
+
+  const { isSignedIn } = useAuth()
+
+  const navigateToLogin = () => push('/sign-in')
+
+  const height = 60 + top
+  return (
+    <View
+      style={[
+        { height, paddingTop: top },
+        jsStyles.appHeader,
+        Platform.select({ default: {}, web: { display: 'flex' } }),
+      ]}
+    >
+      {canGoBack() ? (
+        <Pressable onPress={back}>
+          <Icon name="arrow-left-line" size={20} />
+        </Pressable>
+      ) : (
+        <Image
+          resizeMethod="resize"
+          resizeMode="contain"
+          source={colorScheme === 'light' ? lightLogoFull : darkLogoFull}
+          style={jsStyles.logoWide}
+        />
+      )}
+      {!isSignedIn ? (
+        <Button onPress={navigateToLogin}>{t('landing_screen.login_cta')}</Button>
+      ) : (
+        <Box />
+      )}
+    </View>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  appHeader: {
+    alignItems: 'center',
+    borderBottomColor: TabColorsStrings.lightGray,
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    width: '100%',
+    zIndex: 10,
+  },
+  logoWide: { height: 60, width: 150 },
+})

src/components/atoms/Button/Button.test.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native'
 
-import { Button } from '.'
+import { Button } from './Button'
 
 import { theme } from '~constants'
 import { cleanup, render, fireEvent, act } from '~utils/testUtils'

src/components/atoms/Text/Text.test.tsx

@@ -1,4 +1,4 @@
-import { Text } from '.'
+import { Text } from './Text'
 
 import { theme } from '~constants'
 import { cleanup, render } from '~utils/testUtils'

src/hooks/navigation/useRouterNotifications.ts

@@ -1,8 +1,9 @@
 import * as Notifications from 'expo-notifications'
 import { useRouter } from 'expo-router'
 import React from 'react'
+import { Platform } from 'react-native'
 
-export function useRouterNotifications() {
+function useRouterNotificationsNative() {
   const router = useRouter()
 
   React.useEffect(() => {
@@ -37,3 +38,6 @@ export function useRouterNotifications() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 }
+
+export const useRouterNotifications =
+  Platform.OS !== 'web' ? useRouterNotificationsNative : () => null

src/hooks/navigation/useScreenOptions.ts

@@ -4,13 +4,15 @@ import { useLayoutEffect } from 'react'
 export const useScreenOptions = ({
   title,
   presentation,
+  headerShown,
 }: {
   title?: string
   presentation?: string
+  headerShown?: boolean
 }) => {
   const navigation = useNavigation()
 
   useLayoutEffect(() => {
-    navigation.setOptions({ title, presentation })
-  }, [navigation, presentation, title])
+    navigation.setOptions({ title, presentation, headerShown })
+  }, [headerShown, navigation, presentation, title])
 }

src/i18n/translations/en.json

@@ -53,7 +53,9 @@
       "settings": "Settings",
       "sign_in": "Sign in",
       "sign_up": "Sign up",
-      "typography": "Typography"
+      "typography": "Typography",
+      "test_form": "Test form",
+      "blog": "Blog"
     }
   },
   "update": {
@@ -64,6 +66,11 @@
   "examples_component": {
     "example": "Example"
   },
+  "landing_screen": {
+    "login_cta": "Login to app",
+    "go_to_blog": "Open blog",
+    "go_to_form": "Open full screen form"
+  },
   "application_info_screen": {
     "navigation_info": "When you will try to go back it will double ask if you really want to leave \n"
   },

src/i18n/translations/pl.json

@@ -53,7 +53,9 @@
       "settings": "Settings",
       "sign_in": "Sign in",
       "sign_up": "Sign up",
-      "typography": "Typography"
+      "typography": "Typography",
+      "test_form": "Formularz testowy",
+      "blog": "Blog"
     }
   },
   "update": {
@@ -64,6 +66,11 @@
   "examples_component": {
     "example": "Przykład"
   },
+  "landing_screen": {
+    "login_cta": "Zaloguj się",
+    "go_to_blog": "Otwórz blog",
+    "go_to_form": "Otwórz pełno ekranowy formularz full"
+  },
   "application_info_screen": {
     "navigation_info": "Kiedy będziesz próbował cofnąć to zostaniesz podwójnie zapytany, czy na pewno tego chcesz \n"
   },

src/screens/ApplicationInfoScreen.tsx

@@ -3,16 +3,25 @@ import * as Application from 'expo-application'
 import * as Clipboard from 'expo-clipboard'
 import Constants from 'expo-constants'
 import * as Notifications from 'expo-notifications'
+import { useRouter } from 'expo-router'
 import { ScrollView, StyleSheet } from 'react-native'
 
-import { Button, Text } from '~components'
+import { Box, Button, Text } from '~components'
 import { isExpoGo } from '~constants'
-import { useCallback, usePreventGoBack, useScreenOptions, useTranslation } from '~hooks'
+import {
+  useCallback,
+  usePreventGoBack,
+  useSafeAreaInsets,
+  useScreenOptions,
+  useTranslation,
+} from '~hooks'
 
 const projectId = Constants.expoConfig?.extra?.eas?.projectId
 
 export const ApplicationInfoScreen = (): JSX.Element => {
   const { i18n, t } = useTranslation()
+  const { bottom } = useSafeAreaInsets()
+  const { canGoBack, back } = useRouter()
 
   useScreenOptions({
     title: t('navigation.screen_titles.application_info'),
@@ -55,12 +64,22 @@ export const ApplicationInfoScreen = (): JSX.Element => {
       <Text>{Application.nativeApplicationVersion}</Text>
       <Text>{Application.nativeBuildVersion}</Text>
       <Text>{i18n.languages.join(', ')}</Text>
+      {canGoBack() && (
+        <>
+          <Box flexGrow={1} />
+          <Button my={2} onPress={back}>
+            {t('common.go_back')}
+          </Button>
+          <Box pb={`${bottom}px`} />
+        </>
+      )}
     </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
+    flexGrow: 1,
     padding: 16,
   },
 })

src/screens/BlogScreen.tsx

@@ -0,0 +1,13 @@
+import { Center, Text } from '~components'
+import { LandingHeader } from '~components/LandingHeader'
+
+export const BlogScreen = () => {
+  return (
+    <>
+      <LandingHeader />
+      <Center flex={1} px={4}>
+        <Text>This is blog screen, and is visible by logged in and logged out users</Text>
+      </Center>
+    </>
+  )
+}

src/screens/HomeScreen.tsx

@@ -21,6 +21,13 @@ export const HomeScreen = () => {
       params: { user: 'example@example.com' },
     })
   }, [])
+  const navigateToBlog = useCallback(() => {
+    router.navigate('/blog')
+  }, [])
+
+  const navigateToBigForm = useCallback(() => {
+    router.navigate('/big-form')
+  }, [])
 
   return (
     <Center flex={1} px={4}>
@@ -36,6 +43,12 @@ export const HomeScreen = () => {
       <Button mt={4} onPress={navigateToDetails}>
         {t('home_screen.details')}
       </Button>
+      <Button mt={4} onPress={navigateToBigForm}>
+        {t('landing_screen.go_to_form')}
+      </Button>
+      <Button mt={4} onPress={navigateToBlog}>
+        {t('landing_screen.go_to_blog')}
+      </Button>
     </Center>
   )
 }