🚀 React Native Supabase Boilerplate 2025

Overview

A React Native 0.76+ starter kit with Expo, TypeScript, and Supabase Authentication, designed to speed up the creation of new projects. This template comes with ESLint, Prettier, Jest, and GitHub Actions, ensuring code quality and best practices.

---

🛠️ Technologies

---

📖 Table of Contents

• 🚀 React Native Supabase Boilerplate 2025
  • Overview
  • 🛠️ Technologies
  • 📖 Table of Contents
  • 🚀 Project Setup
    • Prerequisites
  • ▶️ Running the Application
  • 🧪 Running Tests
  • 📂 Project Structure
  • 🌐 Routes Explanation
  • ⚙️ GitHub Actions
  • 🔮 Future Improvements
  • 👤 Author
  • 📜 License
  • 🤝 How to Contribute

---

🚀 Project Setup

Prerequisites

• Node.js >= 22
• npm >= 10
• Expo CLI (npm install -g expo-cli)

▶️ Running the Application

1. Clone this repository:

   git clone https://github.com/yourusername/react-native-supabase-boilerplate-2025.git
   cd react-native-supabase-boilerplate-2025

2. Install dependencies:

   npm install

3. Setup your Supabase environment:

   • Create a project on Supabase.

   • At Supabase, create 'users' table and add the following columns:

     • id (uuid)
     • creeated_at (timestampz)
     • name (text)
     • last_name (text)
     • profile_picture (text)
     • email (text)
     • updated_at (timestampz)

   • Add a foreign key on users table:

     • Schema: auth
     • table to reference: users
     • public.users "id" => auth.users "id"

   • At "Authentication">Polices create a new policy:

     • Name: allow all access for auth users

     • Table: public.users

     • Policy Command: Select "ALL" option

     • Target Roles: auth.authenticated

     • Script:

         alter policy "allow all access for auth users"
         on "public"."users"
         to authenticated
         using (true);

   • At "SQL Editor" add and run a new script to create a function and trigger:

       -- inserts a row into public.users
       create function public.handle_new_user()
       returns trigger
       language plpgsql
       security definer set search_path = public
       as $$
       begin
         insert into public.users (id, name, last_name, email, updated_at)
         values (
           new.id,
           coalesce(new.raw_user_meta_data ->> 'first_name', ''),
           coalesce(new.raw_user_meta_data ->> 'last_name', ''),
           -- coalesce(new.raw_user_meta_data ->> 'profilePicture', ''),
           new.email,
           now()
         );
         return new;
       end;
       $$;
     
       -- trigger the function every time a user is created
       create trigger createAuthUser
         after insert on auth.users
         for each row execute procedure public.handle_new_user();
     
      -- insert test.
      -- insert into auth.users (id, email, raw_user_meta_data)
      -- values (
      --  gen_random_uuid(),
      --  'jane.doe2@example.com',
      --  '{"name": "Jane", "last_name": "Doe"}'
      -- ); -->
     
      -- DELETE FROM auth.users
      -- WHERE id = 'ADD USER ID';
      -- end test

   • Add your environment variables ('supabaseUrl', 'supabaseAnonKey') to src\constants\supabase\index.ts.

4. Run the development server:

   npx expo start

---

🧪 Running Tests

Run all tests:

npm run test

Run all tests with noWatch:

npm run test:no-watch

Run tests with coverage:

npm run test:coverage

---

📂 Project Structure

📦react-native-boilerplate-supabase-2025
  ├──.github/                # GitHub configurations
  │    └── workflows         # CI/CD workflows
  ├──.husky/                 # husky configurations. pre-commit and  pre-push hooks
  ├──.vscode/                # VS Code configurations
  └──src/                    # Source code
      ├── app/               # Application: Logic and organization of pages and routes
      │   ├── (private)/     # Private pages
      │   │   ├── dashboard  # Dashboard page
      │   │   ├── product    # Product page
      │   │   └── profile    # Profile page
      │   └── (public)/      # Public pages
      │       └── (auth)/    # Authentication pages
      │           ├── signin # Sign-in page
      │           └── signup # Sign-up page
      ├── assets/            # Static files (images, fonts)
      │   ├── fonts          # Fonts used in the app
      │   └── images         # Images for the app
      ├── components/        # Reusable components
      ├── constants/         # Constants and fixed values (e.g., supabase, theme)
      │   ├── supabase       # Supabase configuration and integration
      │   └── theme          # Theme definitions
      ├── contexts/          # React contexts for state management
      │   └── auth           # Authentication context
      ├── hooks/             # Custom hooks
      └── lib/               # Libraries and utilities
          ├── i18n           # Internationalization (i18n)
          │   └── locales    # Translation files
          ├── supabase       # Supabase integration utilities
          └── zod            # Zod validation utilities

---

🌐 Routes Explanation

• / – Splash Screen
• /(public)/(auth)/signin/page – Sign In page
• /(public)/(auth)/signup/page – Sign Up page
• /(private)/dashboard/page – Dashboard (authenticated users only)
• /(private)/profile/page – User Profile (authenticated users only)

---

⚙️ GitHub Actions

The project uses GitHub Actions for:

• Linting and formatting: Ensures code quality with ESLint and Prettier.
• Running tests: Runs the Jest tests on every push and pull request.

---

🔮 Future Improvements

• Add commit linting for enforcing commit message conventions.
• Implement unit tests for all components and pages.
• Create a dark mode version of the app.

---

👤 Author

This project was created by Jorge Hecherat.

Feel free to reach out if you have any questions or feedback!

• GitHub: Jorge Hecherat
• Email: hecherat@gmail.com

---

📜 License

This project is open-source and available under the MIT License.

---

🤝 How to Contribute

1. Fork the project.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature-name.
5. Submit a pull request.