Onboarding, HomeScreen, FlashCard page

babel.config.js

@@ -35,6 +35,7 @@ module.exports = function (api) {
           },
         },
       ],
+      "react-native-reanimated/plugin",
     ],
   }
 }

components/flashcard/FlashcardDetails.js

@@ -0,0 +1,84 @@
+import { StyleSheet, Text, View, TextInput } from "react-native"
+import { useState } from "react"
+import { IntoroButton } from "@components/common"
+const FlashcardDetails = ({ element, page, width }) => {
+  // TODO: add function to save notes dynamically
+  const [note, setNote] = useState("")
+  const [isEdit, setIsEdit] = useState(false)
+  const toggleMode = () => setIsEdit((previousState) => !previousState)
+  if (page === "1") {
+    return (
+      <View
+        style={{
+          width: width - 40,
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 18, fontWeight: "700" }}>
+          {element._character}
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._reading}
+        </Text>
+        <Text style={{ fontSize: 18, fontWeight: "700", marginTop: 10 }}>
+          Pronounciation
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._extraNote}
+        </Text>
+        <Text style={{ fontSize: 18, fontWeight: "700", marginTop: 10 }}>
+          Mnemonic
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: "300" }}>
+          {element._mnemonic}
+        </Text>
+      </View>
+    )
+  } else {
+    return (
+      <View
+        style={{
+          width: width - 40,
+          justifyContent: "flex-start",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20, fontWeight: "300" }}>Notes</Text>
+        <View style={{ height: 200, padding: 20 }}>
+          {isEdit ? (
+            <TextInput
+              autoCorrect={false}
+              style={styles.input}
+              onChangeText={setNote}
+              value={note}
+              multiline
+              numberOfLines={10}
+            />
+          ) : (
+            <Text>{note}</Text>
+          )}
+        </View>
+
+        <IntoroButton
+          text={isEdit ? "Save Note" : "Edit Notes"}
+          onPress={toggleMode}
+          buttonStyle={{ width: "80%" }}
+        ></IntoroButton>
+      </View>
+    )
+  }
+}
+
+export default FlashcardDetails
+
+const styles = StyleSheet.create({
+  input: {
+    fontSize: 16,
+    minWidth: 250,
+    borderWidth: 1,
+    backgroundColor: "white",
+    padding: 10,
+    borderRadius: 10,
+  },
+})

components/flashcard/FlashcardIndicator.js

@@ -0,0 +1,55 @@
+import { Animated, StyleSheet, View, Dimensions } from "react-native"
+const { width } = Dimensions.get("screen")
+
+const FlashcardIndicator = ({ scrollX }) => {
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {Array(2)
+        .fill(true)
+        .map((_, i) => {
+          const inputRange = [(i - 1) * width, i * width, (i + 1) * width]
+          const scale = scrollX.interpolate({
+            inputRange,
+            outputRange: [0.8, 1.4, 0.8],
+            extrapolate: "clamp",
+          })
+          const opacity = scrollX.interpolate({
+            inputRange,
+            outputRange: [0.3, 0.9, 0.3],
+            extrapolate: "clamp",
+          })
+          const backgroundColor = scrollX.interpolate({
+            inputRange,
+            outputRange: ["#333", "rgba(64, 123, 255, 1)", "#333"],
+            extrapolate: "clamp",
+          })
+          return (
+            <Animated.View
+              key={`indicator-${i}`}
+              style={{
+                ...styles.indicator,
+                backgroundColor,
+                opacity,
+                transform: [
+                  {
+                    scale,
+                  },
+                ],
+              }}
+            ></Animated.View>
+          )
+        })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  indicator: {
+    height: 8,
+    width: 8,
+    borderRadius: 5,
+    marginHorizontal: 5,
+  },
+})
+
+export default FlashcardIndicator

components/home/HomeTimetable.js

@@ -0,0 +1,22 @@
+import { StyleSheet, Text, View } from "react-native"
+
+const HomeTimetable = () => {
+  return (
+    <View style={styles.homeTimetableContainer}>
+      <Text>Hi</Text>
+    </View>
+  )
+}
+
+export default HomeTimetable
+
+const styles = StyleSheet.create({
+  homeTimetableContainer: {
+    borderRadius: 30,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#D9D9D9",
+    width: "90%",
+    height: 260,
+  },
+})

components/home/IntoroProgress.js

@@ -0,0 +1,22 @@
+import CircularProgress from "react-native-circular-progress-indicator"
+
+const IntoroProgress = ({ value, text }) => {
+  return (
+    <CircularProgress
+      value={value}
+      radius={75}
+      progressValueColor={"#D4AD65"}
+      inActiveStrokeColor={"#C6daee"}
+      activeStrokeColor={"#6F8FCE"}
+      title={text}
+      titleColor={"#155698"}
+      titleStyle={{ fontWeight: "bold" }}
+      titleFontSize={16}
+      valueSuffix={"%"}
+      progressValueFontSize={45}
+      clockwise={false}
+    />
+  )
+}
+
+export default IntoroProgress

components/home/TierBadge.js

