husam287-expo-template

EXPO SDK 48 Template

To use this template, make sure to have the Expo CLI latest version installed and run:

expo init [name] --template @husam287/expo-template

⚡ Stack and Dependencies

• 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.
• RTK Query: a high performance lib for fetching data
• 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.
• App Name Localization: Now you can localize the app name with the key of "CFBundleDisplayName" for ios and "app_name" for android in i18n files

🔧 Usage

Be sure to have the Expo CLI installed.

expo init [name] --template @husam287/expo-template

💻 Development Practices

1. Responsive: Make sure to utilize responsive color and screen sizes for components in constants folder.
2. 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.
3. Compilation and Formatting: Strongly type when possible to cut down on runtime errors while also linting code often to maintain strong formatting.
4. 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)

📂 Organization

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