How to integrate Supabase Storage with your React Native Project

Since I’ll be discussing React Native with Supabase Storage in a number of upcoming tutorials, I’ve decided to start with a quick guide on setting up Supabase Storage in React Native projects.

First off, if you’re still new to Supabase, here’s a quick overview:

Supabase is an open-source platform that allows developers to build scalable applications with less overhead. It provides a set of tools and services for building modern web applications with features like authentication, real-time database, serverless functions, and more.

Key components of Supabase include:

1. Storage: Supabase offers secure file storage for applications, allowing developers to store and serve files such as images, videos, and documents.
2. Database: Supabase offers a PostgreSQL database as a service, which is scalable, reliable, and fully-managed.
3. Authentication: Supabase provides user authentication services, allowing developers to easily add authentication and authorization features to their applications.
4. Real-time: Supabase includes real-time capabilities, enabling developers to build applications with live updates and real-time collaboration.
5. Serverless Functions: Supabase supports serverless functions, allowing developers to run backend logic without managing servers.

Overall, Supabase aims to simplify the development process by providing developers with a comprehensive set of tools and services, all within a single platform.

Let’s begin!

Setting up new project

First, set up a basic React Native project.

npx create-expo-app MyNewSupabaseProject

cd MyNewSupabaseProject
npx expo start

The above example is the package installer for the React Native Expo service. If you wish to proceed with a non-Expo project, visit the installation docs here.

Next, we’ll install Supabase in the project we just created:

npm install @supabase/supabase-js

Finally, we’ll need to install the following polyfill package:

npm install react-native-url-polyfill

react-native-url-polyfill is a package that provides a polyfill for the URL and URLSearchParams global objects in React Native. The react-native-url-polyfill is required in the Supabase client file for React Native applications because the standard URL and URLSearchParams APIs, which are used by Supabase (and many other web technologies) for parsing and constructing URLs, are not natively available in React Native’s JavaScript environment. This polyfill adds support for these APIs, ensuring that Supabase and other libraries relying on these web standards can operate correctly in a React Native application. Without this polyfill, we might encounter errors or unexpected behavior when using Supabase to interact with our backend, as it heavily relies on these APIs for tasks like constructing request URLs and handling query parameters.

Setting up Supabase Client

If you don’t already have a Supabase account and project, set those up now. Then, navigate to Project Settings in the Dashboard and click the API tab in the side bar of project settings:

Under API Settings in the project settings page, locate and copy the project URL and the anonymous project API key:

In your project, create a new file in the project root called .env. This will serve as a simple configuration file used to store environment variables. These are often used to store sensitive information such as API keys, database credentials, or any other configuration information that should not be included directly in the code for security reasons.

Inside the .env file, add the following variables, along with the project URL and anonymous project API key you copied from the API settings page in the dashboard:

EXPO_PUBLIC_SUPABASE_URL=<yourprojecturl>
EXPO_PUBLIC_SUPABASE_ANON_KEY=<youranonkey>

Next, create another file in the project root called supabaseClient.js. Import the polyfill and Supabase packages into the file. When importing the Supabase package, we’ll also need expose the createClient() function. createClient() is a function provided by the @supabase/supabase-js library in JavaScript. It is used to create a new Supabase client, which can then be used to interact with your Supabase database. createClient() function takes the project URL and anonymous project API key as arguments, before being exported. The supabaseClient.js file should ultimately look like this:

import 'react-native-url-polyfill/auto'
import { createClient } from '@supabase/supabase-js'

const url = process.env.EXPO_PUBLIC_SUPABASE_URL
const key = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY
export const supabase = createClient(url, key)

Next, we’ll import the Supabase client into App.js, in order to give our app access to Supabase features, including Storage:

import { supabase } from "./supabaseClient.js";

Now that our app has access to the Supabase client, let’s finish setting up Supabase Storage.

Supabase Storage

Back in the Supabase dashboard, we’ll need to set up a new storage bucket for storing the uploaded files. In the dashboard side bar, click Storage:

Then, in the Storage side bar, click New bucket. Add a new name for your bucket, then set the Public bucket toggle to true. Click save when done:

Back in the Storage side bar, click Policies. Under Storage Policies, locate the bucket we just created. Click New policy:

In the policy modal, click Get started quickly: Create a policy from a template:

In the template sidebar in the modal, select Allow access to JPG images in the public folder to anonymous users and click Use this template:

On the next page, under Allowed operation, check the insert box to enable inserting of images into Storage, then select Review:

On the next page, review the policy, then click Save policy:

Your storage bucket should now be ready to receive uploaded files from your React Native app!

That should do it for setting up Supabase Storage! The next step is to build an actual app to upload images to Storage. Here’s a tutorial I’ve put together for uploading captured images. Check it out!

Thanks for following along! Comment below if you have any questions. Be sure to follow me here on Medium, as well as on X (Formerly Twitter)! Stay tuned for more posts on the horizon!