EXPO SDK 46 Template
To use this template, make sure to have the Expo CLI installed and run:
expo init [name] --template @husam287/expo-template- React Navigation: For navigating through screens, we are using react navigation's tab and stack navigators with custom header created
- Redux Toolkit: We use redux toolkit to manage universal state. An introduction into redux toolkit can be found here.
- Axios hooks: To use axios as react hook with the aim of axios hook package
- Icomoon: To use custom icons using icon component and files generated from Icomoon website
- 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
- Translations: We are using i18n-js and expo-localization to translate the app (en - ar).
- EAS and live update configuration: EAS and expo publish configurations are ready to use (production and testing channels).
- Eslint with airbnb config: To keep your code more clean and improve its quality
- Husky: To make pre-commit hooks
- Lint-staging: Work with husky to prevent commit code without making linting
- Absolute Imports: To avoid annoying relative.
Be sure to have the Expo CLI installed.
expo init [name] --template @husam287/expo-template- Responsive: Make sure to utilize responsive color and screen sizes for components in constants folder.
- Lightweight Files: Keep files under ~500 lines of code. If you much longer than this you should probably be creating a different component to import in.
- Compilation and Formatting: Strongly type when possible to cut down on runtime errors while also linting code often to maintain strong formatting.
- Naming Conventions:
Directories: all lower case with - for spaces (ex. home-components)
Files/Components: Capital first letter and CamelCase (ex. <FormInput />)
Variables: camelCase (ex. const isLoading) Constant value: all upper case _ for spaces (ex. GLOBAL_STYLES)
src/components: useful re-usable component library.
src/constants: app constants, such as theme, that remain consistent throughout the app.
src/reducers: redux features, organized using the slice pattern.
src/hooks: useful hooks that can be re-used throughout the app.
src/routes: react-navigation navigators, including stack and tab navigators.
src/screens: the main screens of the app.
src/api: apis using axios hooks; organized as endpoints, axios configuration
src/assets: all assets