Added types for navigation

Author: revenets

constants/api.ts

@@ -1,6 +1,6 @@
 const API = {
     QUOTE_URL: 'http://api.forismatic.com/api/1.0',
     IMAGE_URL: 'https://picsum.photos'
-}
+} as const;
 
-export { API };
+export { API };

constants/colors.ts

@@ -1,27 +1,27 @@
 const COLORS_LIGHT = {
-	appBackground: "#EEECEC",
-	primary900: "#00146D",
-	primary300: "#6d78bd",
-	primary200: "#969ecf",
-	primary100: "#B0B7E5",
-	secondary800: "#6d0014",
-	grey600: "#757575",
-	grey300: "#BDBDBD",
-	fontMain: "#000000",
-	fontInverse: "#FFFFFF",
+	APP_BACKGROUND: "#EEECEC",
+	PRIMARY__900: "#00146D",
+	PRIMARY_300: "#6d78bd",
+	PRIMARY_200: "#969ecf",
+	PRIMARY_100: "#B0B7E5",
+	SECONDARY_800: "#6d0014",
+	GREY__600: "#757575",
+	GREY_300: "#BDBDBD",
+	FONT_MAIN: "#000000",
+	FONT_INVERSE: "#FFFFFF",
 } as const;
 
 const COLORS_DARK = {
-	appBackground: "#262626",
-	primary900: "#BA68C8",
-	primary300: "#e1bee7",
-	primary200: "#514951",
-	primary100: "#351401",
-	secondary800: "#c86876",
-	grey300: "#757575",
-	grey600: "#BDBDBD",
-	fontInverse: "#000000",
-	fontMain: "#FFFFFF",
+	APP_BACKGROUND: "#262626",
+	PRIMARY_900: "#BA68C8",
+	PRIMARY_300: "#e1bee7",
+	PRIMARY_200: "#514951",
+	PRIMARY_100: "#351401",
+	SECONDARY_800: "#c86876",
+	GREY_300: "#757575",
+	GREY_600: "#BDBDBD",
+	FONT_INVERSE: "#000000",
+	FONT_MAIN: "#FFFFFF",
 } as const;
 
 export { COLORS_DARK, COLORS_LIGHT };

constants/index.ts

@@ -1,2 +1,3 @@
 export { API } from './api';
 export { COLORS_DARK, COLORS_LIGHT } from './colors';
+export { ROUTE_NAME } from './routes';

constants/routes.ts

@@ -0,0 +1,8 @@
+const ROUTE_NAME = {
+    DASHBOARD: 'Dashboard',
+    SETTINGS: 'Settings',
+    ADD_INSPIRATION: 'AddInspiration',
+    BOTTOM_TABS_NAVIGATOR: 'BottomTabsNavigator',
+} as const; 
+
+export { ROUTE_NAME };

contexts/index.ts

@@ -1 +1 @@
-export { ThemeProvider, ThemeContext } from './theme-context';
+export { ThemeProvider, ThemeContext } from './theme-context';

contexts/theme-context.tsx

@@ -28,4 +28,4 @@ const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   );
 };
 
-export { ThemeProvider, ThemeContext };
+export { ThemeProvider, ThemeContext };

helpers/get-random-number.helper.ts

@@ -6,4 +6,4 @@ const getRandomNumber = (min?: number, max?: number): number => {
     return Math.floor(Math.random() * 100);
 }
 
-export { getRandomNumber };
+export { getRandomNumber };

helpers/index.ts

@@ -1 +1 @@
-export { getRandomNumber } from './get-random-number.helper';
+export { getRandomNumber } from './get-random-number.helper';

hooks/index.ts

@@ -1 +1 @@
-export { useTheme } from './use-theme';
+export { useTheme } from './use-theme';

hooks/use-theme.ts

@@ -8,4 +8,4 @@ const useTheme = () => {
   return context;
 };
 
-export { useTheme };
+export { useTheme };

navigation/bottom-tabs-navigator.tsx

@@ -0,0 +1,15 @@
+import { Text } from "react-native";
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+import { Dashboard, Settings } from '../screens';
+
+const BottomTabs = createBottomTabNavigator();
+
+const BottomTabsNavigator = () => {
+    return (
+        // Add BottomTabs.Navigator here
+        <></>
+    )
+}
+
+export { BottomTabsNavigator };

navigation/drawer-navigator.tsx

@@ -1 +1 @@
-export { RootNavigator } from './root-navigator';
+export { RootNavigator } from './root-navigator';

navigation/index.ts

@@ -1,8 +1,12 @@
-import { NavigationContainer } from "@react-navigation/native";
 import { StatusBar } from "expo-status-bar";
 import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+import { BottomTabsNavigator } from "./bottom-tabs-navigator";
