Add react-navigation

bouzuya · Sep 6, 2023 · fd22930 · fd22930
1 parent e310407
commit fd22930
Show file tree

Hide file tree

Showing 7 changed files with 391 additions and 57 deletions.
diff --git a/android/App.tsx b/android/App.tsx
@@ -1,64 +1,25 @@
-import { StatusBar } from "expo-status-bar";
-import { useState } from "react";
-import { FlatList, StyleSheet, View } from "react-native";
-import { Checkbox, FAB, List, PaperProvider } from "react-native-paper";
-import { SafeAreaView } from "react-native-safe-area-context";
+import React from "react";
+import { PaperProvider } from "react-native-paper";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { HistoryScreen } from "./components/HistoryScreen";
+import { ItemScreen } from "./components/ItemScreen";
+import { ListScreen } from "./components/ListScreen";
+import { TodayScreen } from "./components/TodayScreen";
+
+const Stack = createNativeStackNavigator();
 
 export default function App(): JSX.Element {
-  const [items, setItems] = useState<{ id: number; name: string }[]>([]);
-  const [checked, setChecked] = useState<Record<number, boolean>>({});
   return (
     <PaperProvider>
-      <SafeAreaView>
-        <View style={styles.container}>
-          <StatusBar style="auto" />
-          <FlatList
-            data={items}
-            keyExtractor={(item) => item.id.toString()}
-            renderItem={({ item }) => (
-              <List.Item
-                left={(props) => (
-                  <Checkbox
-                    onPress={() =>
-                      setChecked((prev) => ({
-                        ...prev,
-                        [item.id]: !prev[item.id],
-                      }))
-                    }
-                    status={checked[item.id] ? "checked" : "unchecked"}
-                    {...props}
-                  />
-                )}
-                title={item.name}
-              />
-            )}
-          />
-        </View>
-        <FAB
-          icon="plus"
-          onPress={() => {
-            setItems((prev) => {
-              const id = (prev[prev.length - 1]?.id ?? 0) + 1;
-              return [...prev, { id, name: `Item ${id}` }];
-            });
-          }}
-          style={{ position: "absolute", right: 16, bottom: 16 }}
-        />
-      </SafeAreaView>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="TodayScreen">
+          <Stack.Screen name="HistoryScreen" component={HistoryScreen} />
+          <Stack.Screen name="ItemScreen" component={ItemScreen} />
+          <Stack.Screen name="ListScreen" component={ListScreen} />
+          <Stack.Screen name="TodayScreen" component={TodayScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
     </PaperProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignContent: "flex-start",
-    alignItems: "stretch",
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "flex-start",
-    margin: 0,
-    padding: 0,
-    width: "100%",
-  },
-});
diff --git a/android/components/HistoryScreen.tsx b/android/components/HistoryScreen.tsx
@@ -0,0 +1,42 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "react-native-paper";
+
+export function HistoryScreen(): JSX.Element {
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <Text>History Screen</Text>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.replace("TodayScreen"))}
+      >
+        Today
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.push("ListScreen"))}
+      >
+        2023-09-06
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.push("ListScreen"))}
+      >
+        2023-09-05
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: "flex-start",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "flex-start",
+    margin: 0,
+    padding: 0,
+    width: "100%",
+  },
+});
diff --git a/android/components/ItemScreen.tsx b/android/components/ItemScreen.tsx
@@ -0,0 +1,35 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "react-native-paper";
+
+export function ItemScreen(): JSX.Element {
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <Text>Item Screen</Text>
+      <Button onPress={() => navigation.dispatch(StackActions.pop())}>
+        Back
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.push("ListScreen"))}
+      >
+        2023-09-06
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: "flex-start",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "flex-start",
+    margin: 0,
+    padding: 0,
+    width: "100%",
+  },
+});
diff --git a/android/components/ListScreen.tsx b/android/components/ListScreen.tsx
@@ -0,0 +1,40 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Button } from "react-native-paper";
+
+export function ListScreen(): JSX.Element {
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <Text>List Screen</Text>
+      <Button onPress={() => navigation.dispatch(StackActions.pop())}>
+        Back
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.push("ItemScreen"))}
+      >
+        Item 1
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.push("ItemScreen"))}
+      >
+        Item 2
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: "flex-start",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "flex-start",
+    margin: 0,
+    padding: 0,
+    width: "100%",
+  },
+});
diff --git a/android/components/TodayScreen.tsx b/android/components/TodayScreen.tsx
@@ -0,0 +1,74 @@
+import { StackActions, useNavigation } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import React, { useState } from "react";
+import { FlatList, StyleSheet, Text, View } from "react-native";
+import { Button, Checkbox, FAB, List } from "react-native-paper";
+
+export function TodayScreen(): JSX.Element {
+  const [items, setItems] = useState<{ id: number; name: string }[]>([]);
+  const [checked, setChecked] = useState<Record<number, boolean>>({});
+  const navigation = useNavigation();
+  return (
+    <View style={styles.container}>
+      <StatusBar style="auto" />
+      <Text>Today Screen</Text>
+      <Button
+        onPress={() =>
+          navigation.dispatch(StackActions.replace("HistoryScreen"))
+        }
+      >
+        History
+      </Button>
+      <Button
+        onPress={() => navigation.dispatch(StackActions.replace("ItemScreen"))}
+      >
+        Item
+      </Button>
+      <FlatList
+        data={items}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={({ item }) => (
+          <List.Item
+            left={(props) => (
+              <Checkbox
+                onPress={() =>
+                  setChecked((prev) => ({
+                    ...prev,
+                    [item.id]: !prev[item.id],
+                  }))
+                }
+                status={checked[item.id] ? "checked" : "unchecked"}
+                {...props}
+              />
+            )}
+            title={item.name}
+          />
+        )}
+      />
+      <FAB
+        icon="plus"
+        onPress={() => {
+          setItems((prev) => {
+            const id = (prev[prev.length - 1]?.id ?? 0) + 1;
+            return [...prev, { id, name: `Item ${id}` }];
+          });
+        }}
+        style={{ position: "absolute", right: 16, bottom: 16 }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: "flex-start",
+    alignItems: "stretch",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "flex-start",
+    margin: 0,
+    padding: 0,
+    width: "100%",
+  },
+});