https://github.com/hechprad/react-native-supabase-boilerplate-2025
React Native 0.76+ Boilerplate with Expo, TypeScript, and Supabase — Pre-configured with Supabase Authentication, ESLint, Prettier, Jest, and GitHub Actions. The starter kit to accelerate your 2025 React Native projects. 🚀
https://github.com/hechprad/react-native-supabase-boilerplate-2025
boilerplate boilerplate-template boilerplates eslint expo github-actions husky i18n jest mobile prettier react-native react-navigation starter-kit supabase supabase-auth ts typescript typescript-boilerplate zod
Last synced: 6 months ago
JSON representation
React Native 0.76+ Boilerplate with Expo, TypeScript, and Supabase — Pre-configured with Supabase Authentication, ESLint, Prettier, Jest, and GitHub Actions. The starter kit to accelerate your 2025 React Native projects. 🚀
- Host: GitHub
- URL: https://github.com/hechprad/react-native-supabase-boilerplate-2025
- Owner: Hechprad
- Created: 2025-02-12T13:40:43.000Z (8 months ago)
- Default Branch: develop
- Last Pushed: 2025-02-20T13:01:23.000Z (8 months ago)
- Last Synced: 2025-03-24T23:51:36.378Z (7 months ago)
- Topics: boilerplate, boilerplate-template, boilerplates, eslint, expo, github-actions, husky, i18n, jest, mobile, prettier, react-native, react-navigation, starter-kit, supabase, supabase-auth, ts, typescript, typescript-boilerplate, zod
- Language: TypeScript
- Homepage:
- Size: 361 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🚀 **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**](#-react-native-supabase-boilerplate-2025)
- [Overview](#overview)
- [🛠️ **Technologies**](#️-technologies)
- [📖 **Table of Contents**](#-table-of-contents)
- [🚀 **Project Setup**](#-project-setup)
- [Prerequisites](#prerequisites)
- [▶️ **Running the Application**](#️-running-the-application)
- [🧪 **Running Tests**](#-running-tests)
- [📂 **Project Structure**](#-project-structure)
- [🌐 **Routes Explanation**](#-routes-explanation)
- [⚙️ **GitHub Actions**](#️-github-actions)
- [🔮 **Future Improvements**](#-future-improvements)
- [👤 **Author**](#-author)
- [📜 **License**](#-license)
- [🤝 **How to Contribute**](#-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:
```bash
git clone https://github.com/yourusername/react-native-supabase-boilerplate-2025.git
cd react-native-supabase-boilerplate-2025
```
2. Install dependencies:
```bash
npm install
```
3. Setup your Supabase environment:
- Create a project on [Supabase](https://supabase.io/).
- 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:
```sql
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:
```sql
-- 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:
```bash
npx expo start
```
---
## 🧪 **Running Tests**
Run all tests:
```bash
npm run test
```
Run all tests with noWatch:
```bash
npm run test:no-watch
```
Run tests with coverage:
```bash
npm run test:coverage
```
---
## 📂 **Project Structure**
```bash
📦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](https://github.com/Hechprad)
- Email: [hecherat@gmail.com](mailto:hecherat@gmail.com)
---
## 📜 **License**
This project is open-source and available under the [MIT License](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.