Adding Playground

.vs/VSWorkspaceState.json

@@ -1,11 +1,9 @@
 {
   "ExpandedNodes": [
     "",
-    "\\assets",
     "\\components",
-    "\\data",
     "\\pages"
   ],
-  "SelectedNode": "\\components\\KanjiCard.tsx",
+  "SelectedNode": "\\pages\\Playground.tsx",
   "PreviewInSolutionExplorer": false
 }

App.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 
 import { StatusBar } from 'expo-status-bar';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import { Keyboard, SafeAreaView, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 
 import Header from './components/Header';
 import TabBar from './components/TabBar';
 
 export default function App() {
 
-  return (
+    return (
-    <SafeAreaView style={styles.container}>
+    <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
-        <Header/>
+        <SafeAreaView style={styles.container}>
-        <TabBar/>
+            <Header/>
-        <StatusBar style="auto" />
+            <TabBar/>
-    </SafeAreaView>
+            <StatusBar style="auto" />
+        </SafeAreaView>
+    </TouchableWithoutFeedback >
+
   );
 }
 
@@ -29,7 +32,6 @@ const tabOptions = {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: 'white',
+        backgroundColor: '#FF5C5C',
-
   },
 });

components/DrawingCanva.tsx

@@ -1,8 +1,8 @@
-import React, { useRef }  from 'react';
+import React, {useRef, useState }  from 'react';
 import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
 import { StyleSheet, Button, View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
-
+import Slider  from '@react-native-community/slider'
 
 type DrawingCanvaProps = {
     backgroundImage: string;
@@ -11,23 +11,30 @@ type DrawingCanvaProps = {
 const DrawingCanva = (props: DrawingCanvaProps) => {
 
     const canvasRef = useRef<SketchCanvasRef>(null);
-
+    const [strokeWidth, setStroke] = useState(5);
-
 
     return (
         <View style={styles.container}>
-            <SvgUri width="250"
+            <SvgUri
+                width="75%"
+                height="75%"
                 uri={props.backgroundImage}
                 style={styles.back}
                 opacity={0.1}
                 />
-        <SketchCanvas
+            <SketchCanvas
                 ref={canvasRef}
                 strokeColor={'black'}
-                strokeWidth={4}
+                strokeWidth={strokeWidth}
                 containerStyle={styles.canvas}
             />
-
+            <Slider
+                style={styles.slider}
+                onValueChange={(val) => setStroke(val)}
+                minimumValue={5}
+                maximumValue={10}
+                minimumTrackTintColor={"#FF5C5C"}
+            />
             <View style={styles.menu}>
                 <Button color="#FF5C5C" onPress={canvasRef.current?.reset} title="Reset" />
                 <Button color="#FF5C5C" onPress={canvasRef.current?.undo} title="Undo" />
@@ -39,22 +46,28 @@ const DrawingCanva = (props: DrawingCanvaProps) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        height: "100%",
         width: "100%",
-        alignItems: "center"
     },
     back: {
+        alignSelf: "center",
+        width: "75%",
+        height: "75%",
         position: "absolute"
     },
     canvas: {
-        height: 250,
+        alignSelf: "center",
-        width: 250,
+        height: "75%",
+        width: "75%",
         borderWidth: 2,
         borderColor: "black"
     },
     menu: {
         flexDirection: "row",
         justifyContent: "space-evenly",
+    },
+    slider: {
+        width: "75%",
+        alignSelf: "center",
     }
 });
 

components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
 

components/KanjiAnswerField.tsx

@@ -22,6 +22,7 @@ const KanjiAnswerField = () => {
                 value={answer}
                 onFocus={startAnimation}
                 onBlur={stopAnimation}
+                placeholder="Answer here"
             />
         </Animated.View>
     );
@@ -34,7 +35,8 @@ const answerFieldStyle = StyleSheet.create({
         borderWidth: 1,
         padding: 10,
         width: 200,
-        backgroundColor: "white"
+        backgroundColor: "white",
+        borderRadius:20
     },
 })
 

components/KanjiCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, TouchableWithoutFeedback, View, Button, Keyboard } from 'react-native';
+import { StyleSheet, Text, View, Button } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import KanjiAnswerField from './KanjiAnswerField';
 
@@ -36,7 +36,6 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
     return (
-        <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }} accessible={false}>
             <View style={kanjiCardStyle.container}>
 
                 <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.onyomi.katakana}</Text>}</Text>
@@ -48,7 +47,6 @@ const KanjiCard = (props: KanjiProps) => {
                 <KanjiAnswerField/>
                 <Button title="OK" color="#FF5C5C" />
             </View>
-        </TouchableWithoutFeedback >
     );
 };
 
@@ -59,15 +57,7 @@ const kanjiCardStyle = StyleSheet.create({
         alignItems: 'center',
         width: "100%",
         height: "100%"
-    },
+    }
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        width: 200,
-        backgroundColor: "white"
-    },
 })
 
 export default KanjiCard;

