Merge pull request #41 from Naveen-g09/tw

Tw

app.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

app.json

@@ -42,7 +42,7 @@
       ]
     ],
     "experiments": {
-      "typedRoutes": false
+      "typedRoutes": true
     },
     "extra": {
       "router": {

app/(tabs)/[id].tsx

@@ -13,6 +13,7 @@ const NewPage = () => {
       <Text style={styles.text}>
         Hang on, This feature is in development Process
       </Text>
+      <Text className=""></Text>
     </View>
   );
 };

app/(tabs)/index.tsx

@@ -1,14 +1,24 @@
 import { Link } from "expo-router";
-import React from "react";
+import React, { useEffect } from "react";
 import { Text, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 
+import { storage } from "@/utils/mmkvHelpers";
+
 //TODO: this is homepage of the app
 //TODO: add a notification icon
 //TODO: it will have details of the society, details of the resident, details of the flat, details of the family members, details of the parking, details of the utilities, details of the maintenance, details of the bills, details of the orders, details of the payments, details of the receipts, details of the complaints, details of the suggestions, details of the feedbacks, details of the polls, details of the announcements, details of the notices, details of the chats, details of the events, details of the posts, details of the category, details of the community, details of the account, details of the index
 //TODO: options of payment dues, gate updates, guest notification, help, etc
 //TODO: in notification component it will push notifications of payment dues, gate updates, guest notification, help, etc
 
-const index = () => {
+export const Index = () => {
+  useEffect(() => {
+    // storage.clearAll();
+    const keys = storage.getAllKeys();
+    //fetch keys as per chatcard id
+    if (!keys.length) {
+    }
+  });
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <Link href="/visitor" asChild>
@@ -86,5 +96,3 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
 });
-
-export default index;

app/onboarding/index.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable prettier/prettier */
+import { AntDesign } from "@expo/vector-icons";
+import Entypo from "@expo/vector-icons/Entypo";
+import * as Font from "expo-font";
+import { router } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import React, { useCallback, useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import OnboardingPage, { width } from "@/components/OnboardingPage";
+import PaginationDot from "@/components/PaginationDot";
+import { PAGES, ONBOARD_BG } from "@/constants/onboarding";
+import { IS_ONBOARDED_KEY } from "@/utils/costants/chat";
+import { storage } from "@/utils/mmkvHelpers";
+
+SplashScreen.preventAutoHideAsync();
+
+export default function OnboardingScreen() {
+  const translateX = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      translateX.value = event.contentOffset.x;
+    },
+  });
+
+  const activeIndex = useDerivedValue(() => {
+    return Math.round(translateX.value / width);
+  });
+
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const onIconPress = useCallback(async () => {
+    if (scrollRef.current) {
+      const nextIndex = activeIndex.value + 1;
+      if (nextIndex < PAGES.length) {
+        scrollRef.current.scrollTo({
+          x: nextIndex * width,
+          animated: true,
+        });
+      } else {
+        // Store the onboarding status in AsyncStorage
+        storage.set(IS_ONBOARDED_KEY, true);
+        router.replace("/(tabs)/home");
+      }
+    }
+  }, [activeIndex]);
+
+  console.log("onboarding rendered");
+
+  const [appIsReady, setAppIsReady] = React.useState(false);
+
+  useEffect(() => {
+    async function prepare() {
+      try {
+        await Font.loadAsync(Entypo.font);
+
+        await new Promise((resolve) => setTimeout(resolve));
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        setAppIsReady(true);
+      }
+    }
+
+    prepare();
+  }, []);
+
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
+
+  if (!appIsReady) {
+    return null;
+  }
+
+  return (
+    <View
+      className="flex-1"
+      style={{
+        backgroundColor: ONBOARD_BG,
+      }}
+      onLayout={onLayoutRootView}
+    >
+      <Animated.ScrollView
+        ref={scrollRef as any}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        className="flex-1"
+      >
+        {PAGES.map((page, index) => (
+          <OnboardingPage
+            key={index.toString()}
+            page={page}
+            translateX={translateX}
+            index={index}
+          />
+        ))}
+      </Animated.ScrollView>
+
+      {/* FOOTER */}
+
+      <View className="h-12 mb-2 flex-row justify-space">
+        {/* Paginator */}
+
+        <View className="flex flex-1 items-center justify-center mr-100 flex-row">
+          {PAGES.map((_, index) => {
+            return (
+              <PaginationDot
+                key={index.toString()}
+                index={index}
+                activeDotIndex={activeIndex}
+              />
+            );
+          })}
+        </View>
+
+        {/* Icon or Button Container */}
+
+        <View className="flex flex-1 items-center justify-center ml-[84]">
+          <AntDesign
+            name="arrowright"
+            size={24}
+            color="black"
+            onPress={onIconPress}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

components/OnboardingPage.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Dimensions, View, Text } from "react-native";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+import { PageInterface } from "@/constants/onboarding";
+
+interface PageProps {
+  page: PageInterface;
+  translateX: Animated.SharedValue<number>;
+  index: number;
+}
+
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
+
+const CIRCLE_WIDTH = width * 0.7;
+
+const OnboardingPage: React.FC<PageProps> = ({ page, translateX, index }) => {
+  const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+
+  const onboardImageStyle = useAnimatedStyle(() => {
+    const progress = interpolate(
+      translateX.value,
+      inputRange,
+      [0, 0, 1],
+      Extrapolation.CLAMP,
+    );
+
+    const opacity = interpolate(
+      translateX.value,
+      inputRange,
+      [0.5, 1, 0.5],
+      Extrapolation.CLAMP,
+    );
+
+    return {
+      opacity,
+      transform: [
+        {
+          rotate: `${progress * Math.PI}rad`,
+        },
+      ],
+    };
+  });
+
+  return (
+    <View
+      style={{
+        width,
+        height,
+      }}
+      className="items-center justify-center"
+    >
+      <View
+        style={{
+          width: CIRCLE_WIDTH,
+        }}
+        className="aspect-square items-center justify-center mb-[100]"
+      >
+        {/* Circle */}
+        <Animated.View className="relative w-full pb-[100%] bg-white rounded-full" />
+
+        <Animated.Image
+          source={page.source}
+          style={[
+            {
+              height: height * 0.6,
+              aspectRatio: 1,
+              position: "absolute",
+              width: width * 0.8,
+            },
+            onboardImageStyle,
+          ]}
+          resizeMode="contain"
+        />
+      </View>
+      <Text className="text-center mb-[15] text-2xl font-[700]">
+        {page.title}
+      </Text>
+      <Text className="text-center text-lg text-neutral-500 mx-2">
+        {page.description}
+      </Text>
+    </View>
+  );
+};
+export { width, height };
+
+export default OnboardingPage;

components/PaginationDot.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from "react-native-reanimated";
+
+interface PaginationDotProps {
+  index: number;
+  activeDotIndex?: Animated.SharedValue<number>;
+}
+
+const PaginationDot: React.FC<PaginationDotProps> = ({
+  activeDotIndex,
+  index,
+}) => {
+  const paginatorStyle = useAnimatedStyle(() => {
+    const isActive = activeDotIndex?.value === index;
+    return {
+      backgroundColor: withTiming(isActive ? "black" : "white", {
+        duration: 300,
+      }),
+      width: 20,
+      height: 20,
+      marginHorizontal: 5,
+      borderRadius: 10,
+      borderWidth: 1,
+    };
+  });
+
+  return <Animated.View style={paginatorStyle} />;
+};
+
+export default PaginationDot;

constants/onboarding.ts

@@ -0,0 +1,30 @@
+/* eslint-disable prettier/prettier */
+import { ImageProps } from "react-native";
+
+export const ONBOARD_BG = "#F1F1F1";
+
+export interface PageInterface extends Pick<ImageProps, "source"> {
+  title: string;
+  description: string;
+}
+
+export const PAGES: PageInterface[] = [
+  {
+    title: "Wellness Guide",
+    description:
+      "Discover personalized health advice and lifestyle tips for optimal wellness",
+    source: require("../assets/images/clinic-1.jpg"),
+  },
+  {
+    title: "Medication Manager",
+    description:
+      "Effortlessly organize and track your medications and dosage guidance.",
+    source: require("../assets/images/clinic-2.png"),
+  },
+  {
+    title: "Health Tracker",
+    description:
+      "Monitor your vitals, symptoms, and progress on your journey to better health",
+    source: require("../assets/images/clinic-3.png"),
+  },
+];

expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

tailwind.config.js

@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./App.{js,jsx,ts,tsx}",
-    "./<custom directory>/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },
+  // future: {
+  //   hoverOnlyWhenSupported: true,
+  // },
   plugins: [],
 };

tsconfig.json

@@ -12,6 +12,7 @@
     "**/*.tsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts",
-    "app/PushNotifications.tsx"
+    "app/PushNotifications.tsx",
+    "metro.config.ts"
   ]
 }

utils/mmkvHelpers.ts

@@ -1,5 +1,4 @@
 import { MMKV } from "react-native-mmkv";
-
 export const storage = new MMKV();
 
 const CHAT_PREFIX = "chat:";