expo-community / Expo Firebase Starter
๐ฅโ๏ธ๐ฑ Expo + Firebase Starter Kit
Stars: โญ 199
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Expo Firebase Starter
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: โญ 222 (+11.56%)
Mutual labels: firebase, firestore, expo, react-navigation
Firebase Instagram
๐ธ Instagram clone with Firebase Cloud Firestore, Expo, and React Native ๐๐
Stars: โญ 389 (+95.48%)
Mutual labels: firebase, firestore, expo
Expo Native Firebase
๐ฅ Native Firebase Expo App (iOS, Android) Demo for Firestore, Notifications, Analytics, Storage, Messaging, Database ๐จ
Stars: โญ 197 (-1.01%)
Mutual labels: firebase, expo, react-navigation
Pillar Valley
๐พA cross-platform video game built with Expo, three.js, and Firebase! ๐ฎ๐น
Stars: โญ 242 (+21.61%)
Mutual labels: firebase, expo, react-navigation
Nativescript Plugin Firebase
๐ฅ NativeScript plugin for Firebase
Stars: โญ 990 (+397.49%)
Mutual labels: firebase, firestore, authentication
Chatair Android
๐ฅ A highly advance featured chat app in android using Firestore
Stars: โญ 132 (-33.67%)
Mutual labels: firebase, firestore
Nextjs Vercel Firebase
Next.js app using API routes to connect with Firestore.
Stars: โญ 133 (-33.17%)
Mutual labels: firebase, firestore
Fluttergram
A fully functional Instagram clone written in Flutter using Firebase / Firestore
Stars: โญ 1,944 (+876.88%)
Mutual labels: firebase, firestore
Fireo
Google Cloud Firestore modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore
Stars: โญ 163 (-18.09%)
Mutual labels: firebase, firestore
Serverless Architectures Aws
The code repository for the Serverless Architectures on AWS book
Stars: โญ 120 (-39.7%)
Mutual labels: firebase, authentication
Highlight Utils
My tools for converting, importing, and processing Kindle, Instapaper, and Safari Books highlights
Stars: โญ 143 (-28.14%)
Mutual labels: firebase, firestore
React Firestore Authentication
๐ฅBoilerplate Project for Authentication with Firestore in React.
Stars: โญ 165 (-17.09%)
Mutual labels: firestore, authentication
Expo Disneyplus
Disney+ UI Clone with React Native & Expo
Stars: โญ 130 (-34.67%)
Mutual labels: expo, react-navigation
Combinefirebase
Combine wrapper on Google's iOS Firebase library.
Stars: โญ 126 (-36.68%)
Mutual labels: firebase, firestore
React Native Boilerplate
A React Native boilerplate with Expo, Redux, React Navigation, Styled Components and some ๐ included.
Stars: โญ 135 (-32.16%)
Mutual labels: expo, react-navigation
Firebasecrud
Rich UI and animation flutter app backed by firebase
Stars: โญ 121 (-39.2%)
Mutual labels: firebase, firestore
Firestore Simple
More simple, powerfull and TypeScript friendly Firestore wrapper.
Stars: โญ 145 (-27.14%)
Mutual labels: firebase, firestore
Gqlify
[NOT MAINTAINED]An API integration framework using GraphQL
Stars: โญ 182 (-8.54%)
Mutual labels: firebase, firestore
Makeitso
This is the source code for Make It So, the sample app accompanying my blog post "Replicating the iOS Reminders App Using SwiftUI and Firebase"
Stars: โญ 181 (-9.05%)
Mutual labels: firebase, firestore
Expo Uber
Uber UI Clone with React Native & Expo
Stars: โญ 186 (-6.53%)
Mutual labels: expo, react-navigation
expo-firebase-starter ๐ฅ
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
Installation
- 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 iOS -
yarn android
-- open on Android
File Structure
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
โ ๏ธโ ๏ธโ ๏ธ
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! ๐๐
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].