diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json index 62a1b2b..09e5c40 100644 --- a/.vs/VSWorkspaceState.json +++ b/.vs/VSWorkspaceState.json @@ -1,10 +1,11 @@ { "ExpandedNodes": [ "", + "\\assets", "\\components", "\\data", "\\pages" ], - "SelectedNode": "\\App.tsx", + "SelectedNode": "\\pages\\Playground.tsx", "PreviewInSolutionExplorer": false } \ No newline at end of file diff --git a/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx b/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx new file mode 100644 index 0000000..e202305 Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/1f524106-5e23-4fac-8bbf-0c15e7476c35.vsidx differ diff --git a/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx b/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx new file mode 100644 index 0000000..e0ab7ea Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/214d182e-dac1-487e-bd68-1cc9400bd316.vsidx differ diff --git a/.vs/iut-expo-starter/FileContentIndex/26d945f0-99e6-4d92-b595-e4412607565d.vsidx b/.vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx similarity index 56% rename from .vs/iut-expo-starter/FileContentIndex/26d945f0-99e6-4d92-b595-e4412607565d.vsidx rename to .vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx index df435ac..1ab7dc9 100644 Binary files a/.vs/iut-expo-starter/FileContentIndex/26d945f0-99e6-4d92-b595-e4412607565d.vsidx and b/.vs/iut-expo-starter/FileContentIndex/8f4a65f3-5489-4d1b-88c1-c7835e2024fb.vsidx differ diff --git a/.vs/iut-expo-starter/FileContentIndex/b5a12f78-2ac1-4722-a0f2-4e8131021571.vsidx b/.vs/iut-expo-starter/FileContentIndex/b5a12f78-2ac1-4722-a0f2-4e8131021571.vsidx deleted file mode 100644 index 282bdaa..0000000 Binary files a/.vs/iut-expo-starter/FileContentIndex/b5a12f78-2ac1-4722-a0f2-4e8131021571.vsidx and /dev/null differ diff --git a/.vs/iut-expo-starter/FileContentIndex/cfa46db6-345d-4cc1-8f3d-8f6e6f82348c.vsidx b/.vs/iut-expo-starter/FileContentIndex/cfa46db6-345d-4cc1-8f3d-8f6e6f82348c.vsidx deleted file mode 100644 index 65cd012..0000000 Binary files a/.vs/iut-expo-starter/FileContentIndex/cfa46db6-345d-4cc1-8f3d-8f6e6f82348c.vsidx and /dev/null differ diff --git a/.vs/iut-expo-starter/FileContentIndex/f0cdffd1-f5f9-4b04-b7f7-331357317bb6.vsidx b/.vs/iut-expo-starter/FileContentIndex/f0cdffd1-f5f9-4b04-b7f7-331357317bb6.vsidx deleted file mode 100644 index e98a13b..0000000 Binary files a/.vs/iut-expo-starter/FileContentIndex/f0cdffd1-f5f9-4b04-b7f7-331357317bb6.vsidx and /dev/null differ diff --git a/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx b/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx new file mode 100644 index 0000000..463ed84 Binary files /dev/null and b/.vs/iut-expo-starter/FileContentIndex/fc1252a8-cd5b-4d59-ae09-a21d47acf89f.vsidx differ diff --git a/.vs/iut-expo-starter/v17/.wsuo b/.vs/iut-expo-starter/v17/.wsuo index 0e4a01c..b9f838f 100644 Binary files a/.vs/iut-expo-starter/v17/.wsuo and b/.vs/iut-expo-starter/v17/.wsuo differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index 0e33c67..42dbaa6 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/App.tsx b/App.tsx index f3019b5..4a1af86 100644 --- a/App.tsx +++ b/App.tsx @@ -1,39 +1,35 @@ import React from 'react'; import { StatusBar } from 'expo-status-bar'; -import { SafeAreaView, StyleSheet, Text, View } from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; - -import Learn from './pages/Learn'; -import List from './pages/List'; -import Playground from './pages/Playground'; +import { SafeAreaView, StyleSheet } from 'react-native'; import Header from './components/Header'; +import TabBar from './components/TabBar'; export default function App() { - const Tab = createBottomTabNavigator(); - return (
- - - - - - - - + + ); } +const tabOptions = { + tabBarShowLabel: false, + tabBarStyle: { + backgroundColor: "#FF5C5C" + }, + tabBarActiveTintColor: "white", + tabBarInactiveTintColor: "black" +}; + const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#fff', + backgroundColor: 'white', }, }); diff --git a/components/Icon.tsx b/components/Icon.tsx new file mode 100644 index 0000000..6cdca9c --- /dev/null +++ b/components/Icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Svg } from 'react-native-svg'; + +type IconProps = { + path: string; + size: number; +} + +const Icon = (props: IconProps) => { + + return ( + + ); +}; + +export default Icon; \ No newline at end of file diff --git a/components/KanjiCard.tsx b/components/KanjiCard.tsx index c51df79..732be95 100644 --- a/components/KanjiCard.tsx +++ b/components/KanjiCard.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { StyleSheet, Text, View, } from 'react-native'; +import { StyleSheet, Text, TextInput, View, Button } from 'react-native'; import { SvgUri } from 'react-native-svg'; import { Kanji } from '../data/stub'; @@ -19,6 +19,9 @@ const KanjiCard = (props: KanjiProps) => { const [loading, setLoading] = useState(true); const [res, setData] = useState(null); + const [answer, onChangeText] = React.useState(); + + const fetchData = async () => { await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${props.kanji}`, options) .then(async response => { @@ -36,14 +39,20 @@ const KanjiCard = (props: KanjiProps) => { return ( - - {loading ? Loading... : {res.kanji.onyomi.katakana}} - {!loading && ()} - - - + {loading ? Loading... : {res.kanji.onyomi.katakana}} + {!loading && ()} + {loading ? Loading... : {res.kanji.meaning.english}} + + + ); }; @@ -53,7 +62,14 @@ const kanjiCardStyle = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - } + }, + input: { + height: 40, + margin: 12, + borderWidth: 1, + padding: 10, + width: 200 + }, }) export default KanjiCard; \ No newline at end of file diff --git a/components/TabBar.tsx b/components/TabBar.tsx new file mode 100644 index 0000000..e66ff1a --- /dev/null +++ b/components/TabBar.tsx @@ -0,0 +1,100 @@ +import React from 'react'; + +import { StyleSheet, TouchableNativeFeedback, TouchableOpacity, View } from 'react-native' +import { NavigationContainer } from '@react-navigation/native'; +import { BottomTabBarButtonProps, BottomTabNavigationOptions, createBottomTabNavigator } from '@react-navigation/bottom-tabs'; + +import { List as ListIcon } from "react-native-feather"; +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'; + + +const LearnButton = (props: BottomTabBarButtonProps) => { + + return ( + + + + {props.children} + + + + ) + +} + +const learnButtonStyle = StyleSheet.create({ + button: { + backgroundColor: "#FF5C5C", + width: 80, + height: 80, + borderRadius: 40, + borderColor: "#f5f5f4", + borderWidth: 5 + } +}); + +const TabBar = () => { + + const Tab = createBottomTabNavigator(); + + return ( + + + ( + + ) + }} + name="List" + component={List} + /> + ( + + ), + tabBarButton: (props) => ( + + ) + }} + name="Learn" + component={Learn} /> + ( + + ) + }} + name="Playground" + component={Playground} /> + + + ); +} + +const tabOptions: BottomTabNavigationOptions = { + tabBarShowLabel: false, + headerShown: false, + tabBarStyle: { + backgroundColor: "#FF5C5C" + }, + tabBarActiveTintColor: "white", + tabBarInactiveTintColor: "black", +}; + +export default TabBar; diff --git a/package-lock.json b/package-lock.json index 73de152..d7e4720 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", + "react-native-feather": "^1.1.2", "react-native-svg": "13.4.0", "react-native-web": "~0.18.9" }, @@ -10657,6 +10658,15 @@ "nullthrows": "^1.1.1" } }, + "node_modules/react-native-feather": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/react-native-feather/-/react-native-feather-1.1.2.tgz", + "integrity": "sha512-qBc0+XegKkX4JV6ykgScasguEV3RdlbYp9IrCMnbozngOgJ7vi76pyRpb+dnZ1AZVkYsbYnpdA9JXeP7EJbMCA==", + "peerDependencies": { + "react-native": ">=0.46", + "react-native-svg": ">=5.3" + } + }, "node_modules/react-native-gradle-plugin": { "version": "0.70.3", "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz", @@ -20873,6 +20883,12 @@ "nullthrows": "^1.1.1" } }, + "react-native-feather": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/react-native-feather/-/react-native-feather-1.1.2.tgz", + "integrity": "sha512-qBc0+XegKkX4JV6ykgScasguEV3RdlbYp9IrCMnbozngOgJ7vi76pyRpb+dnZ1AZVkYsbYnpdA9JXeP7EJbMCA==", + "requires": {} + }, "react-native-gradle-plugin": { "version": "0.70.3", "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz", diff --git a/package.json b/package.json index 39ce631..0ce1fe9 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", + "react-native-feather": "^1.1.2", "react-native-svg": "13.4.0", "react-native-web": "~0.18.9" }, diff --git a/pages/Learn.tsx b/pages/Learn.tsx index cbcb0de..c59fc03 100644 --- a/pages/Learn.tsx +++ b/pages/Learn.tsx @@ -16,7 +16,8 @@ const learnStyle = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + backgroundColor: "#f5f5f4" } }) diff --git a/pages/List.tsx b/pages/List.tsx index e9796dd..e7d7b15 100644 --- a/pages/List.tsx +++ b/pages/List.tsx @@ -16,7 +16,8 @@ const listStyle = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + backgroundColor: "#f5f5f4" } }) diff --git a/pages/Playground.tsx b/pages/Playground.tsx index dfc1198..ede3bb7 100644 --- a/pages/Playground.tsx +++ b/pages/Playground.tsx @@ -16,7 +16,9 @@ const playgroundStyle = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + backgroundColor: "#f5f5f4" + } }) diff --git a/yarn.lock b/yarn.lock index cbe51d8..99f9723 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5537,6 +5537,11 @@ "jscodeshift" "^0.13.1" "nullthrows" "^1.1.1" +"react-native-feather@^1.1.2": + "integrity" "sha512-qBc0+XegKkX4JV6ykgScasguEV3RdlbYp9IrCMnbozngOgJ7vi76pyRpb+dnZ1AZVkYsbYnpdA9JXeP7EJbMCA==" + "resolved" "https://registry.npmjs.org/react-native-feather/-/react-native-feather-1.1.2.tgz" + "version" "1.1.2" + "react-native-gradle-plugin@^0.70.3": "integrity" "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==" "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz" @@ -5555,7 +5560,7 @@ "react-freeze" "^1.0.0" "warn-once" "^0.1.0" -"react-native-svg@13.4.0": +"react-native-svg@>=5.3", "react-native-svg@13.4.0": "integrity" "sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==" "resolved" "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz" "version" "13.4.0" @@ -5576,7 +5581,7 @@ "postcss-value-parser" "^4.2.0" "styleq" "^0.1.2" -"react-native@*", "react-native@0.70.5": +"react-native@*", "react-native@>=0.46", "react-native@0.70.5": "integrity" "sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw==" "resolved" "https://registry.npmjs.org/react-native/-/react-native-0.70.5.tgz" "version" "0.70.5"