creating custom sign in and sign up pages because apparently the clerk components only work on web lol

app/(auth)/sign-in.tsx

@@ -1,22 +1,63 @@
-import { SignIn } from '@clerk/clerk-react'
+import { useSignIn } from '@clerk/clerk-expo'
-import { dark } from '@clerk/themes'
+import { router } from 'expo-router'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+
+export default function LoginScreen() {
+    const { signIn, setActive, isLoaded } = useSignIn()
+    const [username, setUsername] = React.useState('')
+    const [password, setPassword] = React.useState('')
+
+    async function handleSignIn() {
+        if (!isLoaded) return
+
+        try {
+            const signInAttempt = await signIn.create({
+                identifier: username,
+                password
+            })
+
+            if (signInAttempt.status === 'complete') {
+                await setActive({ session: signInAttempt.createdSessionId })
+                router.replace('/')
+            }
+        } catch (e) {
+            console.log(JSON.stringify(e))
+        }
+    }
 
-export default function SignInScreen() {
     return (
         <View style={styles.container}>
-            <SignIn
+            <Text style={styles.text}>Login</Text>
-                appearance={{
+            <View style={{ width: '80%', marginTop: 20 }}>
-                    theme: dark,
+                <Text style={styles.textlabel}>Username</Text>
-                    variables: {
+                <TextInput style={styles.input} value={username} placeholder='Enter email' onChangeText={setUsername} />
-                        colorPrimary: '#747b83ff',
+                <Text style={styles.textlabel}>Password</Text>
-                        colorBackground: '#25292e',
+                <TextInput
-                        colorInput: '#383e46ff'
+                    style={styles.input}
-                    }
+                    value={password}
-                }}
+                    placeholder='Enter password'
-                signUpUrl='/sign-up'
+                    secureTextEntry
+                    onChangeText={setPassword}
                 />
+                <TouchableOpacity
+                    style={styles.button}
+                    onPress={() => {
+                        handleSignIn()
+                    }}
+                >
+                    <Text style={{ color: '#fff', fontWeight: 'bold' }}>Login</Text>
+                </TouchableOpacity>
+                <Text style={styles.textCenter}>Don't have an account?</Text>
+                <TouchableOpacity
+                    style={styles.signup}
+                    onPress={() => {
+                        router.navigate('/sign-up')
+                    }}
+                >
+                    <Text style={{ color: '#fff' }}>Sign Up</Text>
+                </TouchableOpacity>{' '}
+            </View>
         </View>
     )
 }
@@ -25,7 +66,35 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#25292e',
-        padding: 5,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    text: {
+        color: '#fff'
+    },
+    textCenter: {
+        color: '#ffffff',
+        alignSelf: 'center',
+        marginBottom: 6
+    },
+    textlabel: {
+        color: '#fff',
+        marginBottom: 3
+    },
+    input: {
+        backgroundColor: '#fff',
+        borderRadius: 5,
+        padding: 10,
+        marginBottom: 15
+    },
+    button: {
+        backgroundColor: '#1e90ff',
+        padding: 12,
+        borderRadius: 5,
+        alignItems: 'center',
+        marginBottom: 15
+    },
+    signup: {
         alignItems: 'center'
     }
 })

app/(auth)/sign-in2.tsx

@@ -0,0 +1,31 @@
+import { SignIn } from '@clerk/clerk-react'
+import { dark } from '@clerk/themes'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default function SignInScreen() {
+    return (
+        <View style={styles.container}>
+            <SignIn
+                appearance={{
+                    theme: dark,
+                    variables: {
+                        colorPrimary: '#747b83ff',
+                        colorBackground: '#25292e',
+                        colorInput: '#383e46ff'
+                    }
+                }}
+                signUpUrl='/sign-up'
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 5,
+        alignItems: 'center'
+    }
+})

app/(auth)/sign-up.tsx

