chore: update example dependencies. (#26381)

* chore: update example dependencies.

* chore: bump expo.

examples/user-management/expo-push-notifications/components/Account.tsx

@@ -1,45 +1,45 @@
-import { useState, useEffect } from "react";
-import { supabase } from "../lib/supabase";
-import { StyleSheet, View, Alert } from "react-native";
-import { Button, Input } from "react-native-elements";
-import { Session } from "@supabase/supabase-js";
-import Push from "./Push";
+import { useState, useEffect } from 'react'
+import { supabase } from '../lib/supabase'
+import { StyleSheet, View, Alert } from 'react-native'
+import { Button, Input } from '@rneui/themed'
+import { Session } from '@supabase/supabase-js'
+import Push from './Push'
 
 export default function Account({ session }: { session: Session }) {
-  const [loading, setLoading] = useState(true);
-  const [username, setUsername] = useState("");
-  const [website, setWebsite] = useState("");
-  const [avatarUrl, setAvatarUrl] = useState("");
+  const [loading, setLoading] = useState(true)
+  const [username, setUsername] = useState('')
+  const [website, setWebsite] = useState('')
+  const [avatarUrl, setAvatarUrl] = useState('')
 
   useEffect(() => {
-    if (session) getProfile();
-  }, [session]);
+    if (session) getProfile()
+  }, [session])
 
   async function getProfile() {
     try {
-      setLoading(true);
-      if (!session?.user) throw new Error("No user on the session!");
+      setLoading(true)
+      if (!session?.user) throw new Error('No user on the session!')
 
       const { data, error, status } = await supabase
-        .from("profiles")
+        .from('profiles')
         .select(`username, website, avatar_url`)
-        .eq("id", session?.user.id)
-        .single();
+        .eq('id', session?.user.id)
+        .single()
       if (error && status !== 406) {
-        throw error;
+        throw error
       }
 
       if (data) {
-        setUsername(data.username);
-        setWebsite(data.website);
-        setAvatarUrl(data.avatar_url);
+        setUsername(data.username)
+        setWebsite(data.website)
+        setAvatarUrl(data.avatar_url)
       }
     } catch (error) {
       if (error instanceof Error) {
-        Alert.alert(error.message);
+        Alert.alert(error.message)
       }
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
   }
 
@@ -48,13 +48,13 @@ export default function Account({ session }: { session: Session }) {
     website,
     avatar_url,
   }: {
-    username: string;
-    website: string;
-    avatar_url: string;
+    username: string
+    website: string
+    avatar_url: string
   }) {
     try {
-      setLoading(true);
-      if (!session?.user) throw new Error("No user on the session!");
+      setLoading(true)
+      if (!session?.user) throw new Error('No user on the session!')
 
       const updates = {
         id: session?.user.id,
@@ -62,19 +62,19 @@ export default function Account({ session }: { session: Session }) {
         website,
         avatar_url,
         updated_at: new Date(),
-      };
+      }
 
-      const { error } = await supabase.from("profiles").upsert(updates);
+      const { error } = await supabase.from('profiles').upsert(updates)
 
       if (error) {
-        throw error;
+        throw error
       }
     } catch (error) {
       if (error instanceof Error) {
-        Alert.alert(error.message);
+        Alert.alert(error.message)
       }
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
   }
 
@@ -84,26 +84,16 @@ export default function Account({ session }: { session: Session }) {
         <Input label="Email" value={session?.user?.email} disabled />
       </View>
       <View style={styles.verticallySpaced}>
-        <Input
-          label="Username"
-          value={username || ""}
-          onChangeText={(text) => setUsername(text)}
-        />
+        <Input label="Username" value={username || ''} onChangeText={(text) => setUsername(text)} />
       </View>
       <View style={styles.verticallySpaced}>
-        <Input
-          label="Website"
-          value={website || ""}
-          onChangeText={(text) => setWebsite(text)}
-        />
+        <Input label="Website" value={website || ''} onChangeText={(text) => setWebsite(text)} />
       </View>
 
       <View style={[styles.verticallySpaced, styles.mt20]}>
         <Button
-          title={loading ? "Loading ..." : "Update"}
-          onPress={() =>
-            updateProfile({ username, website, avatar_url: avatarUrl })
-          }
+          title={loading ? 'Loading ...' : 'Update'}
+          onPress={() => updateProfile({ username, website, avatar_url: avatarUrl })}
           disabled={loading}
         />
       </View>
@@ -116,7 +106,7 @@ export default function Account({ session }: { session: Session }) {
         <Push session={session} />
       </View>
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -127,9 +117,9 @@ const styles = StyleSheet.create({
   verticallySpaced: {
     paddingTop: 4,
     paddingBottom: 4,
-    alignSelf: "stretch",
+    alignSelf: 'stretch',
   },
   mt20: {
     marginTop: 20,
   },
-});
+})

examples/user-management/expo-push-notifications/components/Auth.tsx

@@ -1,38 +1,37 @@
-import React, { useState } from "react";
-import { Alert, StyleSheet, View } from "react-native";
-import { supabase } from "../lib/supabase";
-import { Button, Input } from "react-native-elements";
+import React, { useState } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { supabase } from '../lib/supabase'
+import { Button, Input } from '@rneui/themed'
 
 export default function Auth() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
 
   async function signInWithEmail() {
-    setLoading(true);
+    setLoading(true)
     const { error } = await supabase.auth.signInWithPassword({
       email: email,
       password: password,
-    });
+    })
 
