React Native file upload with Supabase Storage

Summary

This tutorial shows how to build a React Native image-sharing or file-sharing app with Expo SDK49, Supabase Authentication, Expo Router v2, and Supabase Storage. It configures a Supabase project, turns off email confirmation for the tutorial, creates a private files bucket, and adds policies that constrain access to an authenticated user’s own folder. The React Native client stores sessions in AsyncStorage, uses the Image Picker and Expo File System, and initializes Supabase with environment-based URL and public key values. The resulting app supports account creation, sign-in, image selection, listing, download-based display, and deletion; resumable uploads are omitted because the attempted implementation produced files with zero bytes.

Takeaways

1. 1

   The storage policy permits access only when the files bucket is files and the first folder component matches auth.uid() converted to text.

2. 2

   AsyncStorage is supplied as the Supabase client’s auth storage, while detectSessionInUrl is set to false for the React Native environment.

3. 3

   Resumable uploads were left out because the attempted React Native implementation consistently resulted in uploaded files with zero bytes.