@@ -1,22 +1,72 @@
-import { SignUp } from '@clerk/clerk-expo/web'
+import { useSignUp } from '@clerk/clerk-expo'
-import { dark } from '@clerk/themes'
+import { router } from 'expo-router'
-import * as React from 'react'
+import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
 
 export default function SignUpScreen() {
+    const { signUp, setActive, isLoaded } = useSignUp()
+    const [fname, setFname] = React.useState('')
+    const [lname, setLname] = React.useState('')
+    const [email, setUsername] = React.useState('')
+    const [password, setPassword] = React.useState('')
+
+    async function handleSignUp() {
+        if (!isLoaded) return
+
+        try {
+            // Start Auth
+            await signUp.create({
+                firstName: fname,
+                lastName: lname,
+                emailAddress: email,
+                password
+            })
+            // Set confirmation
+            await signUp.prepareEmailAddressVerification({
+                strategy: 'email_link',
+                redirectUrl: '/'
+            })
+        } catch (e) {
+            console.log(JSON.stringify(e))
+        }
+    }
+
     return (
         <View style={styles.container}>
-            <SignUp
+            <Text style={styles.text}>Create an account</Text>
-                appearance={{
+            <View style={{ width: '80%', marginTop: 20 }}>
-                    theme: dark,
+                <Text style={styles.textlabel}>First name</Text>
-                    variables: {
+                <TextInput style={styles.input} value={fname} placeholder='Enter first name' onChangeText={setFname} />
-                        colorPrimary: '#747b83ff',
+                <Text style={styles.textlabel}>Last name</Text>
-                        colorBackground: '#25292e',
+                <TextInput style={styles.input} value={lname} placeholder='Enter last name' onChangeText={setLname} />
-                        colorInput: '#383e46ff'
+                <Text style={styles.textlabel}>Email</Text>
-                    }
+                <TextInput style={styles.input} value={email} placeholder='Enter email' onChangeText={setUsername} />
-                }}
+                <Text style={styles.textlabel}>Password</Text>
-                signInUrl='/sign-in'
+                <TextInput
+                    style={styles.input}
+                    value={password}
+                    placeholder='Enter password'
+                    secureTextEntry
+                    onChangeText={setPassword}
                 />
+                <TouchableOpacity
+                    style={styles.button}
+                    onPress={() => {
+                        handleSignUp()
+                    }}
+                >
+                    <Text style={{ color: '#fff', fontWeight: 'bold' }}>Sign Up</Text>
+                </TouchableOpacity>
+                <Text style={styles.textCenter}>Already have an account?</Text>
+                <TouchableOpacity
+                    style={styles.signIn}
+                    onPress={() => {
+                        router.navigate('/sign-in')
+                    }}
+                >
+                    <Text style={{ color: '#fff' }}>Sign In</Text>
+                </TouchableOpacity>{' '}
+            </View>
         </View>
     )
 }
@@ -25,7 +75,35 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#25292e',
-        padding: 5,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    text: {
+        color: '#fff'
+    },
+    textCenter: {
+        color: '#ffffff',
+        alignSelf: 'center',
+        marginBottom: 6
+    },
+    textlabel: {
+        color: '#fff',
+        marginBottom: 3
+    },
+    input: {
+        backgroundColor: '#fff',
+        borderRadius: 5,
+        padding: 10,
+        marginBottom: 15
+    },
+    button: {
+        backgroundColor: '#1e90ff',
+        padding: 12,
+        borderRadius: 5,
+        alignItems: 'center',
+        marginBottom: 15
+    },
+    signIn: {
         alignItems: 'center'
     }
 })

app/(auth)/sign-up2.tsx

@@ -0,0 +1,31 @@
+import { SignUp } from '@clerk/clerk-expo/web'
+import { dark } from '@clerk/themes'
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+export default function SignUpScreen() {
+    return (
+        <View style={styles.container}>
+            <SignUp
+                appearance={{
+                    theme: dark,
+                    variables: {
+                        colorPrimary: '#747b83ff',
+                        colorBackground: '#25292e',
+                        colorInput: '#383e46ff'
+                    }
+                }}
+                signInUrl='/sign-in'
+            />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#25292e',
+        padding: 5,
+        alignItems: 'center'
+    }
+})