Final Project Complete

App.tsx

@@ -3,17 +3,21 @@ import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
+import { LogBox } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { useDeviceContext } from "twrnc";
 
 import tw from "@/lib/tailwind";
 import { AuthProvider } from "@/providers/AuthProvider";
+import { CircleProvider } from "@/providers/CircleProvider";
 import { LocationProvider } from "@/providers/LocationProvider";
 import { AppRoutes } from "@/routes";
 
 SplashScreen.preventAutoHideAsync();
 
+LogBox.ignoreAllLogs();
+
 export default function App() {
 	useDeviceContext(tw);
 
@@ -41,14 +45,16 @@ export default function App() {
 	return (
 		<AuthProvider>
 			<LocationProvider>
-				<GestureHandlerRootView style={tw`flex-1`}>
-					<BottomSheetModalProvider>
-						<SafeAreaProvider>
-							<StatusBar style="dark" />
-							<AppRoutes />
-						</SafeAreaProvider>
-					</BottomSheetModalProvider>
-				</GestureHandlerRootView>
+				<CircleProvider>
+					<GestureHandlerRootView style={tw`flex-1`}>
+						<BottomSheetModalProvider>
+							<SafeAreaProvider>
+								<StatusBar style="dark" />
+								<AppRoutes />
+							</SafeAreaProvider>
+						</BottomSheetModalProvider>
+					</GestureHandlerRootView>
+				</CircleProvider>
 			</LocationProvider>
 		</AuthProvider>
 	);

package.json

@@ -7,27 +7,36 @@
 		"android": "expo start --android",
 		"ios": "expo start --ios",
 		"web": "expo start --web",
-		"lint": "eslint ."
+		"lint": "eslint .",
+		"lint-fix": "eslint --fix ."
 	},
 	"dependencies": {
 		"@gorhom/bottom-sheet": "^4",
 		"@hookform/resolvers": "^3.3.1",
 		"@react-native-async-storage/async-storage": "1.18.2",
+		"@react-native-clipboard/clipboard": "^1.12.1",
 		"@react-navigation/native": "^6.1.7",
 		"@react-navigation/native-stack": "^6.9.13",
 		"@supabase/supabase-js": "^2.36.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"expo": "~49.0.8",
+		"expo-clipboard": "~4.3.1",
+		"expo-constants": "~14.4.2",
+		"expo-device": "~5.4.0",
 		"expo-font": "~11.4.0",
-		"expo-image": "~1.3.4",
+		"expo-image": "~1.3.5",
+		"expo-image-picker": "~14.3.2",
 		"expo-location": "~16.1.0",
+		"expo-notifications": "~0.20.1",
+		"expo-router": "^2.0.13",
 		"expo-secure-store": "~12.3.1",
 		"expo-splash-screen": "~0.20.5",
 		"expo-status-bar": "~1.6.0",
-		"expo-updates": "~0.18.16",
+		"expo-updates": "~0.18.17",
 		"react": "18.2.0",
 		"react-hook-form": "^7.46.1",
-		"react-native": "0.72.5",
+		"react-native": "0.72.6",
+		"react-native-dropdown-select-list": "^2.0.5",
 		"react-native-gesture-handler": "~2.12.0",
 		"react-native-maps": "^1.7.1",
 		"react-native-reanimated": "3.3.0",

src/components/Push.tsx

@@ -0,0 +1,79 @@
+import Constants from "expo-constants";
+import * as Device from "expo-device";
+import * as Notifications from "expo-notifications";
+import { Platform } from "react-native";
+
+Notifications.setNotificationHandler({
+	handleNotification: async (notification) => {
+		return {
+			shouldShowAlert: true,
+			shouldPlaySound: true,
+			shouldSetBadge: false,
+		};
+	},
+});
+
+async function sendPushInviteCode(
+	expoPushToken: string,
+	code: string | undefined,
+) {
+	const message = {
+		to: expoPushToken,
+		sound: "default",
+		title: "Circles",
+		body: `You've been invited to a circle, tap to join with code: ${code}`,
+		priority: "high",
+		data: {
+			screen: "Join",
+			invitationCode: code,
+		},
+	};
+
+	await fetch("https://exp.host/--/api/v2/push/send", {
+		method: "POST",
+		headers: {
+			Accept: "application/json",
+			"Accept-encoding": "gzip, deflate",
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify(message),
+	});
+}
+
+async function registerForPushNotificationsAsync() {
+	let token;
+
+	if (Platform.OS === "android") {
+		Notifications.setNotificationChannelAsync("default", {
+			name: "default",
+			importance: Notifications.AndroidImportance.MAX,
+			vibrationPattern: [0, 250, 250, 250],
+			lightColor: "#FF231F7C",
+		});
+	}
+	// Check that is it being run on a device, not an emulator
+	if (Device.isDevice) {
+		const { status: existingStatus } =
+			await Notifications.getPermissionsAsync();
+		let finalStatus = existingStatus;
+		if (existingStatus !== "granted") {
+			const { status } = await Notifications.requestPermissionsAsync();
+			finalStatus = status;
+		}
+		if (finalStatus !== "granted") {
+			alert("Failed to get push token for push notification!");
+			return "";
+		}
+		token = await Notifications.getExpoPushTokenAsync({
+			projectId: Constants?.expoConfig?.extra?.eas.projectId,
+		});
+		console.log(token);
+	}
+	//  else {
+	// 	alert("Must use physical device for Push Notifications");
+	// }
+
+	return token?.data ?? "";
+}
+
+export { sendPushInviteCode, registerForPushNotificationsAsync };

src/components/map/CustomMarker.tsx

@@ -8,14 +8,18 @@ import { IProfile, Status } from "@/types/profile";
 export interface ICustomMarkerProps {
 	location: IProfile["location"];
 	avatar_url: string | null | undefined;
-	status?: Status | undefined;
+	status?: Status | null | undefined;
 }
 
 export const CustomMarker = ({
 	location,
 	avatar_url,
 	status,
 }: ICustomMarkerProps) => {
+	if (!location || !location.latitude || !location.longitude) {
+		return null;
+	}
+
 	return (
 		<Marker coordinate={location as LatLng}>
 			<Avatar

src/components/sheet/CustomHandle.tsx

@@ -20,7 +20,7 @@ export const CustomHandle: React.FC<HandleProps> = ({ navigation }) => {
 				style={tw`w-[1.8421875rem] h-[0.25rem] bg-[#e5e5e5] self-center rounded-full m-2.5`}
 			/>
 			<View style={tw`w-full flex-row items-center gap-x-2 mt-2 px-4`}>
-				<Avatar avatar_url={profile?.avatar_url} />
+				<Avatar avatar_url={profile?.avatar_url} status={profile?.status} />
 				<View style={tw`flex-col flex-grow`}>
 					<Text variant="headline" weight="semibold">
 						{profile?.first_name} {profile?.last_name}

src/components/ui/Avatar.tsx

@@ -7,7 +7,7 @@ import { Status } from "@/types/profile";
 
 interface IAvatarProps {
 	avatar_url: string | null | undefined;
-	status?: Status;
+	status?: Status | null | undefined;
 	style?: Image["props"]["style"];
 }
 
@@ -18,14 +18,16 @@ export const Avatar = ({
 }: IAvatarProps) => {
 	return (
 		<View>
-			<Image
-				source={
-					avatar_url
-						? { uri: avatar_url }
-						: require("@/assets/icons/avatar.svg")
-				}
-				style={[tw`w-11 h-11 rounded-full`, style]}
-			/>
+			<View style={[tw`rounded-full overflow-hidden`]}>
+				<Image
+					source={
+						avatar_url
+							? { uri: avatar_url }
+							: require("@/assets/icons/avatar.svg")
+					}
+					style={[tw`w-11 h-11 rounded-full`, style]}
+				/>
+			</View>
 			<View
 				style={[
 					tw`absolute top-[-1] left-[-1] w-[1.125rem] h-[1.125rem] rounded-full border-2 border-white`,

src/components/ui/ScreenIndicator.tsx

@@ -0,0 +1,31 @@
+import Animated, {
+	useAnimatedStyle,
+	withTiming,
+} from "react-native-reanimated";
+
+import tw from "@/lib/tailwind";
+
+interface IScreenIndicatorProps {
+	activeIndex: Animated.SharedValue<number>;
+	index: number;
+}
+
+export const ScreenIndicator = ({
+	activeIndex,
+	index,
+}: IScreenIndicatorProps) => {
+	const rIndicatorStyle = useAnimatedStyle(() => {
+		return {
+			width: withTiming(activeIndex.value === index ? 32 : 16),
+			backgroundColor: withTiming(
+				activeIndex.value === index ? "#4DAFFF" : "#D9D9D9",
+			),
+		};
+	});
+
+	return (
+		<Animated.View
+			style={[tw`h-[0.1875rem] bg-red-500 rounded-full`, rIndicatorStyle]}
+		/>
+	);
+};

src/components/ui/index.ts

@@ -2,3 +2,5 @@ export * from "./Button";
 export * from "./Input";
 export * from "./Text";
 export * from "./Alert";
+export * from "./ScreenIndicator";
+export * from "./Avatar";

src/hooks/useCircle.tsx

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+
+import { CircleContext } from "@/providers/CircleProvider";
+
+export const useCircle = () => useContext(CircleContext);