Is a quicker way to start with Expo + Firebase (using JS SDK) projects. It includes:
- based on Expo SDK
50
- navigation using
react-navigation
6.x.x - Firebase JS SDK v9
- Firebase as the 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 the Password Field's visibility π
- uses a custom Provider using Context API & Firebase's
onAuthStateChanged
handler to check the user's auth state with - handles Forgot Password Reset using the Firebase email method
- uses Expo Vector Icons
- uses KeyboardAwareScrollView package to handle keyboard appearance and automatically scrolls to focused TextInput
- uses
dotenv
andexpo-constants
packages to manage environment variables (so that they are not exposed on public repositories) - all components are now functional components and use React Hooks
- Create a new project using the firebase starter template.
npx create-react-native-app --template https://github.com/expo-community/expo-firebase-starter
- Rename the file
example.env
to.env
- Update
.env
with your own configuration, e.g.:
# Rename this file to ".env" before use
# Replace XXXX's with your own Firebase config keys
API_KEY=XXXX
AUTH_DOMAIN=XXXX
PROJECT_ID=XXXX
STORAGE_BUCKET=XXXX
MESSAGING_SENDER_ID=XXXX
APP_ID=XXXX
To start the development server and run your project:
npx expo start
Alternate to using Expo Go, if you are building more than a hobby project or a prototype, make sure you create a development build. You can either locally compile your project or use EAS.
To locally compile your app, run:
# Build native Android project
npx expo run:android
# Build native iOS project
npx expo run:ios
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
This project uses Firebase JS SDK, which doesn't support all services (such as Crashlytics, Dynamic Links, and Analytics). However, you can use the react-native-firebase
library in an Expo project by creating a development build.
Both of these libraries can satisfy different project requirements. To learn about the differences between using Firebase JS SDK and React Native Firebase library when building your app with Expo, see the following sections from Expo's official documentation:
Built with π by @amanhimself