diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 12e13193f12..734c7e55a01 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -355,6 +355,10 @@ export const gettingstarted: NavMenuConstant = {
name: 'Hono',
url: '/guides/getting-started/quickstarts/hono',
},
+ {
+ name: 'Expo React Native',
+ url: '/guides/getting-started/quickstarts/expo-react-native',
+ },
{
name: 'Flutter',
url: '/guides/getting-started/quickstarts/flutter',
diff --git a/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
new file mode 100644
index 00000000000..f4fd73b4cb6
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
@@ -0,0 +1,195 @@
+---
+title: 'Use Supabase with Expo React Native'
+subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Expo app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---
+
+
+
+
+
+ <$Partial path="quickstart_db_setup.mdx" />
+
+
+
+
+
+
+
+ Create a minimal Expo app using the `create-expo-app` command with the blank TypeScript template.
+
+ <$Partial path="uiLibCta.mdx" />
+
+
+
+
+
+ ```bash name=Terminal
+ npx create-expo-app my-app --template blank-typescript
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use the `@supabase/supabase-js` client library which provides a convenient interface for working with Supabase from a React Native app.
+
+ Navigate to the Expo app and install `supabase-js` along with the required dependencies for secure storage and URL handling.
+
+
+
+
+
+ ```bash name=Terminal
+ cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
+ ```
+
+
+
+
+
+
+
+
+ Create a `.env` file in the root of your project and populate it with your Supabase connection variables.
+
+ Expo requires environment variables to be prefixed with `EXPO_PUBLIC_` to be accessible in your app code.
+
+
+
+
+
+
+
+
+
+ ```text name=.env
+ EXPO_PUBLIC_SUPABASE_URL=
+ EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
+ ```
+ <$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
+
+
+
+
+
+
+
+
+ Create a helper file at `lib/supabase.ts` to initialize the Supabase client using the environment variables.
+
+ The code below uses [AsyncStorage](https://www.npmjs.com/package/@react-native-async-storage/async-storage) to persist the user session in your app.
+
+
+
+
+
+ ```ts name=lib/supabase.ts
+ import 'react-native-url-polyfill/auto'
+ import { createClient } from '@supabase/supabase-js'
+ import AsyncStorage from '@react-native-async-storage/async-storage'
+
+ const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL
+ const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY
+
+ export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+ auth: {
+ storage: AsyncStorage,
+ autoRefreshToken: true,
+ persistSession: true,
+ detectSessionInUrl: false,
+ },
+ })
+ ```
+
+
+
+
+
+
+
+
+ Replace the contents of `App.tsx` with the following code to fetch and display the instruments from your database.
+
+ Use `useEffect` to fetch the data when the component mounts and display the query result using React Native components.
+
+
+
+
+ ```tsx name=App.tsx
+ import { useEffect, useState } from 'react'
+ import { StyleSheet, View, FlatList, Text } from 'react-native'
+ import { supabase } from './lib/supabase'
+
+ export default function App() {
+ const [instruments, setInstruments] = useState([])
+
+ useEffect(() => {
+ getInstruments()
+ }, [])
+
+ async function getInstruments() {
+ const { data } = await supabase.from('instruments').select()
+ setInstruments(data)
+ }
+
+ return (
+
+ item.id.toString()}
+ renderItem={({ item }) => (
+ {item.name}
+ )}
+ />
+
+ )
+ }
+
+ const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ paddingTop: 50,
+ paddingHorizontal: 16,
+ },
+ item: {
+ padding: 16,
+ borderBottomWidth: 1,
+ borderBottomColor: '#ccc',
+ },
+ })
+ ```
+
+
+
+
+
+
+
+
+ Run the development server and scan the QR code with the Expo Go app on your phone, or press `i` for iOS simulator or `a` for Android emulator.
+
+
+
+
+
+ ```bash name=Terminal
+ npx expo start
+ ```
+
+
+
+
+
+
+
+## Next steps
+
+- Set up [Auth](/docs/guides/auth) for your app
+- [Insert more data](/docs/guides/database/import-data) into your database
+- Upload and serve static files using [Storage](/docs/guides/storage)
diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts
index 830fb594ca2..1b3be0840f3 100644
--- a/apps/docs/next-env.d.ts
+++ b/apps/docs/next-env.d.ts
@@ -1,6 +1,5 @@
///
///
-///
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.