diff --git a/.gitignore b/.gitignore
index 0b37b6eb..49e60def 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,4 @@ yarn-error.*
# The following patterns were generated by expo-cli
expo-env.d.ts
-# @end expo-cli
\ No newline at end of file
+# @end expo-cli
diff --git a/app.json b/app.json
index fc8f2537..d7e0cf0e 100644
--- a/app.json
+++ b/app.json
@@ -12,6 +12,7 @@
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": ["**/*"],
+ "userInterfaceStyle": "dark",
"ios": {
"supportsTablet": true,
"infoPlist": {
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 0a0930d4..adc6f701 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -102,6 +102,7 @@ function RootLayoutNav() {
+
>
diff --git a/app/onBoarding/FirstScreen.tsx b/app/onBoarding/FirstScreen.tsx
new file mode 100644
index 00000000..1b455c6f
--- /dev/null
+++ b/app/onBoarding/FirstScreen.tsx
@@ -0,0 +1,46 @@
+import React, {useContext, useState} from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent';
+import { ThemeContext } from '@/ctx/ThemeContext';
+
+const image = require("../../assets/images/OnBoardingImages/firstLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/firstDarkImg.png")
+
+const FirstScreen = () => {
+ const {theme, changeTheme} = useContext(ThemeContext)
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+
+ container: {
+ flex: 1,
+ alignItems: "center",
+ },
+
+ dots: {
+ width: 10,
+ height: 10,
+ backgroundColor: Colors.grayScale._300,
+ borderRadius: 100,
+ marginHorizontal: 3
+ },
+})
+
+export default FirstScreen
diff --git a/app/onBoarding/SecondScreen.tsx b/app/onBoarding/SecondScreen.tsx
new file mode 100644
index 00000000..67eca1c9
--- /dev/null
+++ b/app/onBoarding/SecondScreen.tsx
@@ -0,0 +1,45 @@
+import React, { useContext, useRef, useState } from 'react'
+import { View, StyleSheet, FlatList, Animated, Image, Pressable, Text, SafeAreaView } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent';
+import { ThemeContext } from '@/ctx/ThemeContext';
+
+const image = require("../../assets/images/OnBoardingImages/secondLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/secondDarkImg.png")
+
+const SecondScreen = () => {
+ const {theme, changeTheme} = useContext(ThemeContext)
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+
+ container: {
+ flex: 1,
+ alignItems: "center",
+ },
+ dots: {
+ width: 10,
+ height: 10,
+ backgroundColor: Colors.grayScale._300,
+ borderRadius: 100,
+ marginHorizontal: 3
+ },
+
+})
+
+export default SecondScreen
diff --git a/app/onBoarding/ThirdScreen.tsx b/app/onBoarding/ThirdScreen.tsx
new file mode 100644
index 00000000..7166c5eb
--- /dev/null
+++ b/app/onBoarding/ThirdScreen.tsx
@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react'
+import { StyleSheet,SafeAreaView,Text, View } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent'
+import { ThemeContext } from '@/ctx/ThemeContext'
+
+const image = require("../../assets/images/OnBoardingImages/thirdLightImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/thirdDarkImg.png")
+
+
+const ThirdScreen = () => {
+ const {theme, changeTheme} = useContext(ThemeContext)
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+
+ container: {
+ flex: 1,
+ alignItems: "center",
+ },
+ dots: {
+ width: 10,
+ height: 10,
+ backgroundColor: Colors.grayScale._300,
+ borderRadius: 100,
+ marginHorizontal: 3
+ }
+})
+
+export default ThirdScreen
diff --git a/app/onBoarding/_layout.tsx b/app/onBoarding/_layout.tsx
new file mode 100644
index 00000000..341595d8
--- /dev/null
+++ b/app/onBoarding/_layout.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Link, Stack } from "expo-router";
+import { Pressable } from "react-native";
+
+
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+function TabBarIcon(props: {
+ name: React.ComponentProps["name"];
+ color: string;
+}) {
+ return ;
+}
+
+export default function TabLayout() {
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/OnBoarding/OnboardingComponent.tsx b/components/OnBoarding/OnboardingComponent.tsx
new file mode 100644
index 00000000..9eb09223
--- /dev/null
+++ b/components/OnBoarding/OnboardingComponent.tsx
@@ -0,0 +1,107 @@
+import React, { ReactElement, useContext, useRef, useState } from "react";
+import {
+ View,
+ StyleSheet,
+ FlatList,
+ Animated,
+ Image,
+ Pressable,
+ Text,
+} from "react-native";
+import { Colors } from "@/constants/Colors";
+import { router } from "expo-router";
+import { ThemeContext } from "@/ctx/ThemeContext";
+
+const OnboardingComponent = ({
+ image,
+ text,
+ action,
+ direction,
+ children,
+}: {
+ image: any;
+ text: string;
+ action: string;
+ direction: any;
+ children: React.ReactNode;
+}) => {
+ const { theme, changeTheme } = useContext(ThemeContext);
+
+ return (
+
+
+
+
+
+
+ {text}
+
+
+ {children}
+
+ router.push(direction)} style={styles.btn}>
+ {action}
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ paddingHorizontal: "5%",
+ paddingVertical: "20%",
+ },
+
+ img: {
+ paddingHorizontal: 8,
+ alignSelf: "center",
+ },
+
+ LowerSection: {
+ flexDirection: "column",
+ gap: 48,
+ paddingVertical: 48,
+ },
+
+ titleLight: {
+ color: Colors.main.primary._500,
+ fontSize: 40,
+ paddingHorizontal: 8,
+ textAlign: "center",
+ fontFamily: "Bold",
+ },
+
+ titleDark: {
+ color: Colors.others.white,
+ fontSize: 40,
+ paddingHorizontal: 8,
+ textAlign: "center",
+ fontWeight: "bold",
+ },
+
+ dots: {
+ width: 10,
+ height: 10,
+ backgroundColor: Colors.grayScale._300,
+ borderRadius: 100,
+ marginHorizontal: 3,
+ },
+
+ btn: {
+ backgroundColor: Colors.main.primary._500,
+ textAlign: "center",
+ padding: 18,
+ borderRadius: 100,
+ alignContent: "flex-end",
+ },
+
+ btnText: {
+ color: Colors.others.white,
+ alignSelf: "center",
+ fontSize: 16,
+ fontWeight: "bold",
+ },
+});
+
+export default OnboardingComponent;
diff --git a/package.json b/package.json
index ec690525..4cef75cd 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,14 @@
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
- "start": "expo start",
+ "start": " npx expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest",
"test:watch": "jest --watchAll",
"test:update": "jest --updateSnapshot",
- "ci-start": "expo build:web"
+ "ci-start": "expo build:web"
},
"jest": {
"preset": "jest-expo"
@@ -25,7 +25,6 @@
"expo-local-authentication": "~13.8.0",
"expo-navigation-bar": "^2.8.1",
"expo-router": "~3.4.10",
- "expo-secure-store": "~12.8.1",
"expo-splash-screen": "~0.26.5",
"expo-status-bar": "~1.11.1",
"expo-system-ui": "~2.9.3",
@@ -40,12 +39,14 @@
"react-native-screens": "~3.29.0",
"react-native-svg": "14.1.0",
"react-native-web": "~0.19.6",
- "vector-icons": "^0.1.0"
+ "vector-icons": "^0.1.0",
+ "expo-secure-store": "~12.8.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@eslint/js": "^9.1.1",
"@types/react": "~18.2.45",
+ "@types/react-native": "^0.73.0",
"@types/react-native-indicators": "^0.16.6",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",