Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,4 @@ app-example
# generated native folders
/ios
/android
.env
2 changes: 2 additions & 0 deletions app.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
},
"plugins": [
"expo-router",
"expo-secure-store",
"@clerk/expo",
[
"expo-splash-screen",
{
Expand Down
13 changes: 12 additions & 1 deletion app/(auth)/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import { Stack } from "expo-router";
import { useAuth } from "@clerk/expo";
import { Redirect, Stack } from "expo-router";

export default function AuthLayout() {
const { isLoaded, isSignedIn } = useAuth();

if (!isLoaded) {
return null;
}

if (isSignedIn) {
return <Redirect href="/" />;
}

return <Stack screenOptions={{ headerShown: false }} />;
}
16 changes: 15 additions & 1 deletion app/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import "../global.css";

import { ClerkProvider } from "@clerk/expo";
import { tokenCache } from "@clerk/expo/token-cache";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import * as WebBrowser from "expo-web-browser";
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();
WebBrowser.maybeCompleteAuthSession();

const clerkPublishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY ?? "";

if (!clerkPublishableKey) {
throw new Error("Add EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY to your .env file");
}

export default function RootLayout() {
const [loaded, error] = useFonts({
Expand All @@ -25,5 +35,9 @@ export default function RootLayout() {
return null;
}

return <Stack screenOptions={{ headerShown: false }} />;
return (
<ClerkProvider publishableKey={clerkPublishableKey} tokenCache={tokenCache}>
<Stack screenOptions={{ headerShown: false }} />
</ClerkProvider>
);
}
25 changes: 24 additions & 1 deletion app/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useAuth } from "@clerk/expo";
import { images } from "@/constants/images";
import { colors, typography } from "@/theme/tokens";
import { Link } from "expo-router";
import { Link, Redirect } from "expo-router";
import type React from "react";
import {
Image,
Expand All @@ -10,6 +11,7 @@ import {
View,
useWindowDimensions,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const primaryColors = [
{ name: "Lingua Purple", hex: colors.primary.purple },
Expand Down Expand Up @@ -37,20 +39,41 @@ const neutralColors = [
const typeRows = Object.values(typography.scale);

export default function Index() {
const { isLoaded, isSignedIn } = useAuth();
const insets = useSafeAreaInsets();
const { width } = useWindowDimensions();
const isWide = width >= 900;
const horizontalPadding = isWide ? 28 : 16;

if (!isLoaded) {
return null;
}

if (!isSignedIn) {
return <Redirect href="/onboarding" />;
}

return (
<ScrollView
style={styles.screen}
contentContainerStyle={[
styles.content,
isWide ? styles.contentWide : styles.contentNarrow,
{
paddingBottom: Math.max(insets.bottom + 16, horizontalPadding),
paddingTop: Math.max(insets.top + 14, horizontalPadding),
},
]}
showsVerticalScrollIndicator={false}
>
<View className={isWide ? "flex-row gap-4" : "gap-4"}>
<View className="gap-4" style={isWide ? styles.column : undefined}>
<Link href="/profile" asChild>
<Text className="overflow-hidden rounded-[16px] bg-[#f6c443] px-5 py-4 text-center font-poppins-bold text-[18px] leading-[26px] text-lingua-text-primary">
Open Profile
</Text>
</Link>

<Link href="/onboarding" asChild>
<Text className="overflow-hidden rounded-[16px] bg-lingua-deep-purple px-5 py-4 text-center font-poppins-bold text-[18px] leading-[26px] text-white">
Open Onboarding
Expand Down
7 changes: 7 additions & 0 deletions app/oauth-callback.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as WebBrowser from "expo-web-browser";

WebBrowser.maybeCompleteAuthSession();

export default function OAuthCallback() {
return null;
}
44 changes: 26 additions & 18 deletions app/onboarding.tsx
Original file line number Diff line number Diff line change
@@ -1,72 +1,80 @@
import { useAuth } from "@clerk/expo";
import { images } from "@/constants/images";
import { Link } from "expo-router";
import { Link, Redirect } from "expo-router";
import { Image, Pressable, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const mascotWelcome = require("../assets/images/mascot-welcome.png");

export default function OnboardingScreen() {
const { isLoaded, isSignedIn } = useAuth();
const insets = useSafeAreaInsets();

if (!isLoaded) {
return null;
}

if (isSignedIn) {
return <Redirect href="/" />;
}

return (
<View
className="flex-1 overflow-hidden bg-white"
style={{
paddingBottom: Math.max(insets.bottom, 20) + 12,
paddingHorizontal: 45,
paddingHorizontal: 32,
paddingTop: insets.top + 24,
}}
>
<View className="mx-auto w-full max-w-[430px] flex-1">
<View className="flex-row items-center justify-center gap-2">
<View className="flex-row items-center justify-center gap-[8px]">
<Image
source={images.mascotLogo}
resizeMode="contain"
style={{ height: 18, width: 18 }}
style={{ height: 24, width: 24 }}
/>
<Text className="font-poppins-bold text-[14px] leading-[18px] text-lingua-text-primary">
<Text className="font-poppins-bold text-[18px] leading-[24px] text-lingua-text-primary">
lingua
</Text>
</View>

<View className="mt-[42px]">
<Text className="font-poppins-bold text-[24px] leading-[31px] text-lingua-text-primary">
<Text className="font-poppins-bold text-[31px] leading-[40px] text-lingua-text-primary">
Your AI language{"\n"}
<Text className="text-lingua-deep-purple">teacher.</Text>
</Text>
<Text className="mt-[10px] font-poppins text-[11px] leading-[16px] text-[#626b85]">
<Text className="mt-[16px] font-poppins text-[19px] leading-[27px] text-[#69728c]">
Real conversations, personalized lessons, anytime,{"\n"}
anywhere.
</Text>
</View>

<View className="relative mt-[36px] min-h-[336px] items-center">
<Text className="absolute left-[9px] top-[134px] font-poppins-bold text-[9px] leading-[12px] text-lingua-text-primary">
<View className="relative mt-[32px] min-h-[360px] items-center">
<Text className="absolute left-[10px] top-[142px] font-poppins-bold text-[14px] leading-[18px] text-lingua-text-primary">
Hello!
</Text>
<Text className="absolute right-[2px] top-[38px] font-poppins-bold text-[10px] leading-[13px] text-lingua-text-primary">
<Text className="absolute right-[2px] top-[42px] font-poppins-bold text-[14px] leading-[18px] text-lingua-text-primary">
¡Hola!
</Text>
<Text className="absolute right-[5px] top-[240px] font-poppins-bold text-[10px] leading-[13px] text-[#ff6b7a]">
<Text className="absolute right-[5px] top-[252px] font-poppins-bold text-[14px] leading-[18px] text-[#ff6b7a]">
你好!
</Text>

<Image
source={mascotWelcome}
source={images.mascotWelcome}
resizeMode="contain"
style={{ height: 245, marginTop: 91, width: 245 }}
style={{ height: 284, marginTop: 82, width: 284 }}
/>
</View>

<View className="flex-1" />

<Link href="/sign-up" asChild>
<Pressable className="mt-8 h-[57px] overflow-hidden rounded-[8px] bg-lingua-deep-purple px-8">
<Pressable className="mt-8 h-[68px] overflow-hidden rounded-[14px] bg-lingua-deep-purple px-8">
<View className="h-full flex-row items-center justify-center gap-2">
<Text className="font-poppins-bold text-[12px] leading-[16px] text-white">
<Text className="font-poppins-bold text-[22px] leading-[29px] text-white">
Get Started
</Text>
<Text className="font-poppins text-[24px] leading-[24px] text-white">
<Text className="font-poppins text-[32px] leading-[32px] text-white">
</Text>
</View>
Expand Down
121 changes: 121 additions & 0 deletions app/profile.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { useAuth, useClerk, useUser } from "@clerk/expo";
import { Ionicons } from "@expo/vector-icons";
import { Redirect, router } from "expo-router";
import { useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function ProfileScreen() {
const { isLoaded, isSignedIn } = useAuth();
const { signOut } = useClerk();
const { user } = useUser();
const insets = useSafeAreaInsets();
const [isSigningOut, setSigningOut] = useState(false);
const [signOutError, setSignOutError] = useState<string | null>(null);

const emailAddress = user?.primaryEmailAddress?.emailAddress ?? "";
const displayName = user?.fullName ?? user?.firstName ?? "Language Learner";

const handleSignOut = async () => {
if (isSigningOut) {
return;
}

setSigningOut(true);
setSignOutError(null);

try {
await signOut();
router.replace("/onboarding");
} catch (error) {
console.error("Failed to sign out", error);
setSignOutError("Unable to sign out. Please try again.");
} finally {
setSigningOut(false);
}
};
Comment thread
coderabbitai[bot] marked this conversation as resolved.

if (!isLoaded) {
return null;
}

if (!isSignedIn) {
return <Redirect href="/onboarding" />;
}

return (
<View
className="flex-1 bg-white px-[28px]"
style={{
paddingBottom: Math.max(insets.bottom, 24),
paddingTop: Math.max(insets.top, 18) + 12,
}}
>
<View className="mx-auto w-full max-w-[430px] flex-1">
<View className="flex-row items-center justify-between">
<Pressable
accessibilityLabel="Go back"
className="h-[44px] w-[44px] items-start justify-center"
onPress={() => router.back()}
>
<Ionicons name="chevron-back" size={32} color="#06112B" />
</Pressable>
<Text className="font-poppins-bold text-[20px] leading-[28px] text-lingua-text-primary">
Profile
</Text>
<View className="h-[44px] w-[44px]" />
</View>

<View className="mt-[38px] items-center">
{user?.imageUrl ? (
<Image
source={{ uri: user.imageUrl }}
resizeMode="cover"
className="h-[104px] w-[104px] rounded-full bg-[#f0f1f5]"
/>
) : (
<View className="h-[104px] w-[104px] items-center justify-center rounded-full bg-[#f0f1f5]">
<Ionicons name="person" size={48} color="#77819b" />
</View>
)}

<Text className="mt-[18px] text-center font-poppins-bold text-[26px] leading-[34px] text-lingua-text-primary">
{displayName}
</Text>
{emailAddress ? (
<Text className="mt-[6px] text-center font-poppins text-[15px] leading-[22px] text-[#69728c]">
{emailAddress}
</Text>
) : null}
</View>

<View className="mt-[38px] gap-[14px]">
<View className="rounded-[18px] border border-[#eef0f5] bg-white px-[20px] py-[18px]">
<Text className="font-poppins-medium text-[14px] leading-[20px] text-[#77819b]">
Account
</Text>
<Text className="mt-[8px] font-poppins-semibold text-[18px] leading-[26px] text-lingua-text-primary">
Signed in with Clerk
</Text>
</View>

<Pressable
className="h-[62px] flex-row items-center justify-center gap-[10px] rounded-[14px] bg-[#ff4b4b]"
disabled={isSigningOut}
onPress={handleSignOut}
>
<Ionicons name="log-out-outline" size={24} color="#ffffff" />
<Text className="font-poppins-bold text-[18px] leading-[25px] text-white">
{isSigningOut ? "Signing Out..." : "Sign Out"}
</Text>
</Pressable>
{signOutError ? (
<Text className="text-center font-poppins text-[14px] leading-[21px] text-[#ff4b4b]">
{signOutError}
</Text>
) : null}
</View>
</View>
</View>
);
}
Loading