From f42bd2442f5eac7a5239241fb1d97a51bf6538cc Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 20 Feb 2024 14:39:43 +0100 Subject: [PATCH 01/13] chore: improrve expo router setup --- app/(app)/(authorized)/(tabs)/_layout.tsx | 13 +++++++++++++ .../(tabs)/example/_layout.tsx | 0 .../(tabs)/example/colors.tsx | 0 .../(tabs)/example/components.tsx | 0 .../(tabs)/example/data-from-be.tsx | 0 .../{ => (authorized)}/(tabs)/example/index.tsx | 0 .../(tabs)/example/test-form.tsx | 0 .../(tabs)/example/typography.tsx | 0 .../{ => (authorized)}/(tabs)/home/_layout.tsx | 0 .../{ => (authorized)}/(tabs)/home/details.tsx | 0 .../{ => (authorized)}/(tabs)/home/index.tsx | 0 .../(tabs)/settings/_layout.tsx | 0 .../(tabs)/settings/index.tsx | 0 app/(app)/{(tabs) => (authorized)}/_layout.tsx | 7 +++---- app/(app)/(authorized)/big-form.tsx | 3 +++ app/(app)/(common)/blog.tsx | 3 +++ .../{(auth) => (not-authorized)}/_layout.tsx | 0 .../{(auth) => (not-authorized)}/sign-in.tsx | 0 .../{(auth) => (not-authorized)}/sign-up.tsx | 0 app/(app)/_layout.tsx | 5 +++-- package.json | 2 +- src/hooks/navigation/useScreenOptions.ts | 6 ++++-- src/screens/BlogScreen.tsx | 17 +++++++++++++++++ src/screens/HomeScreen.tsx | 12 ++++++++++++ src/screens/SignInScreen.tsx | 2 ++ 25 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 app/(app)/(authorized)/(tabs)/_layout.tsx rename app/(app)/{ => (authorized)}/(tabs)/example/_layout.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/colors.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/components.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/data-from-be.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/index.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/test-form.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/example/typography.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/home/_layout.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/home/details.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/home/index.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/settings/_layout.tsx (100%) rename app/(app)/{ => (authorized)}/(tabs)/settings/index.tsx (100%) rename app/(app)/{(tabs) => (authorized)}/_layout.tsx (56%) create mode 100644 app/(app)/(authorized)/big-form.tsx create mode 100644 app/(app)/(common)/blog.tsx rename app/(app)/{(auth) => (not-authorized)}/_layout.tsx (100%) rename app/(app)/{(auth) => (not-authorized)}/sign-in.tsx (100%) rename app/(app)/{(auth) => (not-authorized)}/sign-up.tsx (100%) create mode 100644 src/screens/BlogScreen.tsx diff --git a/app/(app)/(authorized)/(tabs)/_layout.tsx b/app/(app)/(authorized)/(tabs)/_layout.tsx new file mode 100644 index 00000000..4d38d545 --- /dev/null +++ b/app/(app)/(authorized)/(tabs)/_layout.tsx @@ -0,0 +1,13 @@ +import { useScreenOptions } from '~hooks' +import { ResponsiveNavigator } from '~navigation/tabNavigator/navigator' + +export const unstable_settings = { + initialRouteName: 'home', +} + +export default function TabLayout() { + useScreenOptions({ + headerShown: false, + }) + return +} diff --git a/app/(app)/(tabs)/example/_layout.tsx b/app/(app)/(authorized)/(tabs)/example/_layout.tsx similarity index 100% rename from app/(app)/(tabs)/example/_layout.tsx rename to app/(app)/(authorized)/(tabs)/example/_layout.tsx diff --git a/app/(app)/(tabs)/example/colors.tsx b/app/(app)/(authorized)/(tabs)/example/colors.tsx similarity index 100% rename from app/(app)/(tabs)/example/colors.tsx rename to app/(app)/(authorized)/(tabs)/example/colors.tsx diff --git a/app/(app)/(tabs)/example/components.tsx b/app/(app)/(authorized)/(tabs)/example/components.tsx similarity index 100% rename from app/(app)/(tabs)/example/components.tsx rename to app/(app)/(authorized)/(tabs)/example/components.tsx diff --git a/app/(app)/(tabs)/example/data-from-be.tsx b/app/(app)/(authorized)/(tabs)/example/data-from-be.tsx similarity index 100% rename from app/(app)/(tabs)/example/data-from-be.tsx rename to app/(app)/(authorized)/(tabs)/example/data-from-be.tsx diff --git a/app/(app)/(tabs)/example/index.tsx b/app/(app)/(authorized)/(tabs)/example/index.tsx similarity index 100% rename from app/(app)/(tabs)/example/index.tsx rename to app/(app)/(authorized)/(tabs)/example/index.tsx diff --git a/app/(app)/(tabs)/example/test-form.tsx b/app/(app)/(authorized)/(tabs)/example/test-form.tsx similarity index 100% rename from app/(app)/(tabs)/example/test-form.tsx rename to app/(app)/(authorized)/(tabs)/example/test-form.tsx diff --git a/app/(app)/(tabs)/example/typography.tsx b/app/(app)/(authorized)/(tabs)/example/typography.tsx similarity index 100% rename from app/(app)/(tabs)/example/typography.tsx rename to app/(app)/(authorized)/(tabs)/example/typography.tsx diff --git a/app/(app)/(tabs)/home/_layout.tsx b/app/(app)/(authorized)/(tabs)/home/_layout.tsx similarity index 100% rename from app/(app)/(tabs)/home/_layout.tsx rename to app/(app)/(authorized)/(tabs)/home/_layout.tsx diff --git a/app/(app)/(tabs)/home/details.tsx b/app/(app)/(authorized)/(tabs)/home/details.tsx similarity index 100% rename from app/(app)/(tabs)/home/details.tsx rename to app/(app)/(authorized)/(tabs)/home/details.tsx diff --git a/app/(app)/(tabs)/home/index.tsx b/app/(app)/(authorized)/(tabs)/home/index.tsx similarity index 100% rename from app/(app)/(tabs)/home/index.tsx rename to app/(app)/(authorized)/(tabs)/home/index.tsx diff --git a/app/(app)/(tabs)/settings/_layout.tsx b/app/(app)/(authorized)/(tabs)/settings/_layout.tsx similarity index 100% rename from app/(app)/(tabs)/settings/_layout.tsx rename to app/(app)/(authorized)/(tabs)/settings/_layout.tsx diff --git a/app/(app)/(tabs)/settings/index.tsx b/app/(app)/(authorized)/(tabs)/settings/index.tsx similarity index 100% rename from app/(app)/(tabs)/settings/index.tsx rename to app/(app)/(authorized)/(tabs)/settings/index.tsx diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(authorized)/_layout.tsx similarity index 56% rename from app/(app)/(tabs)/_layout.tsx rename to app/(app)/(authorized)/_layout.tsx index 4209b19f..ee9fde41 100644 --- a/app/(app)/(tabs)/_layout.tsx +++ b/app/(app)/(authorized)/_layout.tsx @@ -1,10 +1,9 @@ -import { Redirect } from 'expo-router' +import { Redirect, Stack } from 'expo-router' import { useAuth } from '~hooks' -import { ResponsiveNavigator } from '~navigation/tabNavigator/navigator' export const unstable_settings = { - initialRouteName: 'home', + initialRouteName: '(tabs)', } export default function TabLayout() { @@ -14,5 +13,5 @@ export default function TabLayout() { return } - return + return } diff --git a/app/(app)/(authorized)/big-form.tsx b/app/(app)/(authorized)/big-form.tsx new file mode 100644 index 00000000..16c87b63 --- /dev/null +++ b/app/(app)/(authorized)/big-form.tsx @@ -0,0 +1,3 @@ +import { TestFormScreen } from '~screens' + +export default TestFormScreen diff --git a/app/(app)/(common)/blog.tsx b/app/(app)/(common)/blog.tsx new file mode 100644 index 00000000..e56f2aee --- /dev/null +++ b/app/(app)/(common)/blog.tsx @@ -0,0 +1,3 @@ +import { BlogScreen } from '~screens/BlogScreen' + +export default BlogScreen diff --git a/app/(app)/(auth)/_layout.tsx b/app/(app)/(not-authorized)/_layout.tsx similarity index 100% rename from app/(app)/(auth)/_layout.tsx rename to app/(app)/(not-authorized)/_layout.tsx diff --git a/app/(app)/(auth)/sign-in.tsx b/app/(app)/(not-authorized)/sign-in.tsx similarity index 100% rename from app/(app)/(auth)/sign-in.tsx rename to app/(app)/(not-authorized)/sign-in.tsx diff --git a/app/(app)/(auth)/sign-up.tsx b/app/(app)/(not-authorized)/sign-up.tsx similarity index 100% rename from app/(app)/(auth)/sign-up.tsx rename to app/(app)/(not-authorized)/sign-up.tsx diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx index c4bc25a2..0e5c5974 100644 --- a/app/(app)/_layout.tsx +++ b/app/(app)/_layout.tsx @@ -3,8 +3,9 @@ import { Stack } from 'expo-router' export default function AppLayout() { return ( - - + + + ) diff --git a/package.json b/package.json index a9cc6573..c0354eb0 100644 --- a/package.json +++ b/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" diff --git a/src/hooks/navigation/useScreenOptions.ts b/src/hooks/navigation/useScreenOptions.ts index 82374a63..6627bff0 100644 --- a/src/hooks/navigation/useScreenOptions.ts +++ b/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]) } diff --git a/src/screens/BlogScreen.tsx b/src/screens/BlogScreen.tsx new file mode 100644 index 00000000..5b75fc8b --- /dev/null +++ b/src/screens/BlogScreen.tsx @@ -0,0 +1,17 @@ +import { Center, Text } from '~components' +import { useScreenOptions, useTranslation } from '~hooks' + +export const BlogScreen = () => { + const { t } = useTranslation() + + useScreenOptions({ + // TODO: Add translation + title: t('navigation.screen_titles.blog'), + }) + + return ( +
+ This is blog screen, and is visible by logged in and logged out users +
+ ) +} diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index c08e12de..f243bd21 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -21,6 +21,12 @@ export const HomeScreen = () => { params: { user: 'example@example.com' }, }) }, []) + const navigateToBlog = useCallback(() => { + router.navigate('/blog') + }, []) + const navigateToBigForm = useCallback(() => { + router.navigate('/big-form') + }, []) return (
@@ -36,6 +42,12 @@ export const HomeScreen = () => { + +
) } diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx index aead3936..a5011d73 100644 --- a/src/screens/SignInScreen.tsx +++ b/src/screens/SignInScreen.tsx @@ -33,6 +33,7 @@ export const SignInScreen = (): JSX.Element => { }, 500) }, [setFocus]) + const navigateToBlog = useCallback(() => push('/blog'), [push]) const navigateToSignUp = useCallback(() => push('/sign-up'), [push]) const navigateToAppInfo = useCallback(() => push('/application-info'), [push]) const focusPasswordInput = useCallback(() => setFocus('password'), [setFocus]) @@ -104,6 +105,7 @@ export const SignInScreen = (): JSX.Element => { {t('sign_in_screen.do_not_have_an_account')} + {t('sign_in_screen.sign_up')} {t('sign_in_screen.sign_up')} From 1cdb72b0b5618996c1880bf9a67615a970636ee9 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 20 Feb 2024 14:40:20 +0100 Subject: [PATCH 02/13] chore: update useScreenOptions hook --- src/hooks/navigation/useScreenOptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/navigation/useScreenOptions.ts b/src/hooks/navigation/useScreenOptions.ts index 6627bff0..927f4ab9 100644 --- a/src/hooks/navigation/useScreenOptions.ts +++ b/src/hooks/navigation/useScreenOptions.ts @@ -8,7 +8,7 @@ export const useScreenOptions = ({ }: { title?: string presentation?: string - headerShown: boolean + headerShown?: boolean }) => { const navigation = useNavigation() From f3dfc7ad2daa03749f8daba1e0236c621ca1c9be Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 20 Feb 2024 14:41:08 +0100 Subject: [PATCH 03/13] chore: properly handle status bar when theme changes --- app/_layout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/_layout.tsx b/app/_layout.tsx index 65648c9d..95f5d370 100644 --- a/app/_layout.tsx +++ b/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 } from '~hooks' import { Providers } from '~providers' @@ -31,6 +31,7 @@ const Layout = () => { export default function RootLayout() { return ( + ) From f1be4e057fb0278ec9ef71340878525ade48830c Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 20 Feb 2024 14:41:24 +0100 Subject: [PATCH 04/13] chore: add missing translations --- src/i18n/translations/en.json | 4 +++- src/i18n/translations/pl.json | 4 +++- src/screens/HomeScreen.tsx | 5 +++-- src/screens/TestFormScreen.tsx | 2 +- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 5024e7bd..9aae38b6 100644 --- a/src/i18n/translations/en.json +++ b/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": { diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index f03692f9..41056235 100644 --- a/src/i18n/translations/pl.json +++ b/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": { diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index f243bd21..98e350b4 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -24,6 +24,7 @@ export const HomeScreen = () => { const navigateToBlog = useCallback(() => { router.navigate('/blog') }, []) + const navigateToBigForm = useCallback(() => { router.navigate('/big-form') }, []) @@ -43,10 +44,10 @@ export const HomeScreen = () => { {t('home_screen.details')} ) diff --git a/src/screens/TestFormScreen.tsx b/src/screens/TestFormScreen.tsx index f758a37c..ba85f148 100644 --- a/src/screens/TestFormScreen.tsx +++ b/src/screens/TestFormScreen.tsx @@ -27,7 +27,7 @@ export const TestFormScreen = (): JSX.Element => { const { t } = useTranslation() useScreenOptions({ - title: t('navigation.screen_titles.colors'), + title: t('navigation.screen_titles.test_form'), }) const { control, errors, submit, VALIDATION, setFocus } = useTestForm() From 40acb87e489e1a900f097f338eb8a85f746ed85d Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 20 Feb 2024 18:04:22 +0100 Subject: [PATCH 05/13] chore: refactor layout names --- app/(app)/(authorized)/(tabs)/_layout.tsx | 4 +++- app/(app)/(authorized)/_layout.tsx | 2 +- app/(app)/(common)/_layout.tsx | 9 +++++++++ app/(app)/(not-authorized)/_layout.tsx | 2 +- 4 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 app/(app)/(common)/_layout.tsx diff --git a/app/(app)/(authorized)/(tabs)/_layout.tsx b/app/(app)/(authorized)/(tabs)/_layout.tsx index 4d38d545..970c045f 100644 --- a/app/(app)/(authorized)/(tabs)/_layout.tsx +++ b/app/(app)/(authorized)/(tabs)/_layout.tsx @@ -5,9 +5,11 @@ export const unstable_settings = { initialRouteName: 'home', } -export default function TabLayout() { +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 } diff --git a/app/(app)/(authorized)/_layout.tsx b/app/(app)/(authorized)/_layout.tsx index ee9fde41..efe1be08 100644 --- a/app/(app)/(authorized)/_layout.tsx +++ b/app/(app)/(authorized)/_layout.tsx @@ -6,7 +6,7 @@ export const unstable_settings = { initialRouteName: '(tabs)', } -export default function TabLayout() { +export default function AuthorizedLayout() { const { isSignedIn } = useAuth() if (isSignedIn === false) { diff --git a/app/(app)/(common)/_layout.tsx b/app/(app)/(common)/_layout.tsx new file mode 100644 index 00000000..f77f6ea3 --- /dev/null +++ b/app/(app)/(common)/_layout.tsx @@ -0,0 +1,9 @@ +import { Stack } from 'expo-router' + +export const unstable_settings = { + initialRouteName: 'blog', +} + +export default function CommonLayout() { + return +} diff --git a/app/(app)/(not-authorized)/_layout.tsx b/app/(app)/(not-authorized)/_layout.tsx index df38fb8e..2eca7350 100644 --- a/app/(app)/(not-authorized)/_layout.tsx +++ b/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) { From 9ff8483e6d17ce1eda8b45322c06c228744cb85e Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 21 Feb 2024 13:26:40 +0100 Subject: [PATCH 06/13] chore: update app layout stack --- app/(app)/_layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx index 0e5c5974..b5d42ac0 100644 --- a/app/(app)/_layout.tsx +++ b/app/(app)/_layout.tsx @@ -5,7 +5,7 @@ export default function AppLayout() { - + ) From 7c481917da7461d07b5fb6e2d1a399cebb642f5d Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 22 Feb 2024 10:05:53 +0100 Subject: [PATCH 07/13] chore: navigation improvements --- app/(app)/(common)/_layout.tsx | 9 --------- app/(app)/_layout.tsx | 8 ++++++-- src/screens/ApplicationInfoScreen.tsx | 24 ++++++++++++++++++++++-- src/screens/SignInScreen.tsx | 2 -- 4 files changed, 28 insertions(+), 15 deletions(-) delete mode 100644 app/(app)/(common)/_layout.tsx diff --git a/app/(app)/(common)/_layout.tsx b/app/(app)/(common)/_layout.tsx deleted file mode 100644 index f77f6ea3..00000000 --- a/app/(app)/(common)/_layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Stack } from 'expo-router' - -export const unstable_settings = { - initialRouteName: 'blog', -} - -export default function CommonLayout() { - return -} diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx index b5d42ac0..e38d1aec 100644 --- a/app/(app)/_layout.tsx +++ b/app/(app)/_layout.tsx @@ -1,11 +1,15 @@ import { Stack } from 'expo-router' +export const unstable_settings = { + initialRouteName: 'index', +} + export default function AppLayout() { return ( - + - + ) diff --git a/src/screens/ApplicationInfoScreen.tsx b/src/screens/ApplicationInfoScreen.tsx index a440352d..118e789a 100644 --- a/src/screens/ApplicationInfoScreen.tsx +++ b/src/screens/ApplicationInfoScreen.tsx @@ -3,16 +3,26 @@ import * as Application from 'expo-application' import * as Clipboard from 'expo-clipboard' import Constants from 'expo-constants' import * as Notifications from 'expo-notifications' +import { router } 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 = router.canGoBack() useScreenOptions({ title: t('navigation.screen_titles.application_info'), @@ -55,12 +65,22 @@ export const ApplicationInfoScreen = (): JSX.Element => { {Application.nativeApplicationVersion} {Application.nativeBuildVersion} {i18n.languages.join(', ')} + {canGoBack && ( + <> + + + + + )} ) } const styles = StyleSheet.create({ container: { + flexGrow: 1, padding: 16, }, }) diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx index a5011d73..aead3936 100644 --- a/src/screens/SignInScreen.tsx +++ b/src/screens/SignInScreen.tsx @@ -33,7 +33,6 @@ export const SignInScreen = (): JSX.Element => { }, 500) }, [setFocus]) - const navigateToBlog = useCallback(() => push('/blog'), [push]) const navigateToSignUp = useCallback(() => push('/sign-up'), [push]) const navigateToAppInfo = useCallback(() => push('/application-info'), [push]) const focusPasswordInput = useCallback(() => setFocus('password'), [setFocus]) @@ -105,7 +104,6 @@ export const SignInScreen = (): JSX.Element => { {t('sign_in_screen.do_not_have_an_account')} - {t('sign_in_screen.sign_up')} {t('sign_in_screen.sign_up')} From 64ac393ddb29c9bd53b407ec874b0a0574bc992f Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 22 Feb 2024 13:57:25 +0100 Subject: [PATCH 08/13] fix: properly handle router notifications on web --- src/hooks/navigation/useRouterNotifications.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/hooks/navigation/useRouterNotifications.ts b/src/hooks/navigation/useRouterNotifications.ts index e7329054..fe2b6c39 100644 --- a/src/hooks/navigation/useRouterNotifications.ts +++ b/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 From 16ef5f11a98b5036101d66728307b16fc50cdceb Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 22 Feb 2024 14:25:46 +0100 Subject: [PATCH 09/13] feat: add landing header component --- src/components/LandingHeader.tsx | 65 ++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/components/LandingHeader.tsx diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx new file mode 100644 index 00000000..53ae11dc --- /dev/null +++ b/src/components/LandingHeader.tsx @@ -0,0 +1,65 @@ +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 router = useRouter() + + const { isSignedIn } = useAuth() + + const navigateToLogin = () => router.push('/sign-in') + + const canGoBack = router.canGoBack() + + const height = 60 + top + return ( + + {canGoBack ? ( + + + + ) : ( + + )} + {!isSignedIn ? ( + + ) : ( + + )} + + ) +} + +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 }, +}) From ec0da7976e9e98235f8d8a124aa0416a8a2d60ae Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 22 Feb 2024 14:26:09 +0100 Subject: [PATCH 10/13] feat: add landing screen on web --- app/index.tsx | 12 +++++-- src/i18n/translations/en.json | 3 ++ src/i18n/translations/pl.json | 3 ++ src/screens/LandingScreen.tsx | 65 +++++++++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 src/screens/LandingScreen.tsx diff --git a/app/index.tsx b/app/index.tsx index dd6b8465..156571bb 100644 --- a/app/index.tsx +++ b/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 + if (isSignedIn === true) { + return } - return + if (Platform.OS === 'web') { + return + } + + return } diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 9aae38b6..8e39966b 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -66,6 +66,9 @@ "examples_component": { "example": "Example" }, + "landing_screen": { + "login_cta": "Login to app" + }, "application_info_screen": { "navigation_info": "When you will try to go back it will double ask if you really want to leave \n" }, diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 41056235..2f95a116 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -66,6 +66,9 @@ "examples_component": { "example": "Przykład" }, + "landing_screen": { + "login_cta": "Zaloguj się" + }, "application_info_screen": { "navigation_info": "Kiedy będziesz próbował cofnąć to zostaniesz podwójnie zapytany, czy na pewno tego chcesz \n" }, diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx new file mode 100644 index 00000000..355a1964 --- /dev/null +++ b/src/screens/LandingScreen.tsx @@ -0,0 +1,65 @@ +import { router } from 'expo-router' +import { Image, StyleSheet } from 'react-native' + +import { Button, Center, Text } from '~components' +import { LandingHeader } from '~components/LandingHeader' +import { darkLogo, lightLogo } from '~constants' +import { useColorScheme } from '~contexts' +import { useCallback, useScreenOptions, useTranslation } from '~hooks' + +export const LandingScreen = () => { + const { t } = useTranslation() + + useScreenOptions({ + title: t('navigation.screen_titles.home'), + }) + + const { colorScheme } = useColorScheme() + + const navigateToDetails = useCallback(() => { + router.navigate({ + pathname: 'home/details', + params: { user: 'example@example.com' }, + }) + }, []) + const navigateToBlog = useCallback(() => { + router.navigate('/blog') + }, []) + + const navigateToBigForm = useCallback(() => { + router.navigate('/big-form') + }, []) + + return ( + <> + +
+ + {t('hello')} + {t('thanks')} + {t('app_information')} + + + +
+ + ) +} + +const styles = StyleSheet.create({ + logo: { + height: 100, + width: '100%', + }, +}) From fa1478ba59b40165b8b80eb1f864d1c7713d7dd0 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 22 Feb 2024 14:26:33 +0100 Subject: [PATCH 11/13] chore: change header on blog screen --- app/(app)/_layout.tsx | 2 +- src/screens/BlogScreen.tsx | 18 +++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx index e38d1aec..f62c2985 100644 --- a/app/(app)/_layout.tsx +++ b/app/(app)/_layout.tsx @@ -9,7 +9,7 @@ export default function AppLayout() { - + ) diff --git a/src/screens/BlogScreen.tsx b/src/screens/BlogScreen.tsx index 5b75fc8b..b9be200b 100644 --- a/src/screens/BlogScreen.tsx +++ b/src/screens/BlogScreen.tsx @@ -1,17 +1,13 @@ import { Center, Text } from '~components' -import { useScreenOptions, useTranslation } from '~hooks' +import { LandingHeader } from '~components/LandingHeader' export const BlogScreen = () => { - const { t } = useTranslation() - - useScreenOptions({ - // TODO: Add translation - title: t('navigation.screen_titles.blog'), - }) - return ( -
- This is blog screen, and is visible by logged in and logged out users -
+ <> + +
+ This is blog screen, and is visible by logged in and logged out users +
+ ) } From bd24a8aa730cc06e3a699dace51834363a87042f Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 23 Feb 2024 11:08:32 +0100 Subject: [PATCH 12/13] chore: refactor translations --- src/components/LandingHeader.tsx | 10 ++++------ src/i18n/translations/en.json | 4 +++- src/i18n/translations/pl.json | 4 +++- src/screens/ApplicationInfoScreen.tsx | 9 ++++----- src/screens/HomeScreen.tsx | 4 ++-- src/screens/LandingScreen.tsx | 13 ++----------- 6 files changed, 18 insertions(+), 26 deletions(-) diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx index 53ae11dc..63adf02d 100644 --- a/src/components/LandingHeader.tsx +++ b/src/components/LandingHeader.tsx @@ -12,13 +12,11 @@ export function LandingHeader() { const { colorScheme } = useColorScheme() const { top } = useSafeAreaInsets() const { t } = useTranslation() - const router = useRouter() + const { push, canGoBack, back } = useRouter() const { isSignedIn } = useAuth() - const navigateToLogin = () => router.push('/sign-in') - - const canGoBack = router.canGoBack() + const navigateToLogin = () => push('/sign-in') const height = 60 + top return ( @@ -29,8 +27,8 @@ export function LandingHeader() { Platform.select({ default: {}, web: { display: 'flex' } }), ]} > - {canGoBack ? ( - + {canGoBack() ? ( + ) : ( diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 8e39966b..bd59b5d5 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -67,7 +67,9 @@ "example": "Example" }, "landing_screen": { - "login_cta": "Login to app" + "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" diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 2f95a116..7429dd19 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -67,7 +67,9 @@ "example": "Przykład" }, "landing_screen": { - "login_cta": "Zaloguj się" + "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" diff --git a/src/screens/ApplicationInfoScreen.tsx b/src/screens/ApplicationInfoScreen.tsx index 118e789a..677f10d1 100644 --- a/src/screens/ApplicationInfoScreen.tsx +++ b/src/screens/ApplicationInfoScreen.tsx @@ -3,7 +3,7 @@ import * as Application from 'expo-application' import * as Clipboard from 'expo-clipboard' import Constants from 'expo-constants' import * as Notifications from 'expo-notifications' -import { router } from 'expo-router' +import { useRouter } from 'expo-router' import { ScrollView, StyleSheet } from 'react-native' import { Box, Button, Text } from '~components' @@ -21,8 +21,7 @@ const projectId = Constants.expoConfig?.extra?.eas?.projectId export const ApplicationInfoScreen = (): JSX.Element => { const { i18n, t } = useTranslation() const { bottom } = useSafeAreaInsets() - - const canGoBack = router.canGoBack() + const { canGoBack, back } = useRouter() useScreenOptions({ title: t('navigation.screen_titles.application_info'), @@ -65,10 +64,10 @@ export const ApplicationInfoScreen = (): JSX.Element => { {Application.nativeApplicationVersion} {Application.nativeBuildVersion} {i18n.languages.join(', ')} - {canGoBack && ( + {canGoBack() && ( <> - diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 98e350b4..36ee9ab7 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -44,10 +44,10 @@ export const HomeScreen = () => { {t('home_screen.details')} ) diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx index 355a1964..cb2af2b0 100644 --- a/src/screens/LandingScreen.tsx +++ b/src/screens/LandingScreen.tsx @@ -16,12 +16,6 @@ export const LandingScreen = () => { const { colorScheme } = useColorScheme() - const navigateToDetails = useCallback(() => { - router.navigate({ - pathname: 'home/details', - params: { user: 'example@example.com' }, - }) - }, []) const navigateToBlog = useCallback(() => { router.navigate('/blog') }, []) @@ -43,14 +37,11 @@ export const LandingScreen = () => { {t('hello')} {t('thanks')} {t('app_information')} - From 28ee810e52fd0bf181bff5ad18ece1a263a35f89 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 23 Feb 2024 11:21:39 +0100 Subject: [PATCH 13/13] fix: tests for expo router --- jest.setup.js | 1 + src/components/atoms/Button/Button.test.tsx | 2 +- src/components/atoms/Text/Text.test.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/jest.setup.js b/jest.setup.js index e0393482..8e024f1e 100644 --- a/jest.setup.js +++ b/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 diff --git a/src/components/atoms/Button/Button.test.tsx b/src/components/atoms/Button/Button.test.tsx index e7297c43..59388543 100644 --- a/src/components/atoms/Button/Button.test.tsx +++ b/src/components/atoms/Button/Button.test.tsx @@ -1,6 +1,6 @@ import { StyleSheet } from 'react-native' -import { Button } from '.' +import { Button } from './Button' import { _appTheme } from '~constants' import { cleanup, render, fireEvent, act } from '~utils/testUtils' diff --git a/src/components/atoms/Text/Text.test.tsx b/src/components/atoms/Text/Text.test.tsx index 40449834..80a72972 100644 --- a/src/components/atoms/Text/Text.test.tsx +++ b/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'