mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
docs: Add Expo quick start guide (#40744)
* feat: Add an Expo quick start * feat: Add Expo quick start to the side menu * Add new partials --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
This commit is contained in:
TylerandChris Chinchilla authored and GitHub committed
1 parent
97fa071845
commit
e8694e4e0d
3 files changed
+199
-1
No files matched your search
@@ -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',
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
<StepHikeCompact>
|
||||
|
||||
<StepHikeCompact.Step step={1}>
|
||||
|
||||
<$Partial path="quickstart_db_setup.mdx" />
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={2}>
|
||||
|
||||
<StepHikeCompact.Details title="Create an Expo app">
|
||||
|
||||
Create a minimal Expo app using the `create-expo-app` command with the blank TypeScript template.
|
||||
|
||||
<$Partial path="uiLibCta.mdx" />
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash name=Terminal
|
||||
npx create-expo-app my-app --template blank-typescript
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={3}>
|
||||
<StepHikeCompact.Details title="Install the Supabase client library">
|
||||
|
||||
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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash name=Terminal
|
||||
cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={4}>
|
||||
<StepHikeCompact.Details title="Declare Supabase Environment Variables">
|
||||
|
||||
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.
|
||||
|
||||
<ProjectConfigVariables variable="url" />
|
||||
<ProjectConfigVariables variable="publishable" />
|
||||
<ProjectConfigVariables variable="anon" />
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```text name=.env
|
||||
EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
|
||||
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
|
||||
```
|
||||
<$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "" }} />
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={5}>
|
||||
<StepHikeCompact.Details title="Initialize the Supabase client">
|
||||
|
||||
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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```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,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={6}>
|
||||
<StepHikeCompact.Details title="Query data from the app">
|
||||
|
||||
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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```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 (
|
||||
<View style={styles.container}>
|
||||
<FlatList
|
||||
data={instruments}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
renderItem={({ item }) => (
|
||||
<Text style={styles.item}>{item.name}</Text>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
paddingTop: 50,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
item: {
|
||||
padding: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#ccc',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
<StepHikeCompact.Step step={7}>
|
||||
<StepHikeCompact.Details title="Start the app">
|
||||
|
||||
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.
|
||||
|
||||
</StepHikeCompact.Details>
|
||||
|
||||
<StepHikeCompact.Code>
|
||||
|
||||
```bash name=Terminal
|
||||
npx expo start
|
||||
```
|
||||
|
||||
</StepHikeCompact.Code>
|
||||
|
||||
</StepHikeCompact.Step>
|
||||
|
||||
</StepHikeCompact>
|
||||
|
||||
## 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)
|
||||
Vendored
-1
@@ -1,6 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
/// <reference path="./.next/types/routes.d.ts" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
Reference in new issue
Block a user