Setting Up React Native with Supabase: A Step-by-Step Guide

If you're looking to build a React Native app with a backend that’s easy to set up and scalable, Supabase is a fantastic choice. Supabase is an open-source alternative to Firebase, offering features like authentication, database storage, and real-time subscriptions. In this guide, I’ll walk you through setting up a React Native project with Supabase. Let’s get started!

Prerequisites

Before we dive in, make sure you have the following installed:

1. Node.js (v16 or higher)
2. React Native CLI or Expo CLI (I’ll be using Expo for this guide)
3. Git (for version control)
4. A Supabase account (it’s free to sign up)

Step 1: Create a New React Native Project

First, let’s create a new React Native project using Expo. Open your terminal and run:

npx create-expo-app@latest MySupabaseApp
cd MySupabaseApp

This will create a new React Native project called MySupabaseApp. If you prefer using the React Native CLI, you can do that too, but Expo makes things a bit easier for beginners.

Step 2: Install Required Dependencies

We’ll need a few packages to integrate Supabase and NativeWind into our project. Run the following commands:

npx expo install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
npm install @supabase/supabase-js nativewind
npm install --save-dev tailwindcss

Here’s what each package does:

• @react-navigation/native and @react-navigation/stack: For navigation in your app.
• react-native-screens and react-native-safe-area-context: Required dependencies for React Navigation.
• @supabase/supabase-js: The Supabase client library.
• nativewind: A utility-first CSS framework for React Native, similar to Tailwind CSS.
• tailwindcss: Required to configure NativeWind.

Step 3: Set Up NativeWind

NativeWind allows you to use Tailwind-like utility classes in your React Native components. Let’s configure it.

Generate a tailwind.config.js file:

npx tailwindcss init

Open the tailwind.config.js file and configure it to include your project files:

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a global.css file in the root of your project and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the global.css file in your App.js:

import './global.css';

Now, you can use NativeWind classes in your components!

Step 4: Set Up Supabase

Create a new Supabase Project or sign up if you haven’t already:

1. Create a new project and wait for it to initialize.
2. Once your project is ready, navigate to the Project Settings and copy the Project URL and Public API Key.

Initialize Supabase in Your App:

Create a new file called supabase.js in the root of your project:

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_PUBLIC_API_KEY';

export const supabase = createClient(supabaseUrl, supabaseKey);

Replace `YOUR_SUPABASE_URL` and `YOUR_PUBLIC_API_KEY` with the values from your Supabase project.

Step 5: Build a Simple Authentication Screen

Let’s create a simple login screen to test Supabase authentication.

Create a new file called LoginScreen.js:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { supabase } from './supabase';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleLogin = async () => {
    setLoading(true);
    setError('');

    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      setError(error.message);
    } else {
      console.log('Logged in successfully!');
    }

    setLoading(false);
  };

  return (
    <View className="flex-1 justify-center p-4 bg-gray-100">
      <Text className="text-2xl font-bold mb-4 text-center">Login</Text>
      <TextInput
        className="bg-white p-2 mb-4 rounded"
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        className="bg-white p-2 mb-4 rounded"
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      {error && <Text className="text-red-500 mb-4">{error}</Text>}
      <Button
        title={loading ? 'Loading...' : 'Login'}
        onPress={handleLogin}
        disabled={loading}
      />
    </View>
  );
};

export default LoginScreen;

Update your App.js to use the LoginScreen:

import React from 'react';
import { SafeAreaView } from 'react-native';
import LoginScreen from './LoginScreen';

export default function App() {
  return (
    <SafeAreaView className="flex-1">
      <LoginScreen />
    </SafeAreaView>
  );
}

Step 6: Run Your App

Start your app by running:

npx expo start

Scan the QR code with the Expo Go app on your phone, or run it on an emulator. You should see your login screen, and you can test the authentication flow.

Step 7: Expand Your App

Now that you’ve set up Supabase and NativeWind, you can start building out your app. Here are some ideas:

• Add a Sign Up screen.
• Use Supabase’s real-time database to fetch and display data.
• Style your app further using NativeWind’s utility classes.

Conclusion

That’s it! You’ve successfully set up a React Native app with Supabase and NativeWind. This setup gives you a powerful backend with Supabase and a sleek, modern styling system with NativeWind. From here, the sky’s the limit—build something awesome!

If you run into any issues, check out the Supabase documentation or the NativeWind GitHub page for more details. Happy coding! ⚡️