husam287-expo-template-ts

FILE BASE ROUTING EXPO SDK 49 Template (typescript)

Be sure to have Node.js LTS release installed (v16+ required, v18+ recommended).

npx create-expo-app [name] --template @husam287/expo-template-ts

⚡ Stack and Dependencies

• React Navigation 6: 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 react-i18next and expo-localization to translate the app (en - ar) - i.e use (useAutoCompleteTranslation) hook to enjoy autocompleted i18n keys.
• 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 Node.js LTS release installed (v16+ required, v18+ recommended).

1. install the template

npx create-expo-app [name] --template @husam287/expo-template-ts

2. install eas-cli globally

npm install -g eas-cli

3. configure the expo project linkage

eas build:configure

4. configure eas updates (required before build)

npm run deploy:test

💻 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/app: for expo router file routing system.
src/components: useful re-usable component library.
src/constants: app constants, such as theme, that remain consistent throughout the app.
src/redux: redux features, organized using the slice pattern.
src/hooks: useful hooks that can be re-used throughout the app.
src/screens: the main screens of the app (features).
src/api: apis using rtk query; organized as endpoints, axios configuration src/assets: all assets