Is a quicker way to start with Expo + Firebase (using JS SDK) projects. It includes:
- based on Expo SDK
45
- navigation using
react-navigation
6.x.x - 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
onAuthStateChanged
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
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
- Start the project:
yarn ios
-- open on iOSyarn android
-- open on Android
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
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 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