sandypockets / react-native-starter

A starter template to help get a React Native project up and running, fast.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Starter

A full stack React Native Starter template, built as a bare-bones To Do app to help illustrate userContext and other Supabase logic. When using the template, simply replace the two To Do components, and two To Do screens with your own content.

Contents

Features

  • User authentication
  • Prebuilt hook for user context
  • Postgres database

Tech stack

Getting started

This project was built and tested with an iPhone 12, running iOS 14.3

  1. Fork and clone this repository.
  2. From the root directory, run the following command to install dependencies:
yarn
  1. Copy the contents of .env.example into a new .env file:
cp .env.example .env
  1. Replace the default values with your own Supabase values.
  2. In your Supabase dashboard, run the following SQL snippet to create the database tables and row level security (for the To Do example. You can skip this step if you are not using the To Do list functionality.).
View SQL snippet
create table todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  task text check (char_length(task) > 3),
  is_complete boolean default false,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table todos enable row level security;

create policy "Individuals can create todos." on todos for
    insert with check (auth.uid() = user_id);

create policy "Individuals can view their own todos. " on todos for
    select using (auth.uid() = user_id);

create policy "Individuals can update their own todos." on todos for
    update using (auth.uid() = user_id);

create policy "Individuals can delete their own todos." on todos for
    delete using (auth.uid() = user_id);
  1. Start the development server with one of the following commands:
# iOS
yarn ios

# Android
yarn android

# Web
yarn web

# All
yarn start

Notes

  • Password reset functionality is only partially implemented. The reason being that the actual reset of the password (at this time) must be completed on the web, outside the app itself. More information in the Supabase docs

Dependencies

  • react-native-async-storage/async-storage
  • react-navigation/material-bottom-tabs
  • react-navigation/native
  • react-navigation/native-stack
  • supabase/supabase-js
  • babel-plugin-inline-dotenv
  • expo
  • expo-status-bar
  • react
  • react-dom
  • react-native
  • react-native-paper
  • react-native-safe-area-context,
  • react-native-screens
  • react-native-url-polyfill
  • react-native-vector-icons
  • react-native-web

Dev dependencies

  • babel/core

Screenshots

React Native Starter Template Auth Screen React Native Starter Template To Do List Screen React Native Starter Template Create New To Do Screen React Native Starter Template User Profile Screen

About

A starter template to help get a React Native project up and running, fast.

License:MIT License


Languages

Language:JavaScript 99.4%Language:Shell 0.6%