chore(app): improve code structure

thecodingmachine · May 28, 2024 · c3dd3b3 · c3dd3b3
1 parent 0a5d00f
commit c3dd3b3
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 42 deletions.
diff --git a/template/src/App.tsx b/template/src/App.tsx
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@/theme';
 import ApplicationNavigator from './navigators/Application';
 import './translations';
 
-const queryClient = new QueryClient();
+export const queryClient = new QueryClient();
 
 export const storage = new MMKV();
 

diff --git a/template/src/components/molecules/Brand/Brand.tsx b/template/src/components/molecules/Brand/Brand.tsx
@@ -13,7 +13,7 @@ type Props = {
 	mode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
 };
 
-function Brand({ height, width, mode }: Props) {
+function Brand({ height = 200, width = 200, mode = 'contain' }: Props) {
 	const { layout } = useTheme();
 
 	if (!isImageSourcePropType(LogoLight) || !isImageSourcePropType(LogoDark)) {
@@ -33,10 +33,4 @@ function Brand({ height, width, mode }: Props) {
 	);
 }
 
-Brand.defaultProps = {
-	height: 200,
-	width: 200,
-	mode: 'contain',
-};
-
 export default Brand;
diff --git a/template/src/components/template/SafeScreen/SafeScreen.tsx b/template/src/components/template/SafeScreen/SafeScreen.tsx
@@ -1,25 +1,33 @@
-import { SafeAreaView, StatusBar } from 'react-native';
+import { StatusBar, View } from 'react-native';
+import type { PropsWithChildren } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '@/theme';
 
-import type { PropsWithChildren } from 'react';
-
 function SafeScreen({ children }: PropsWithChildren) {
 	const { layout, variant, navigationTheme } = useTheme();
+	const insets = useSafeAreaInsets();
 
 	return (
-		<SafeAreaView
+		<View
 			style={[
 				layout.flex_1,
-				{ backgroundColor: navigationTheme.colors.background },
+				{
+					backgroundColor: navigationTheme.colors.background,
+					// Paddings to handle safe area
+					paddingTop: insets.top,
+					paddingBottom: insets.bottom,
+					paddingLeft: insets.left,
+					paddingRight: insets.right,
+				},
 			]}
 		>
 			<StatusBar
 				barStyle={variant === 'dark' ? 'light-content' : 'dark-content'}
 				backgroundColor={navigationTheme.colors.background}
 			/>
 			{children}
-		</SafeAreaView>
+		</View>
 	);
 }
 

diff --git a/template/src/navigators/Application.tsx b/template/src/navigators/Application.tsx
@@ -1,23 +1,26 @@
 import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer } from '@react-navigation/native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { Example, Startup } from '@/screens';
 import { useTheme } from '@/theme';
 
-import type { ApplicationStackParamList } from '@/types/navigation';
+import type { RootStackParamList } from '@/types/navigation';
 
-const Stack = createStackNavigator<ApplicationStackParamList>();
+const Stack = createStackNavigator<RootStackParamList>();
 
 function ApplicationNavigator() {
 	const { variant, navigationTheme } = useTheme();
 
 	return (
-		<NavigationContainer theme={navigationTheme}>
-			<Stack.Navigator key={variant} screenOptions={{ headerShown: false }}>
-				<Stack.Screen name="Startup" component={Startup} />
-				<Stack.Screen name="Example" component={Example} />
-			</Stack.Navigator>
-		</NavigationContainer>
+		<SafeAreaProvider>
+			<NavigationContainer theme={navigationTheme}>
+				<Stack.Navigator key={variant} screenOptions={{ headerShown: false }}>
+					<Stack.Screen name="Startup" component={Startup} />
+					<Stack.Screen name="Example" component={Example} />
+				</Stack.Navigator>
+			</NavigationContainer>
+		</SafeAreaProvider>
 	);
 }
 

diff --git a/template/src/screens/Example/Example.test.tsx b/template/src/screens/Example/Example.test.tsx
@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@/theme';
 import i18n from '@/translations';
 
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Example from './Example';
 
 describe('Example screen should render correctly', () => {
@@ -28,13 +29,15 @@ describe('Example screen should render correctly', () => {
 
 	test('the user change the language', () => {
 		const component = (
-			<ThemeProvider storage={storage}>
-				<I18nextProvider i18n={i18n}>
-					<QueryClientProvider client={queryClient}>
-						<Example />
-					</QueryClientProvider>
-				</I18nextProvider>
-			</ThemeProvider>
+			<SafeAreaProvider>
+				<ThemeProvider storage={storage}>
+					<I18nextProvider i18n={i18n}>
+						<QueryClientProvider client={queryClient}>
+							<Example />
+						</QueryClientProvider>
+					</I18nextProvider>
+				</ThemeProvider>
+			</SafeAreaProvider>
 		);
 
 		render(component);
@@ -50,13 +53,15 @@ describe('Example screen should render correctly', () => {
 
 	test('the user change the theme', () => {
 		const component = (
-			<ThemeProvider storage={storage}>
-				<I18nextProvider i18n={i18n}>
-					<QueryClientProvider client={queryClient}>
-						<Example />
-					</QueryClientProvider>
-				</I18nextProvider>
-			</ThemeProvider>
+			<SafeAreaProvider>
+				<ThemeProvider storage={storage}>
+					<I18nextProvider i18n={i18n}>
+						<QueryClientProvider client={queryClient}>
+							<Example />
+						</QueryClientProvider>
+					</I18nextProvider>
+				</ThemeProvider>
+			</SafeAreaProvider>
 		);
 
 		render(component);

diff --git a/template/src/screens/Startup/Startup.tsx b/template/src/screens/Startup/Startup.tsx
@@ -2,14 +2,15 @@ import { useEffect } from 'react';
 import { ActivityIndicator, Text, View } from 'react-native';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
+import { CommonActions } from '@react-navigation/native';
 
 import { useTheme } from '@/theme';
 import { Brand } from '@/components/molecules';
 import { SafeScreen } from '@/components/template';
 
-import type { ApplicationScreenProps } from '@/types/navigation';
+import type { RootScreenProps } from '@/types/navigation';
 
-function Startup({ navigation }: ApplicationScreenProps) {
+function Startup({ navigation }: RootScreenProps<'Startup'>) {
 	const { layout, gutters, fonts } = useTheme();
 	const { t } = useTranslation(['startup']);
 
@@ -21,10 +22,14 @@ function Startup({ navigation }: ApplicationScreenProps) {
 	});
 
 	useEffect(() => {
-		navigation.reset({
-			index: 0,
-			routes: [{ name: 'Example' }],
-		});
+		if (isSuccess) {
+			navigation.dispatch(
+				CommonActions.reset({
+					index: 0,
+					routes: [{ name: 'Example' }],
+				}),
+			);
+		}
 	}, [isSuccess]);
 
 	return (