Implemented changes from user feedback.

app.json

@@ -1,11 +1,11 @@
 {
   "expo": {
-    "name": "HeadiesBox",
+    "name": "OffLoad",
     "slug": "HeadiesBox",
     "version": "1.0.0",
     "orientation": "portrait",
     "plugins": ["@react-native-google-signin/google-signin"],
-    "icon": "./assets/icon.png",
+    "icon": "./assets/offload-icon.png",
     "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splashscreen.png",
@@ -14,12 +14,12 @@
     },
     "androidStatusBar": {
       "backgroundColor": "#3131C9",
-      "style": "light",
+      "barStyle": "light-content",
       "translucent": true
     },
     "androidNavigationBar": {
       "visible": false,
-      "barStyle": "light",
+      "barStyle": "light-content",
       "backgroundColor": "#3131C9"
     },
     "updates": {

assets/emoticons/emotions.js

@@ -6,6 +6,5 @@ export const emotions = {
     4: require("./Asset-4.png"),
     5: require("./Asset-5.png"),
     6: require("./Asset-6.png"),
-    7: require("./Asset-7.png"),
   },
 };

components/NextButton.js

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+} from "react-native";
+import Svg, { G, Circle } from "react-native-svg";
+import { AntDesign } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-community/async-storage";
+import * as Animatable from "react-native-animatable";
+
+const NextButton = ({
+  percentage,
+  scrollTo,
+  currentIndex,
+  slidesLength,
+  navigation,
+}) => {
+  const size = 100;
+  const strokeWidth = 3;
+  const center = size / 2;
+  const radius = size / 2 - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const progressAnimation = useRef(new Animated.Value(0)).current;
+  const progressRef = useRef(null);
+
+  const animation = (toValue) => {
+    return Animated.timing(progressAnimation, {
+      toValue,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  useEffect(() => {
+    animation(percentage);
+  }, [percentage]);
+
+  useEffect(() => {
+    progressAnimation.addListener((value) => {
+      const strokeDashoffset =
+        circumference - (circumference * value.value) / 100;
+
+      if (progressRef?.current) {
+        progressRef.current.setNativeProps({
+          strokeDashoffset,
+        });
+      }
+    });
+
+    return () => {
+      progressAnimation.removeAllListeners();
+    };
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {/* <Svg width={size} height={size}>
+        <G rotation="-90" origin={center}>
+          <Circle
+            stroke="#E6E7E8"
+            cx={center}
+            cy={center}
+            r={radius}
+            strokeWidth={strokeWidth}
+          />
+          <Circle
+            ref={progressRef}
+            stroke="#3131C9"
+            cx={center}
+            cy={center}
+            r={radius}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeLinecap="round"
+          />
+        </G>
+      </Svg> */}
+      <TouchableOpacity
+        onPress={async () => {
+          if (currentIndex === slidesLength - 1) {
+            try {
+              console.log("settingItem");
+              await AsyncStorage.setItem("@viewedOnboarding", "true");
+            } catch (error) {
+              console.log("Error @setItem:", error);
+            }
+            navigation.navigate("emoji");
+          } else {
+            scrollTo();
+          }
+        }}
+      >
+        <Animatable.View
+          animation={
+            currentIndex === slidesLength - 1 ? "rubberBand" : "bounceIn"
+          }
+          style={[
+            styles.button,
+            currentIndex !== slidesLength - 1 && {
+              backgroundColor: "transparent",
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.text,
+              currentIndex !== slidesLength - 1 && {
+                color: "#3131C9",
+                marginRight: 10,
+              },
+            ]}
+          >
+            {currentIndex !== slidesLength - 1 ? "Swipe Next" : "Continue"}
+          </Text>
+          {currentIndex !== slidesLength - 1 && (
+            <AntDesign name="arrowright" size={12} color="#3131C9" />
+          )}
+        </Animatable.View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+  },
+  button: {
+    backgroundColor: "#3131C9",
+    borderRadius: 10,
+    padding: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 10,
+    marginBottom: 10,
+    justifyContent: "center",
+  },
+  text: {
+    fontFamily: "inter",
+    color: "white",
+    fontSize: 16,
+    textAlign: "center",
+  },
+});
+
+export default NextButton;

components/OnbordingItem.js

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  Text,
+  Image,
+  useWindowDimensions,
+} from "react-native";
+
+const OnbordingItem = ({ item }) => {
+  const { width } = useWindowDimensions();
+  return (
+    <View style={[styles.container, { width }]}>
+      {item.id !== 1 ? (
+        <View style={{ width: "100%", paddingHorizontal: 20 }}>
+          <Text style={styles.title}>{item.title}</Text>
+        </View>
+      ) : (
+        <View style={{ width: "100%", paddingHorizontal: 20 }}>
+          <Text style={styles.title}>Hi!</Text>
+          <Text style={styles.title}>Welcome to OffLoad</Text>
+        </View>
+      )}
+      <View
+        style={{
+          width,
+          flex: 1,
+          overflow: "hidden",
+        }}
+      >
+        <Image
+          source={item.image}
+          style={[
+            styles.image,
+            {
+              width,
+              flex: 1,
+              resizeMode: "cover",
+              scaleX: item.id !== 1 ? 1.8 : 1,
+              scaleY: item.id !== 1 ? 1.8 : 1,
+            },
+          ]}
+        />
+      </View>
+      {item.id !== 1 && (
+        <View>
+          <Text style={styles.description}>{item.description}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    flex: 0.7,
+    justifyContent: "center",
+  },
+  title: {
+    width: "100%",
+    fontSize: 40,
+    color: "#3131C9",
+    textAlign: "left",
+    fontFamily: "titan",
+  },
+  description: {
+    fontWeight: "300",
+    color: "#62656b",
+    textAlign: "center",
+    paddingHorizontal: 32,
+    fontFamily: "inter",
+  },
+});
+
+export default OnbordingItem;

components/Paginator.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, StyleSheet, Animated, useWindowDimensions } from "react-native";
+
+const Paginator = ({ data, scrollX }) => {
+  const { width } = useWindowDimensions();
+  return (
+    <View style={styles.container}>
+      {data.map((_, i) => {
+        const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+        const dotWidth = scrollX.interpolate({
+          inputRange,
+          outputRange: [7, 14, 7],
+          extrapolate: "clamp",
+        });
+        const opacity = scrollX.interpolate({
+          inputRange,
+          outputRange: [0.3, 1, 0.3],
+          extrapolate: "clamp",
+        });
+        return (
+          <Animated.View
+            style={[styles.dot, { width: dotWidth, opacity }]}
+            key={i.toString()}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    height: 10,
+    marginTop: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dot: {
+    height: 7,
+    borderRadius: 5,
+    backgroundColor: "#3131C9",
+    marginHorizontal: 8,
+  },
+});
+
+export default Paginator;

constants/slides.js

@@ -0,0 +1,26 @@
+export default [
+  {
+    id: 1,
+    title: "Hi! Welcome to OffLoad",
+    description: "",
+    image: require("../assets/welcomeScreen/InteriorDesign.png"),
+  },
+  {
+    id: 2,
+    title: "Record Voice Notes",
+    description: "Conveniently record and save your feelings as voice notes.",
+    image: require("../assets/welcomeScreen/slide-1.png"),
+  },
+  {
+    id: 3,
+    title: "Track Your Moods",
+    description: "Easily visualize your mood changes on our custom calendar",
+    image: require("../assets/welcomeScreen/slide-2.png"),
+  },
+  {
+    id: 4,
+    title: "Write Journals",
+    description: "Comfortably take notes and journals on how you feel.",
+    image: require("../assets/welcomeScreen/slide-3.png"),
+  },
+];