first commit

app/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,78 @@
+/**
+ * Learn more about createBottomTabNavigator:
+ * https://reactnavigation.org/docs/bottom-tab-navigator
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createStackNavigator } from "@react-navigation/stack";
+import * as React from "react";
+
+import Colors from "../constants/Colors";
+import useColorScheme from "../hooks/useColorScheme";
+import TabOneScreen from "../screens/TabOneScreen";
+import TabTwoScreen from "../screens/TabTwoScreen";
+import { BottomTabParamList, TabOneParamList, TabTwoParamList } from "../types";
+
+const BottomTab = createBottomTabNavigator<BottomTabParamList>();
+
+export default function BottomTabNavigator() {
+	const colorScheme = useColorScheme();
+
+	return (
+		<BottomTab.Navigator
+			initialRouteName="TabOne"
+			tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
+			<BottomTab.Screen
+				name="TabOne"
+				component={TabOneNavigator}
+				options={{
+					tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+				}}
+			/>
+			<BottomTab.Screen
+				name="TabTwo"
+				component={TabTwoNavigator}
+				options={{
+					tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+				}}
+			/>
+		</BottomTab.Navigator>
+	);
+}
+
+// You can explore the built-in icon families and icons on the web at:
+// https://icons.expo.fyi/
+function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>["name"]; color: string }) {
+	return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
+}
+
+// Each tab has its own navigation stack, you can read more about this pattern here:
+// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
+const TabOneStack = createStackNavigator<TabOneParamList>();
+
+function TabOneNavigator() {
+	return (
+		<TabOneStack.Navigator>
+			<TabOneStack.Screen
+				name="TabOneScreen"
+				component={TabOneScreen}
+				options={{ headerTitle: "Tab One Title" }}
+			/>
+		</TabOneStack.Navigator>
+	);
+}
+
+const TabTwoStack = createStackNavigator<TabTwoParamList>();
+
+function TabTwoNavigator() {
+	return (
+		<TabTwoStack.Navigator>
+			<TabTwoStack.Screen
+				name="TabTwoScreen"
+				component={TabTwoScreen}
+				options={{ headerTitle: "Tab Two Title" }}
+			/>
+		</TabTwoStack.Navigator>
+	);
+}

app/navigation/LinkingConfiguration.ts

@@ -0,0 +1,30 @@
+/**
+ * Learn more about deep linking with React Navigation
+ * https://reactnavigation.org/docs/deep-linking
+ * https://reactnavigation.org/docs/configuring-links
+ */
+
+import * as Linking from "expo-linking";
+
+export default {
+	prefixes: [Linking.makeUrl("/")],
+	config: {
+		screens: {
+			Root: {
+				screens: {
+					TabOne: {
+						screens: {
+							TabOneScreen: "one",
+						},
+					},
+					TabTwo: {
+						screens: {
+							TabTwoScreen: "two",
+						},
+					},
+				},
+			},
+			NotFound: "*",
+		},
+	},
+};

app/navigation/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * If you are not familiar with React Navigation, check out the "Fundamentals" guide:
+ * https://reactnavigation.org/docs/getting-started
+ *
+ */
+import { NavigationContainer, DefaultTheme, DarkTheme } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import * as React from "react";
+import { ColorSchemeName } from "react-native";
+
+import NotFoundScreen from "../screens/NotFoundScreen";
+import { RootStackParamList } from "../types";
+import BottomTabNavigator from "./BottomTabNavigator";
+import LinkingConfiguration from "./LinkingConfiguration";
+
+export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+	return (
+		<NavigationContainer
+			linking={LinkingConfiguration}
+			theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+			<RootNavigator />
+		</NavigationContainer>
+	);
+}
+
+// A root stack navigator is often used for displaying modals on top of all other content
+// Read more here: https://reactnavigation.org/docs/modal
+const Stack = createStackNavigator<RootStackParamList>();
+
+function RootNavigator() {
+	return (
+		<Stack.Navigator screenOptions={{ headerShown: false }}>
+			<Stack.Screen name="Root" component={BottomTabNavigator} />
+			<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: "Oops!" }} />
+		</Stack.Navigator>
+	);
+}