Use Supabase with Expo React Native

<$Partial path="quickstart_db_setup.mdx" />

3. Create an Expo app

Create a minimal Expo app using the create-expo-app command with the blank TypeScript template.

npx create-expo-app my-app --template blank-typescript

4. Install Supabase's Agent Skills (optional)

Supabase's Agent Skills is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.

Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.

To install, run the following command in the root of your project:

npx skills add supabase/agent-skills

5. 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 session storage and URL handling.

cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill expo-sqlite

6. Declare Supabase environment variables

Create a .env file in the root of your project and populate it with your Supabase connection variables that you can get from the helper below, or from the project Connect panel.

Expo requires environment variables to be prefixed with EXPO_PUBLIC_ to be accessible in your app code.

EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>

<$Partial path="api_settings.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} />

7. 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 Expo's localStorage polyfill to persist authentication sessions.

import 'react-native-url-polyfill/auto'

import { createClient } from '@supabase/supabase-js'

import 'expo-sqlite/localStorage/install'

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL
const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY

export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
  auth: {
    storage: localStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})

8. 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.

import { useEffect, useState } from 'react'
import { FlatList, StyleSheet, Text, View } 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',
  },
})

9. 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.

npx expo start

Next steps

• Set up Auth for your app
• Insert more data into your database
• Upload and serve static files using Storage