@@ -0,0 +1,56 @@
+import { StyleSheet, Text, View, Image } from "react-native"
+import bronzeLogo from "@assets/icon/bronze.png"
+import silverLogo from "@assets/icon/silver.png"
+import goldLogo from "@assets/icon/gold.png"
+import diamondLogo from "@assets/icon/diamond.png"
+
+const TierBadge = () => {
+  return (
+    <View style={styles.tierContainer}>
+      <View style={styles.tierImageWrapper}>
+        <Image source={bronzeLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>12</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={silverLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>2</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={goldLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>20</Text>
+      </View>
+      <View style={styles.tierImageWrapper}>
+        <Image source={diamondLogo} style={styles.tierImage}></Image>
+        <Text style={styles.tierImageContent}>1</Text>
+      </View>
+    </View>
+  )
+}
+
+export default TierBadge
+
+const styles = StyleSheet.create({
+  tierContainer: {
+    justifyContent: "space-between",
+    flexDirection: "row",
+  },
+  tierImageWrapper: {
+    height: 90,
+    width: 90,
+    overflow: "hidden",
+  },
+  tierImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  tierImageContent: {
+    position: "absolute",
+    color: "#D4AD65",
+    fontSize: 20,
+    fontWeight: "600",
+    textAlign: "center",
+    width: "100%",
+    top: 14,
+  },
+})

components/kanaChart/KanaGrid.js

@@ -3,11 +3,12 @@ import KanaItem from "./KanaItem"
 
 const { width } = Dimensions.get("screen")
 
-export default function KanaGrid({ kana }) {
+export default function KanaGrid({ navigation, kana }) {
+  console.log(kana)
   return (
     <View style={styles.gridContainer}>
       {kana.map((element, index) => (
-        <KanaItem element={element} key={index} />
+        <KanaItem navigation={navigation} element={element} key={index} />
       ))}
     </View>
   )
@@ -18,10 +19,10 @@ const styles = StyleSheet.create({
   gridContainer: {
     marginLeft: -8,
     marginTop: 20,
+    marginBottom: 30,
     flexDirection: "row",
     flexWrap: "wrap",
     width: chartContainerWidth,
-    marginBottom: 30,
     alignItems: "center",
     justifyContent: "center",
   },

components/kanaChart/KanaItem.js

@@ -1,10 +1,16 @@
-import { Dimensions, StyleSheet, View, Text } from "react-native"
+import {
+  Dimensions,
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+} from "react-native"
 import Colors from "@types/colors.js"
 import Types from "@types/types"
 
 const { width } = Dimensions.get("screen")
 
-export default function KanaItem({ element }) {
+export default function KanaItem({ navigation, element }) {
   let boxShadow = generateBoxShadowStyle(
     -2,
     4,
@@ -14,19 +20,28 @@ export default function KanaItem({ element }) {
     4,
     Colors.SHADOW_COLOR_ANDROID
   )
+
+  const handleClick = () => {
+    navigation.navigate("Flashcard", {
+      element: element,
+    })
+  }
+
   return (
-    <View
-      style={{
-        ...styles.item,
-        backgroundColor:
-          element.type === Types.HIRAGANA ? Colors.HIRAGANA : Colors.KATAKANA,
-        opacity: element.unlocked === true ? 1 : 0.4,
-        ...boxShadow,
-      }}
-    >
-      <Text style={styles.character}>{element.character}</Text>
-      <Text style={styles.reading}>{element.reading}</Text>
-    </View>
+    <TouchableOpacity onPress={handleClick}>
+      <View
+        style={{
+          ...styles.item,
+          backgroundColor:
+            element.type === Types.HIRAGANA ? Colors.HIRAGANA : Colors.KATAKANA,
+          opacity: element.unlocked === true ? 1 : 0.4,
+          ...boxShadow,
+        }}
+      >
+        <Text style={styles.character}>{element.character}</Text>
+        <Text style={styles.reading}>{element.reading}</Text>
+      </View>
+    </TouchableOpacity>
   )
 }
 
@@ -39,8 +54,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     marginLeft: 8,
-    marginTop: 8,
-    paddingVertical: 14,
+    marginTop: 10,
     borderRadius: 12,
   },
   character: {

components/kanaChart/KanaLevel.js

@@ -1,13 +1,13 @@
 import { StyleSheet, Text, View } from "react-native"
 import KanaGrid from "./KanaGrid"
 
-export default function KanaLevel({ type, kana, level }) {
+export default function KanaLevel({ navigation, type, kana, level }) {
   return (
     <View>
       <View style={style.levelContainer}>
         <Text>{`Level ${level}`}</Text>
       </View>
-      <KanaGrid kana={kana} type={type} />
+      <KanaGrid navigation={navigation} kana={kana} type={type} />
     </View>
   )
 }

components/onboarding/OnboardingItem.js

@@ -8,7 +8,7 @@ const OnboardingItem = ({ item }) => {
     <View style={{ width, alignItems: "center", padding: 20 }}>
       <View style={{ flex: 0.65, justifyContent: "center" }}>
         <Image
-          source={{ uri: item.image }}
+          source={item.image}
           style={{
             width: width / 2,
             height: height / 2,
@@ -29,13 +29,13 @@ export default OnboardingItem
 const styles = StyleSheet.create({
   onboardingTitle: {
     fontWeight: "800",
-    fontSize: 28,
+    fontSize: 32,
     textAlign: "center",
     marginBottom: 10,
   },
   onboardingSubtitle: {
     fontWeight: "300",
     textAlign: "center",
-    fontSize: 16,
+    fontSize: 26,
   },
 })