+import { RootStackParamList } from "../types";
 
-import { DrawerNavigator } from "./drawer-navigator";
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const RootNavigator = () => {
     const insets = useSafeAreaInsets();

navigation/root-navigator.tsx

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/drawer": "^6.7.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.10.0",
     "axios": "^1.7.2",
     "expo": "~51.0.19",
     "expo-font": "~12.0.7",
@@ -20,8 +22,7 @@
     "react-native": "0.74.3",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.1",
-    "@react-native-async-storage/async-storage": "1.23.1"
+    "react-native-safe-area-context": "4.10.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package-lock.json

@@ -0,0 +1,7 @@
+const AddInspiration: React.FC = () => {
+    return (
+        <></>
+    );
+}
+
+export { AddInspiration };

package.json

@@ -4,4 +4,4 @@ const Dashboard: React.FC = () => {
     );
 }
 
-export { Dashboard };
+export { Dashboard };

screens/add-inspiration/add-inspiration.tsx

@@ -1,2 +1,3 @@
 export { Settings } from './settings/settings';
-export { Dashboard } from './dashboard/dashboard';
+export { Dashboard } from './dashboard/dashboard';
+export { AddInspiration } from './add-inspiration/add-inspiration';

screens/dashboard/dashboard.tsx

@@ -4,4 +4,4 @@ const Settings: React.FC = () => {
     );
 }
 
-export { Settings };
+export { Settings };

screens/index.ts

@@ -7,4 +7,4 @@ type GetImageResponseDto = {
     download_url: string
 }
 
-export type { GetImageResponseDto };
+export type { GetImageResponseDto };

screens/settings/settings.tsx

@@ -6,4 +6,4 @@ type GetQuoteResponseDto = {
     quoteLink: string
 }
 
-export { type GetQuoteResponseDto };
+export { type GetQuoteResponseDto };

types/get-image-response-dto.type.ts

@@ -1,2 +1,10 @@
-export type { GetQuoteResponseDto } from './get-quote-response-dto.type';
-export type { GetImageResponseDto } from './get-image-response-dto.type';
+export type { GetQuoteResponseDto } from "./get-quote-response-dto.type";
+export type { GetImageResponseDto } from "./get-image-response-dto.type";
+export type { Inspiration } from "./inspiration.type";
+export type {
+	BottomTabsParamList,
+	BottomTabsScreenProps,
+	NavigationRoute,
+	RootStackParamList,
+	RootStackScreenProps,
+} from "./navigation.type";

types/get-quote-response-dto.type.ts

@@ -0,0 +1,7 @@
+type Inspiration = {
+    quote?: string;
+    quote_url?: string;
+    image_url?: string;
+}
+
+export type { Inspiration };

types/index.tsx

@@ -0,0 +1,52 @@
+import type {
+	NavigatorScreenParams,
+	CompositeScreenProps,
+} from "@react-navigation/native";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { BottomTabScreenProps as RNBottomTabScreenProps } from "@react-navigation/bottom-tabs";
+
+import type { ROUTE_NAME } from "../constants";
+import { Inspiration } from "./inspiration.type";
+
+type NavigationRoute = (typeof ROUTE_NAME)[keyof typeof ROUTE_NAME];
+
+type RootStackParamList = {
+	[ROUTE_NAME.BOTTOM_TABS_NAVIGATOR]: NavigatorScreenParams<BottomTabsParamList>;
+	[ROUTE_NAME.ADD_INSPIRATION]: undefined;
+};
+
+type BottomTabsParamList = {
+	[ROUTE_NAME.DASHBOARD]:
+		| {
+				inspiration?: Inspiration;
+		  }
+		| undefined;
+	[ROUTE_NAME.SETTINGS]: undefined;
+};
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace ReactNavigation {
+		interface RootParamList extends RootStackParamList {}
+	}
+}
+
+type RootStackScreenProps<T extends keyof RootStackParamList> =
+	NativeStackScreenProps<RootStackParamList, T>;
+
+type BottomTabsScreenProps<T extends keyof BottomTabsParamList> =
+	CompositeScreenProps<
+		RNBottomTabScreenProps<BottomTabsParamList, T>,
+		NativeStackScreenProps<
+			RootStackParamList,
+			typeof ROUTE_NAME.BOTTOM_TABS_NAVIGATOR
+		>
+	>;
+
+export type {
+	NavigationRoute,
+	RootStackParamList,
+	BottomTabsParamList,
+	RootStackScreenProps,
+	BottomTabsScreenProps,
+};