-    if (error) Alert.alert(error.message);
-    setLoading(false);
+    if (error) Alert.alert(error.message)
+    setLoading(false)
   }
 
   async function signUpWithEmail() {
-    setLoading(true);
+    setLoading(true)
     const {
       data: { session },
       error,
     } = await supabase.auth.signUp({
       email: email,
       password: password,
-    });
+    })
 
-    if (error) Alert.alert(error.message);
-    if (!session)
-      Alert.alert("Please check your inbox for email verification!");
-    setLoading(false);
+    if (error) Alert.alert(error.message)
+    if (!session) Alert.alert('Please check your inbox for email verification!')
+    setLoading(false)
   }
 
   return (
@@ -40,40 +39,32 @@ export default function Auth() {
       <View style={[styles.verticallySpaced, styles.mt20]}>
         <Input
           label="Email"
-          leftIcon={{ type: "font-awesome", name: "envelope" }}
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
           onChangeText={(text) => setEmail(text)}
           value={email}
           placeholder="email@address.com"
-          autoCapitalize={"none"}
+          autoCapitalize={'none'}
         />
       </View>
       <View style={styles.verticallySpaced}>
         <Input
           label="Password"
-          leftIcon={{ type: "font-awesome", name: "lock" }}
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
           onChangeText={(text) => setPassword(text)}
           value={password}
           secureTextEntry={true}
           placeholder="Password"
-          autoCapitalize={"none"}
+          autoCapitalize={'none'}
         />
       </View>
       <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Button
-          title="Sign in"
-          disabled={loading}
-          onPress={() => signInWithEmail()}
-        />
+        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
       </View>
       <View style={styles.verticallySpaced}>
-        <Button
-          title="Sign up"
-          disabled={loading}
-          onPress={() => signUpWithEmail()}
-        />
+        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
       </View>
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -84,9 +75,9 @@ const styles = StyleSheet.create({
   verticallySpaced: {
     paddingTop: 4,
     paddingBottom: 4,
-    alignSelf: "stretch",
+    alignSelf: 'stretch',
   },
   mt20: {
     marginTop: 20,
   },
-});
+})

examples/user-management/expo-push-notifications/package.json

@@ -9,24 +9,24 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@rneui/themed": "^4.0.0-rc.8",
+    "@shopify/flash-list": "1.6.4",
     "@supabase/supabase-js": "^2.38.2",
-    "expo": "~49.0.15",
-    "expo-status-bar": "~1.6.0",
+    "expo": "~51.0.8",
+    "expo-constants": "~16.0.1",
+    "expo-dev-client": "~4.0.14",
+    "expo-device": "~6.0.2",
+    "expo-notifications": "~0.28.3",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-elements": "^3.4.3",
-    "react-native-url-polyfill": "^2.0.0",
-    "@shopify/flash-list": "1.4.3",
-    "expo-notifications": "~0.20.1",
-    "expo-device": "~5.4.0",
-    "expo-constants": "~14.4.2",
-    "expo-dev-client": "~2.4.12"
+    "react-native": "0.74.1",
+    "react-native-url-polyfill": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.14",
-    "typescript": "^5.1.3"
+    "@babel/core": "^7.24.0",
+    "@types/react": "~18.2.79",
+    "typescript": "~5.3.3"
   },
   "private": true
 }

examples/user-management/expo-user-management/components/Account.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { supabase } from '../lib/supabase'
 import { StyleSheet, View, Alert } from 'react-native'
-import { Button, Input } from 'react-native-elements'
+import { Button, Input } from '@rneui/themed'
 import { Session } from '@supabase/supabase-js'
 import Avatar from './Avatar'
 
@@ -81,13 +81,13 @@ export default function Account({ session }: { session: Session }) {
   return (
     <View>
       <View>
-        <Avatar 
+        <Avatar
           size={200}
-          url={avatarUrl} 
+          url={avatarUrl}
           onUpload={(url: string) => {
             setAvatarUrl(url)
             updateProfile({ username, website, avatar_url: url })
-          }} 
+          }}
         />
       </View>
       <View style={[styles.verticallySpaced, styles.mt20]}>

examples/user-management/expo-user-management/components/Auth.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Alert, StyleSheet, View } from 'react-native'
 import { supabase } from '../lib/supabase'
-import { Button, Input } from 'react-native-elements'
+import { Button, Input } from '@rneui/themed'
 
 export default function Auth() {
   const [email, setEmail] = useState('')

examples/user-management/expo-user-management/package.json

@@ -10,27 +10,25 @@
     "format": "prettier --write \"**/*.{js,json,md,ts,tsx,jsx,css}\""
   },
   "dependencies": {
-    "@expo/webpack-config": "^18.0.3",
-    "@react-native-async-storage/async-storage": "^1.17.9",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.0.4",
-    "expo": "~46.0.21",
-    "expo-splash-screen": "~0.16.2",
-    "expo-status-bar": "~1.4.0",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.9",
+    "expo": "~51.0.8",
+    "expo-splash-screen": "~0.27.4",
+    "expo-status-bar": "~1.12.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.1",
     "react-native-document-picker": "^8.1.1",
-    "react-native-elements": "^3.4.2",
     "react-native-url-polyfill": "^1.3.0",
-    "react-native-web": "~0.18.7"
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@types/react": "^18.0.17",
+    "@babel/core": "^7.24.0",
+    "@types/react": "~18.2.79",
     "@types/react-native": "^0.69.5",
-    "@types/react-native-elements": "^0.18.0",
     "prettier": "^2.7.1",
-    "typescript": "^4.7.4"
+    "typescript": "~5.3.3"
   },
   "private": true
 }