Ready-to-use mobile template built for a scalability with typescript, the expo workflow, storybook, and firebase. Used for open-source education and kickstarting mobile applications.
> To use this template, make sure to have the Expo CLI installed and run:
``bash`
expo init --template maet-expo-template
For your knowledge, each of the main repositories underneath src and functions include strong documentation so that you can understand the stack you are working with.
https://user-images.githubusercontent.com/95386742/205753550-1f6135bf-e57d-43ba-a010-e631f273c9ef.mp4
https://user-images.githubusercontent.com/95386742/205753631-24b64022-b280-410f-89d5-b49135f1d2e6.mp4
Drop us a ⭐ if you find this template helpful! Additionally, if you want to stay up-to-date about Maet, visit our website at Maet.io, or follow our Instagram and LinkedIn.
A React Native, TypeScript, and Expo template configured with:
* Firebase V9: Firebase V9 is modular and more lightweight than previous versions of firebase, allowing us to import specific functions from firebase instead of initializing the whole app. There are many useful resources to see how to get started with this new version, including this authentication tutorial.
React Navigation: For navigating through screens, we are using react navigation's tab and stack navigators. Additionally, react navigation has custom theming support built in, which is defined in src/constants/theme*.
* NativeBase: Well built and responsive component library for ios, android, and web.
* [Redux Toolkit](): We use redux toolkit to manage universal state. An introduction into redux toolkit can be found here. We divide our redux by concept, all in the "ducks" directory under src, using the slice pattern. Only use redux when necessary, handling internal state with react's useState when possible. We are using redux toolkit because it simplifies redux, allowing us to "mutate" the state in the reducers without having to explicitly make a copy. This will shorten the amount of code we will have to write. This tutorial is useful to reference to understand how to combine redux toolkit and firebase 9 for authentication.
* Redux-Persist: Allows us to maintain the state of the app, with the data associated with the user even after the app is quit. To see how to integrate with redux toolkit, check out the documentation or this tutorial.
* [React Native SVGs](): To render local SVGs for our logos with react-native-svg-transformer.
* ESlint and Prettier: ESlint and Prettier help us detect errors while keeping our code formatting clean. We have initialized these packages using Airbnb's style guide, extending our eslintrc.js to include airbnb-typescript.
* Absolute Imports: To avoid annoying relative imports, we have configured our tsconfig.json file and babel.config.js file to make use of absolute imports. It may be useful to reference the typescript documentation on module resolution, or reference this medium blog.
* Dark and Light Theme: We configured our own theme to extent to themes for NativeBase and React Navigation.
* Form Validation: We are using react-hook-form and yup to validate our user inputs, checking them in our form-input component while passing the yup schema in the screens. This tutorial is useful to reference.
`bash`
expo init [name] --template maet-expo-template`
Create a Firebase project (How?), add a web app, and copy your Firebase config to a .env file in the top level of your project:`
FIREBASE_API_KEY=[...]
FIREBASE_AUTH_DOMAIN=[...]
FIREBASE_PROJECT_ID=[...]
FIREBASE_STORAGE_BUCKET=[...]
FIREBASE_MESSAGING_SENDER_ID=[...]
FIREBASE_APP_ID=[...]
FIREBASE_MEASUREMENT_ID=[...]
Set up your firebase project with firestore, functions, auth, and storage. You will need to upgrade your firebase to the Blaze plan and change your firebase storage security rules.
- Run on Web: yarn web or expo start --webyarn prebuild
- Prebuild: or expo prebuild -–npmyarn ios
> Expo prebuild checks to make sure all packages are compatible with expo before running it on your device.
- Run on iOS: or expo run:ios –dyarn android
- Run on Android: or expo run:android --deviceyarn
- Install dependencies: yarn tsc
- Compile TypeScript: yarn lint
- Lint Code: or yarn eslint .yarn format
- Format Code: or yarn eslint . --fix
: server-side firebase functions.
src/components: useful re-usable component library.
src/constants: app constants, such as theme, that remain consistent throughout the app.
src/ducks: redux features, organized using the slice pattern.
src/firebase: all backend firebase configuration, promise handlers, and api.
src/hooks: useful hooks that can be re-used throughout the app.
src/navigation: react-navigation navigators, including stack and tab navigators.
src/screens: the main screens of the app.
src/types: definitions of important interfaces and types.
src/utils`: utility files, including yup form schemas.Copyright 2022 © Maet LLC