add tab bar style

.vs/VSWorkspaceState.json

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

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 { SafeAreaView, StyleSheet } 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 Header from './components/Header';
+import TabBar from './components/TabBar';
 
 export default function App() {
 
-  const Tab = createBottomTabNavigator();
-
   return (
     <SafeAreaView style={styles.container}>
         <Header/>
+        <TabBar/>
         <StatusBar style="auto" />
-          <NavigationContainer >
-              <Tab.Navigator>
-                  <Tab.Screen name="List" component={List} />
-                  <Tab.Screen name="Learn" component={Learn} />
-                  <Tab.Screen name="Playground" component={Playground} />
-              </Tab.Navigator>
-          </NavigationContainer>
     </SafeAreaView>
   );
 }
 
+const tabOptions = {
+    tabBarShowLabel: false,
+    tabBarStyle: {
+        backgroundColor: "#FF5C5C"
+    },
+    tabBarActiveTintColor: "white",
+    tabBarInactiveTintColor: "black"
+};
+
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#fff',
+        backgroundColor: 'white',
 
   },
 });

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;

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 => {
@@ -35,15 +38,21 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
     return (
-        <View style={kanjiCardStyle.container}>
         <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}
+
             />)}
-            </View>
+            <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.meaning.english}</Text>}</Text>
-            <View>
+            <TextInput
-            </View>
+                style={kanjiCardStyle.input}
+                onChange={onChangeText}
+                value={answer}
+            > </TextInput>
+
+            <Button title="OK" color="#FF5C5C"></Button>
         </View>
     );
 };
@@ -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;

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 (
+        <View
+        style={{
+            top: -30,
+            justifyContent: 'center',
+            alignItems: 'center',
+        }}>
+            <TouchableNativeFeedback onPress={props.onPress}>
+                <View
+                    style={learnButtonStyle.button}>
+                    {props.children}
+                </View>
+            </TouchableNativeFeedback>
+        </View>
+    )
+
+}
+
+const learnButtonStyle = StyleSheet.create({
+    button: {
+        backgroundColor: "#FF5C5C",
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        borderColor: "#f5f5f4",
+        borderWidth: 5
+    }
+});
+
+const TabBar  = () => {
+
+    const Tab = createBottomTabNavigator();
+
+    return (
+            <NavigationContainer >
+                <Tab.Navigator
+                    screenOptions={tabOptions}
+
+                >
+                    <Tab.Screen
+                        options={{
+                            tabBarIcon: ({ color }) => (
+                                <ListIcon color={color} />
+                            )
+                        }}
+                        name="List"
+                        component={List}
+                    />
+                <Tab.Screen
+                    options={{
+                        tabBarIcon: ({ color }) => (
+                            <LearnIcon color={color} width={32} height={32} />
+                        ),
+                        tabBarButton: (props) => (
+                            <LearnButton { ... props}/>
+                        )
+                        }}
+                        name="Learn"
+                        component={Learn} />
+                    <Tab.Screen
+                        options={{
+                            tabBarIcon: ({ color }) => (
+                                <PlaygroundIcon color={color} />
+                            )
+                        }}
+                        name="Playground"
+                        component={Playground} />
+                </Tab.Navigator>
+            </NavigationContainer>
+    );
+}
+
+const tabOptions: BottomTabNavigationOptions = {
+    tabBarShowLabel: false,
+    headerShown: false,
+    tabBarStyle: {
+        backgroundColor: "#FF5C5C"
+    },
+    tabBarActiveTintColor: "white",
+    tabBarInactiveTintColor: "black",
+};
+
+export default TabBar;

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",

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"
   },

pages/Learn.tsx

@@ -16,7 +16,8 @@ const learnStyle = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        backgroundColor: "#f5f5f4"
     }
 })
 

pages/List.tsx

@@ -16,7 +16,8 @@ const listStyle = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        backgroundColor: "#f5f5f4"
     }
 })
 

pages/Playground.tsx

@@ -16,7 +16,9 @@ const playgroundStyle = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        backgroundColor: "#f5f5f4"
+
     }
 })
 

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"