components/KanjiList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Text, SectionList, View, StyleSheet } from 'react-native';
 
 
@@ -17,7 +17,7 @@ const KanjiList = () => {
                 }
             ]}
                 renderItem={
-                    ({item}) => <Text style={kanjiListStyle.item}>{item}</Text>
+                    ({ item }) => <Text style={kanjiListStyle.item}>{item}</Text>
                 }
                 renderSectionHeader={({ section }) => (
                     <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>

components/KanjiPlaygroundList.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FlatList, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native';
+
+
+interface kanjiPlaygroundListProps {
+    data: string[]
+}
+
+const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
+
+    return (
+        <View style={kanjiPlaygroundList.container}>
+            <TextInput style={kanjiPlaygroundList.input}
+                placeholder="Search kanji here"></TextInput>
+            <FlatList 
+                numColumns={4}
+                data={props.data}
+                renderItem={
+                    ({ item }) => (
+                        <View style={kanjiPlaygroundList.entry}  onStartShouldSetResponder={() => true}>
+                            <Text style={kanjiPlaygroundList.entryText}>{item}</Text>
+                        </View>
+                    )
+                }
+                keyExtractor={item => `basicListEntry-${item}`}>
+            </FlatList>
+        </View>
+    );
+};
+
+const kanjiPlaygroundList = StyleSheet.create({
+    container: {
+        width: '70%',
+        height: '30%',
+        margin: 5,
+    },
+    entry: {
+        padding: 5,
+        margin: 1,
+        justifyContent: 'center',
+        flex: 1,
+        backgroundColor: '#e6e6e6',
+    },
+    entryText: {
+        fontWeight: "bold",
+        fontSize: 30,
+        textAlign: "center",
+    },
+    input: {
+        height: "20%",
+        margin: 12,
+        borderWidth: 1,
+        padding: 10,
+        width: "75%",
+        backgroundColor: "white",
+        borderRadius: 20,
+        alignSelf: "center"
+    },
+})
+
+export default KanjiPlaygroundList;

components/TabBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StyleSheet, TouchableNativeFeedback, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, TouchableNativeFeedback, View } from 'react-native'
 import { NavigationContainer } from '@react-navigation/native';
 import { BottomTabBarButtonProps, BottomTabNavigationOptions, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@benjeau/react-native-draw": "^0.8.3",
+        "@react-native-community/slider": "4.2.4",
         "@react-navigation/bottom-tabs": "^6.5.4",
         "@react-navigation/native": "^6.1.3",
         "@shopify/react-native-skia": "0.1.157",
@@ -4535,6 +4536,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/@react-native-community/slider": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.2.4.tgz",
+      "integrity": "sha512-uY51UoipQW4ELnFWMU6rTHRc4EUYaW+Z1O9Teijej6NYVYdUcUKq+t7WeBGjMAEc1ipyooMeBqRXToWO5zAU2Q==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
@@ -16467,6 +16477,12 @@
         "joi": "^17.2.1"
       }
     },
+    "@react-native-community/slider": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.2.4.tgz",
+      "integrity": "sha512-uY51UoipQW4ELnFWMU6rTHRc4EUYaW+Z1O9Teijej6NYVYdUcUKq+t7WeBGjMAEc1ipyooMeBqRXToWO5zAU2Q==",
+      "requires": {}
+    },
     "@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@benjeau/react-native-draw": "^0.8.3",
+    "@react-native-community/slider": "4.2.4",
     "@react-navigation/bottom-tabs": "^6.5.4",
     "@react-navigation/native": "^6.1.3",
     "@shopify/react-native-skia": "0.1.157",

pages/Learn.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import KanjiCard from '../components/KanjiCard';
 
 

pages/List.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React  from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import KanjiList from '../components/KanjiList';
 
 

pages/Playground.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import DrawingCanva from '../components/DrawingCanva';
-import KanjiCard from '../components/KanjiCard';
+import KanjiPlaygroundList from '../components/KanjiPlaygroundList';
 
 
 const Playground = () => {
 
     return (
         <View style={playgroundStyle.container}>
+            <KanjiPlaygroundList data={["親", "雨", "序", "余", "貴", "郷", "a", "b", "c", "d", "e", "f", "g"]}/>
             <DrawingCanva backgroundImage="https://media.kanjialive.com/kanji_strokes/otozu(reru)_11.svg"/>
         </View>
     );

yarn.lock

@@ -1720,6 +1720,11 @@
     "prompts" "^2.4.0"
     "semver" "^6.3.0"
 
+"@react-native-community/slider@4.2.4":
+  "integrity" "sha512-uY51UoipQW4ELnFWMU6rTHRc4EUYaW+Z1O9Teijej6NYVYdUcUKq+t7WeBGjMAEc1ipyooMeBqRXToWO5zAU2Q=="
+  "resolved" "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.2.4.tgz"
+  "version" "4.2.4"
+
 "@react-native/assets@1.0.0":
   "integrity" "sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ=="
   "resolved" "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz"