diff --git a/apps/docs/content/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx index ff35d7283e3..4a0176049f3 100644 --- a/apps/docs/content/guides/auth/quickstarts/react-native.mdx +++ b/apps/docs/content/guides/auth/quickstarts/react-native.mdx @@ -54,7 +54,7 @@ hideToc: true ```bash Terminal - cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-elements react-native-url-polyfill + cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @rneui/themed react-native-url-polyfill ``` @@ -119,7 +119,7 @@ hideToc: true 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('') diff --git a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx index 2cb98f486c0..9e303589d83 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx @@ -34,7 +34,7 @@ cd expo-user-management Then let's install the additional dependencies: [supabase-js](https://github.com/supabase/supabase-js) ```bash -npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-elements react-native-url-polyfill +npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @rneui/themed react-native-url-polyfill ``` Now let's create a helper file to initialize the Supabase client. @@ -83,7 +83,7 @@ These variables are safe to expose in your Expo app since Supabase has ```bash npm install @supabase/supabase-js - npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill + npm install @rneui/themed @react-native-async-storage/async-storage react-native-url-polyfill npm install aes-js react-native-get-random-values npx expo install expo-secure-store ``` @@ -169,7 +169,7 @@ Users would be able to sign in with their email and password. import React, { useState } from 'react' import { Alert, StyleSheet, View, AppState } from 'react-native' import { supabase } from '../lib/supabase' -import { Button, Input } from 'react-native-elements' +import { Button, Input } from '@rneui/themed' // Tells Supabase Auth to continuously refresh the session automatically if // the app is in the foreground. When this is added, you will continue to receive @@ -281,7 +281,7 @@ Let's create a new component for that called `Account.tsx`. 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' export default function Account({ session }: { session: Session }) { diff --git a/apps/www/_blog/2023-11-16-react-native-authentication.mdx b/apps/www/_blog/2023-11-16-react-native-authentication.mdx index 2c14aac8ba7..54c9f5c89f7 100644 --- a/apps/www/_blog/2023-11-16-react-native-authentication.mdx +++ b/apps/www/_blog/2023-11-16-react-native-authentication.mdx @@ -81,7 +81,7 @@ Install the necessary dependencies in the root of your Expo project: ```bash npm install @supabase/supabase-js -npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill +npm install @rneui/themed @react-native-async-storage/async-storage react-native-url-polyfill npm install aes-js react-native-get-random-values npx expo install expo-secure-store ``` @@ -162,10 +162,10 @@ const supabase = createClient(supabaseUrl, supabaseAnonKey, { ## Email and password authentication in React Native -Once we've set up the storage mechanism, building an email and password sign in flow becomes pretty straight forward. Install [`react-native-elements`](https://reactnativeelements.com/) to get some nice cross platform button and input fields: +Once we've set up the storage mechanism, building an email and password sign in flow becomes pretty straight forward. Install [`@rneui/themed`](https://reactnativeelements.com/) to get some nice cross platform button and input fields: ```bash -npm install react-native-elements +npm install @rneui/themed ``` Set up a simple email form component: @@ -174,7 +174,7 @@ Set up a simple email form component: 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 EmailForm() { const [email, setEmail] = useState('') diff --git a/examples/user-management/expo-push-notifications/components/Account.tsx b/examples/user-management/expo-push-notifications/components/Account.tsx index 38ab2b4276a..398ab928e2a 100644 --- a/examples/user-management/expo-push-notifications/components/Account.tsx +++ b/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 }) { - setUsername(text)} - /> + setUsername(text)} /> - setWebsite(text)} - /> + setWebsite(text)} />