Need help with expo-firebase-starter?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

279 Stars 74 Forks 203 Commits 4 Opened issues


πŸ”₯βš›οΈπŸ“± Expo + Firebase Starter Kit

Services available


Need anything else?

Contributors list

expo-firebase-starter πŸ”₯

Supports Expo iOS Supports Expo Android

Is a quicker way to start with Expo + Firebase (using JS SDK) projects. It includes:

  • based on Expo SDK
  • navigation using
  • Firebase JS SDK v9
  • Firebase as backend for email auth
  • custom and reusable components
  • custom hook to toggle password field visibility on a TextInput
  • handles server errors using Formik
  • Login, Signup & Password Reset form built using Formik & yup
  • show/hide Password Field's visibility πŸ‘
  • uses a custom Provider using Context API & Firebase's
    handler to checks user's auth state with
  • handles Forgot Password Reset using Firebase email method
  • uses Expo Vector Icons
  • uses KeyboardAwareScrollView package to handle keyboard appearance and automatically scrolls to focused TextInput
  • uses
    packages to manage environment variables (so that they are not exposed on public repositories)
  • all components are now functional components and use React Hooks


  1. Create a new project using the firebase starter template.
$ npx create-react-native-app --template
  1. Rename the file
  2. Update
    with your own configuration, e.g.:
# Rename this file to ".env" before use
# Replace XXXX's with your own Firebase config keys
  1. Start the project:
  • yarn ios
    -- open on iOS
  • yarn android
    -- open on Android

File Structure

Expo Firebase Starter
β”œβ”€β”€ assets ➑️ All static assets, includes app logo
β”œβ”€β”€ components ➑️ All re-suable UI components for form screens
β”‚   └── Button.js ➑️ Custom Button component using Pressable, comes with two variants and handles opacity
β”‚   └── TextInput.js ➑️ Custom TextInput component that supports left and right cons
β”‚   └── Icon.js ➑️ Icon component
β”‚   └── FormErrorMessage.js ➑️ Component to display server errors from Firebase
β”‚   └── LoadingIndicator.js ➑️ Loading indicator component
β”‚   └── Logo.js ➑️ Logo component
β”‚   └── View.js ➑️ Custom View component that supports safe area views
β”œβ”€β”€ hooks ➑️ All custom hook components
β”‚   └── useTogglePasswordVisibility.js ➑️ A custom hook that toggles password visibility on a TextInput component on a confirm password field
β”œβ”€β”€ config ➑️ All configuration files
β”‚   └── firebase.js ➑️ Configuration file to initialize firebase with firebaseConfig and auth
β”‚   └── images.js ➑️ Require image assets, reusable values across the app
β”‚   └── theme.js ➑️ Default set of colors, reusable values across the app
β”œβ”€β”€ providers ➑️ All custom providers that use React Context API
β”‚   └── AuthenticatedUserProvider.js ➑️ An Auth User Context component that shares Firebase user object when logged-in
β”œβ”€β”€ navigation
β”‚   └── AppStack.js ➑️ Protected routes such as Home screen
β”‚   └── AuthStack.js ➑️ Routes such as Login screen, when the user is not authenticated
β”‚   └── RootNavigator.js ➑️ Switch between Auth screens and App screens 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
β”‚   └── SignupScreen.js ➑️ Signup screen component
β”œβ”€β”€ App.js ➑️ Entry Point for Mobile apps, wrap all providers here
β”œβ”€β”€ app.config.js ➑️ Expo config file
└── babel.config.js ➑️ Babel config (should be using `babel-preset-expo`)


Main screens:

  • Login
  • Signup
  • Forgot password
  • Home (Bare Minimum) with a logout button

Login screen with validation

Successful Signup

Forgot Password

Validation on Signup screens

⚠️ Please Note

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

in a Expo bare project, or an Expo custom dev client or a plain React Native project.

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

Built with πŸ’œ by @amanhimself

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.