Is a quicker way to start with Expo + Firebase projects. It includes:
- based on Expo SDK
40.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
- 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.firebaseConfig.js
tofirebaseConfig.js
- 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'
};
- Start the project:
yarn ios
-- open on iOSyarn android
-- open on Android
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`)
Main screens:
- Login
- Signup
- 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! ๐๐