Add Answer Input component and animation

.vs/VSWorkspaceState.json

@@ -6,6 +6,6 @@
     "\\data",
     "\\pages"
   ],
-  "SelectedNode": "\\pages\\Playground.tsx",
+  "SelectedNode": "\\components\\KanjiCard.tsx",
   "PreviewInSolutionExplorer": false
 }

assets/answerAnimation.tsx

@@ -0,0 +1,31 @@
+import { Dimensions, Animated } from 'react-native';
+
+export const animation = new Animated.Value(0);
+
+
+export const startAnimation = () => {
+    Animated.timing(animation, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+    }).start();
+};
+
+export const stopAnimation = () => {
+    Animated.timing(animation, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true,
+    }).start();
+};
+
+export const animatedStyles = {
+    transform: [
+        {
+            translateY: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, -Dimensions.get('window').height / 1.9]
+            }),
+        },
+    ],
+};

components/KanjiAnswerField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Animated, StyleSheet, TextInput } from 'react-native';
+import { startAnimation, stopAnimation, animatedStyles } from '../assets/answerAnimation'
+
+const KanjiAnswerField = () => {
+
+    const options = {
+        method: 'GET',
+        headers: {
+            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
+            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
+        }
+    }
+
+    const [answer, onChangeText] = React.useState("");
+
+    return (
+        <Animated.View style={[animatedStyles]}>
+            <TextInput
+                style={answerFieldStyle.input}
+                onChangeText={onChangeText}
+                value={answer}
+                onFocus={startAnimation}
+                onBlur={stopAnimation}
+            />
+        </Animated.View>
+    );
+};
+
+const answerFieldStyle = StyleSheet.create({
+    input: {
+        height: 40,
+        margin: 12,
+        borderWidth: 1,
+        padding: 10,
+        width: 200,
+        backgroundColor: "white"
+    },
+})
+
+export default KanjiAnswerField;

components/KanjiCard.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, TextInput, View, Button } from 'react-native';
+import { StyleSheet, Text, TouchableWithoutFeedback, View, Button, Keyboard } from 'react-native';
 import { SvgUri } from 'react-native-svg';
-import { Kanji } from '../data/stub';
+import KanjiAnswerField from './KanjiAnswerField';
 
 type KanjiProps = {
     kanji: string;
@@ -19,8 +19,6 @@ 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)
@@ -38,22 +36,19 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
     return (
-        <View style={kanjiCardStyle.container}>
-            <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.onyomi.katakana}</Text>}</Text>
-            {!loading && (<SvgUri
-                width="200"
-                uri={res.kanji.video.poster}
-
-            />)}
-            <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.meaning.english}</Text>}</Text>
-            <TextInput
-                style={kanjiCardStyle.input}
-                onChange={onChangeText}
-                value={answer}
-            > </TextInput>
+        <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }} accessible={false}>
+            <View style={kanjiCardStyle.container}>
 
-            <Button title="OK" color="#FF5C5C"></Button>
-        </View>
+                <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.onyomi.katakana}</Text>}</Text>
+                {!loading && (<SvgUri
+                    width="200"
+                    uri={res.kanji.video.poster}
+                />)}
+                <Text> {loading ? <Text/> : <Text>{res.kanji.meaning.english}</Text>}</Text>
+                <KanjiAnswerField/>
+                <Button title="OK" color="#FF5C5C" />
+            </View>
+        </TouchableWithoutFeedback >
     );
 };
 
@@ -62,13 +57,16 @@ const kanjiCardStyle = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
+        width: "100%",
+        height: "100%"
     },
     input: {
         height: 40,
         margin: 12,
         borderWidth: 1,
         padding: 10,
-        width: 200
+        width: 200,
+        backgroundColor: "white"
     },
 })
 

components/KanjiList.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { Text, SectionList, View, StyleSheet } from 'react-native';
+
+
+const KanjiList = () => {
+
+    return (
+        <View style={kanjiListStyle.container}>
+            <SectionList sections={[
+                {
+                    title: "N5",
+                    data: ["aa", "aaa"]
+                },
+                {
+                    title: "N4",
+                    data: ["b", "bbb"]
+                }
+            ]}
+                renderItem={
+                    ({item}) => <Text style={kanjiListStyle.item}>{item}</Text>
+                }
+                renderSectionHeader={({ section }) => (
+                    <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
+                )}
+                keyExtractor={item => `basicListEntry-${item}`}
+            >
+            </SectionList>
+        </View>
+    );
+};
+
+const kanjiListStyle = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        padding: 10
+    },
+    sectionHeader: {
+        paddingTop: 2,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 2,
+        fontSize: 14,
+        fontWeight: 'bold',
+        backgroundColor: '#e6e6e6',
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+    },
+})
+
+export default KanjiList;

components/TabBar.tsx

@@ -44,15 +44,14 @@ const learnButtonStyle = StyleSheet.create({
     }
 });
 
-const TabBar  = () => {
+const TabBar = () => {
 
     const Tab = createBottomTabNavigator();
-
     return (
             <NavigationContainer >
                 <Tab.Navigator
-                    screenOptions={tabOptions}
-
+                screenOptions={tabOptions}
+                initialRouteName="Learn"
                 >
                     <Tab.Screen
                         options={{

pages/List.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
-import KanjiCard from '../components/KanjiCard';
+import KanjiList from '../components/KanjiList';
 
 
 const List = () => {
 
     return (
         <View style={listStyle.container}>
-            <Text>Some list</Text>
+            <KanjiList/>
         </View>
     );
 };