How to connect Supabase to React Native?

 

Step 1: Set Up Supabase Account
 

• Go to Supabase and sign up for a free account if you don't already have one.
• After logging in, create a new project by clicking on New Project.
• Enter your project's details such as the name, password, and database region.
• Note your API keys and the URL of your Supabase instance from the project's settings. You will need these to connect with your React Native application.

 

Step 2: Create Database Schema
 

• In the Supabase dashboard, navigate to the SQL editor.
• Create a new table by running SQL commands. For this example, you can create a simple users table:

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  username VARCHAR NOT NULL,
  email VARCHAR NOT NULL
);

• Review and ensure the table is created successfully.

 

Step 3: Initialize React Native Project
 

• Ensure you have Node.js installed on your system.
• Open a terminal and install React Native CLI by running:

npm install -g react-native-cli

• Initialize a new React Native project:

npx react-native init SupabaseProject

• Navigate to the newly created project directory:

cd SupabaseProject

 

Step 4: Install Supabase Client
 

• Within your React Native project directory, install the Supabase client library:

npm install @supabase/supabase-js

 

Step 5: Connect Supabase with React Native
 

• Open your React Native project in a code editor.
• In the root of your project directory, create a file named supabaseClient.js.
• Add the following code snippet to initialize Supabase using your project URL and API keys:

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

const SUPABASE_URL = 'https://your-project-id.supabase.co';
const SUPABASE_ANON_KEY = 'your-anon-key';

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

Replace 'https://your-project-id.supabase.co' and 'your-anon-key' with your actual Supabase URL and API key obtained from the Supabase dashboard.

 

Step 6: Fetch Data from Supabase
 

• Open the App.js file.
• Import your Supabase client from supabaseClient.js.
• Use the following code to fetch data from the users table and display it in your React Native app:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import { supabase } from './supabaseClient';

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const { data, error } = await supabase
        .from('users')
        .select('*');

      if (error) console.log('Error fetching users:', error);
      else setUsers(data);
    };

    fetchUsers();
  }, []);

  const renderItem = ({ item }) => (
    <View>
      <Text>Username: {item.username}</Text>
      <Text>Email: {item.email}</Text>
    </View>
  );

  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id.toString()}
      renderItem={renderItem}
    />
  );
};

export default App;

 

Step 7: Run Your React Native App
 

• Ensure your emulator or connected device is ready for deployment.
• Run the following command to start your React Native application:

npx react-native run-android

• or if you are targeting an iOS device, run:

npx react-native run-ios

 

Following these steps, you should have a React Native app connected to a Supabase back-end, able to display data from the users table. Adjust the code as needed to fit the specific requirements of your project.