Adding stack navigation for kanji details

.vs/VSWorkspaceState.json

@@ -1,14 +1,7 @@
 {
   "ExpandedNodes": [
-    "",
+    ""
-    "\\components",
-    "\\model",
-    "\\navigation",
-    "\\pages",
-    "\\redux",
-    "\\redux\\actions",
-    "\\redux\\reducers"
   ],
-  "SelectedNode": "\\navigation\\TabBar.tsx",
+  "SelectedNode": "\\C:\\Users\\Siph9\\Source\\Repos\\LEARNIHON",
   "PreviewInSolutionExplorer": false
 }

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "expo-init",
+    "name": "Learnihon",
-    "slug": "expo-init",
+    "slug": "Learnihon",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./src/assets/icon.png",

assets/answerAnimation.ts

@@ -2,7 +2,6 @@ import { Dimensions, Animated } from 'react-native';
 
 export const animation = new Animated.Value(0);
 
-
 export const startAnimation = () => {
     Animated.timing(animation, {
         toValue: 1,

components/KanjiListCell.tsx

@@ -1,3 +1,4 @@
+import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { Text, View, StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
 import { Kanji } from '../model/kanji';
@@ -10,9 +11,10 @@ const KanjiListCell = (props: kanjiListCellProps) => {
 
     const cellStyle = useColorScheme() == 'light' ? cellStyle_light : cellStyle_dark;
 
+    const navigator = useNavigation();
 
     return (
-        <TouchableOpacity onPress={() => console.log(props.kanji)} style={cellStyle.item}>
+        <TouchableOpacity onPress={() => navigator.push("Detail", {"kanji": props.kanji})} style={cellStyle.item}>
             <Text style={cellStyle.kanji}>{props.kanji.character}</Text>
             <Text style={cellStyle.text}>{props.kanji.meaning}</Text>
         </TouchableOpacity>

navigation/Stack.tsx

@@ -0,0 +1,25 @@
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
+import React from "react";
+import Detail from "../pages/Detail";
+import List from "../pages/List";
+
+export default function KanjiStackNavigator() {
+
+    const Stack = createStackNavigator();
+
+    return (
+        <Stack.Navigator initialRouteName="List"
+            screenOptions={stackOptions}
+        >
+            <Stack.Screen name="List" component={List} />
+            <Stack.Screen name="Detail" component={Detail}/>
+        </Stack.Navigator>
+    )
+}
+
+
+const stackOptions: StackNavigationOptions = {
+    headerShown: false, 
+    presentation: "modal"
+};

navigation/TabBar.tsx

@@ -9,8 +9,8 @@ import { Edit2 as PlaygroundIcon } from "react-native-feather";
 import { BookOpen as LearnIcon } from "react-native-feather";
 
 import Learn from '../pages/Learn';
-import List from '../pages/List';
 import Playground from '../pages/Playground';
+import KanjiStackNavigator from './Stack';
 
 
 
@@ -81,6 +81,7 @@ const TabBar = () => {
                 <Tab.Navigator
                 screenOptions={tabOptions}
                 initialRouteName="Learn"
+                
                 >
                     <Tab.Screen
                         options={{
@@ -89,7 +90,7 @@ const TabBar = () => {
                             )
                         }}
                         name="List"
-                        component={List}
+                    component={KanjiStackNavigator}
                     />
                 <Tab.Screen
                     options={{

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "expo-init",
+  "name": "Learnihon",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -13,10 +13,12 @@
     "@react-native-community/slider": "4.2.4",
     "@react-navigation/bottom-tabs": "^6.5.4",
     "@react-navigation/native": "^6.1.3",
+    "@react-navigation/stack": "^6.3.12",
     "@reduxjs/toolkit": "^1.9.2",
     "@shopify/react-native-skia": "0.1.157",
     "expo": "~47.0.12",
     "expo-2d-context": "^0.0.3",
+    "expo-cli": "^6.3.0",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",

pages/Detail.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text, View, StyleSheet, useColorScheme } from 'react-native';
+import KanjiListCell from '../components/KanjiListCell';
+import { Kanji } from '../model/kanji';
+
+
+const Detail = ({route}) => {
+    const kanji = route.params.kanji;
+    const detailStyle = useColorScheme() == 'light' ? detailStyle_light : detailStyle_dark;
+
+
+    return (
+        <View style={detailStyle.container}>
+            <KanjiListCell kanji={kanji}/>
+        </View>
+    );
+};
+
+
+const detailStyle_light = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: "#e4e4e4"
+    }
+})
+
+
+const detailStyle_dark = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#3c3c3c',
+    },
+});
+
+export default Detail;

pages/List.tsx

@@ -1,6 +1,7 @@
-import React  from 'react';
+import React  from 'react';
 import { View, StyleSheet, useColorScheme } from 'react-native';
 import KanjiList from '../components/KanjiList';
+import { Kanji } from '../model/kanji';
 
 
 const List = () => {
@@ -20,7 +21,7 @@ const listStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f5"
+        backgroundColor: "#f5f5f5",
     }
 })