Giter VIP home page Giter VIP logo

expo-firebase-starter's Introduction

expo-firebase-starter ๐Ÿ”ฅ

Supports Expo iOS Supports Expo Android

Is a quicker way to start with Expo + Firebase projects. It includes:

  • based on Expo SDK 39.x.x
  • navigation using react-navigation 5.x.x
  • Firebase as backend for email auth
  • custom and reusable form components
  • handles different field types in forms
  • handles server errors using Formik
  • Login/Signup form built using Formik & yup
  • show/hide Password Field's visibility ๐Ÿ‘
  • uses Context API & checks user's auth state
  • implement Password Reset Screen
  • all components are now functional components and use React Hooks

Installation

  1. Create a new project using the firebase starter template.
$ npx create-react-native-app --template https://github.com/expo-community/expo-firebase-starter
  1. Rename the file example.firebaseConfig.js to firebaseConfig.js
  2. Update firebaseConfig.js with your own configuration, e.g.:
// Rename this file to "firebaseConfig.js" before use
// Replace all Xs with real Firebase API keys

export default {
  apiKey: 'XXXX',
  authDomain: 'XXXX',
  databaseURL: 'XXXX',
  projectId: 'XXXX',
  storageBucket: 'XXXX',
  messagingSenderId: 'XXXX',
  appId: 'XXXX'
};

File Strucutre

Expo Firebase Starter
โ”œโ”€โ”€ assets โžก๏ธ All static assets
โ”œโ”€โ”€ components โžก๏ธ All re-suable UI components for form screens
โ”‚   โ””โ”€โ”€ Firebase โžก๏ธ Firebase related config directory
โ”‚       โ””โ”€โ”€ firebaseConfig.js โžก๏ธ Firebase API keys
โ”‚       โ””โ”€โ”€ firebase.js โžก๏ธ Firebase app initialization & authentication helper methods
โ”‚   โ””โ”€โ”€ Forms โžก๏ธ Reusable form components
โ”‚       โ””โ”€โ”€ Form.js โžก๏ธ Reusable Form wrapper to apply Formik
โ”‚       โ””โ”€โ”€ FormButton.js โžก๏ธ Reusable button component that handles form submit using Formik context hook
โ”‚       โ””โ”€โ”€ FormErrorMessage.js โžก๏ธ Reusable component to display server errors from Firebase
โ”‚       โ””โ”€โ”€ FormField.js โžก๏ธ Reusable TextInput component
โ”‚   โ””โ”€โ”€ AppButton.js โžก๏ธ Button component
โ”‚   โ””โ”€โ”€ AppTextInput.js โžก๏ธ TextInput component
โ”‚   โ””โ”€โ”€ IconButton.js โžก๏ธ Button with icon only component
โ”‚   โ””โ”€โ”€ SafeView.js โžก๏ธ SafeAreaView wrapper component
โ”‚   โ””โ”€โ”€ Spinner.js โžก๏ธ Loading indicator component
โ”œโ”€โ”€ hooks โžก๏ธ All custom hook components
โ”‚   โ””โ”€โ”€ useStatusBar.js โžก๏ธ A custom hook based on @react-navigation library to animate the status bar style changes
โ”œโ”€โ”€ navigation
โ”‚   โ””โ”€โ”€ AppStack.js โžก๏ธ Protected routes such as Home screen
โ”‚   โ””โ”€โ”€ AuthStack.js โžก๏ธ Routes such as Login screen, when the user is not authenticated
โ”‚   โ””โ”€โ”€ AuthUserProvider.js โžก๏ธ An Auth User Context component that shares Firebase user object when logged-in
โ”‚   โ””โ”€โ”€ navigationTheme.js โžก๏ธ A default theme for navigation components
โ”‚   โ””โ”€โ”€ Routes.js โžก๏ธ Switch between Auth and App stacks based on Firebase user logged-in state
โ”œโ”€โ”€ screens
โ”‚   โ””โ”€โ”€ ForgotPassword.js โžก๏ธ Forgot Password screen component
โ”‚   โ””โ”€โ”€ HomeScreen.js โžก๏ธ Protected route/screen component
โ”‚   โ””โ”€โ”€ LoginScreen.js โžก๏ธ Login screen component
โ”‚   โ””โ”€โ”€ RegisterScreen.js โžก๏ธ Register screen component
โ”‚   โ””โ”€โ”€ WelcomeScreen.js โžก๏ธ Initial screen component
โ”œโ”€โ”€ utils
โ”‚   โ””โ”€โ”€ colors.js โžก๏ธ Default, reusable values across the app
โ”œโ”€โ”€ App.js โžก๏ธ Entry Point for Mobile apps
โ”œโ”€โ”€ app.json โžก๏ธ Expo config file
โ””โ”€โ”€ babel.config.js โžก๏ธ Babel config (should be using `babel-preset-expo`)

Screens

Main screens:

  • Login
  • Signup
  • Forgot password

Initial Welcome Screen

Successful Signup

Successful Login

Forgot Password

โš ๏ธโš ๏ธโš ๏ธ

Expo uses Firebase Web SDK and does not support all Firebase services such as phone auth. If you are looking forward to use those services, please use react-native-firebase in a vanilla react native app.

Here is more on what and why Expo cannot support complete Firebase integration


Built by @amanhimself

Happy Coding! ๐ŸŽ‰๐ŸŽ‰

expo-firebase-starter's People

Contributors

amandeepmittal avatar zyzmoz avatar bycedric avatar tiagoseverino avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.