Mobile Configuration

[YigitMemceroktay]

📌 Feature Request

📝 Description

To enhance our mobile development lifecycle, we need a tailored and efficient configuration for our project using Expo with React Native. This issue proposes a series of configuration steps and tools designed to improve development speed, code quality, and team collaboration.

Purposes

• Developer Experience (DX): Ensure a frictionless setup and an efficient development process to boost productivity and ease of use.
• Correctness: Achieve high code reliability through thorough testing and continuous integration.
• Consistency: Maintain a uniform codebase with standardized naming and styling to ensure a cohesive look and functional experience.

Proposals

1. [ ] Structured Expo Configuration:

   • Configure app.json meticulously to manage assets, permissions, and SDK versions efficiently.
   • Use Expo’s updates module to manage and roll out updates smoothly.

2. [x] Enhanced Linting Strategy:

   • Implement a customized ESLint configuration that complements React Native and Expo’s coding practices.
   • Integrate TypeScript linting to enforce type safety and consistency across the project.

3. [ ] Automated Formatting with Prettier:

   • Enforce a uniform code format across the team using Prettier.
   • Include pre-commit hooks that automatically format modified files to ensure consistency before pushing.

4. [ ] TypeScript Utilization:

   • Adopt TypeScript for its strong typing system, which enhances code quality and maintainability.
   • Regularly update TypeScript to take advantage of the latest language improvements and features.

5. [ ] Testing Environment with Jest and Testing Library:

   • Set up Jest along with React Native Testing Library to encourage test-driven development.
   • Include test suites in CI pipelines to ensure all tests pass before merging any code.
   • Provide sample tests and document best practices for unit and integration testing in the React Native environment.

6. [ ] Continuous Integration with GitHub Actions:

   • Configure GitHub Actions to perform automated tests, lint checks, type validation, and build processes.
   • Optimize CI workflows to cache dependencies and build outputs for faster execution.

7. [ ] Development Environment with Expo CLI:

   • Leverage Expo CLI tools for local development to simulate, debug, and develop features efficiently.
   • Document common CLI commands and troubleshooting steps for new developers.

8. [ ] React Navigation Setup:

   • Standardize navigation patterns using React Navigation for consistency and maintainability across the application.
   • Document the setup process and common use cases for navigation in the app.

9. [ ] Documentation and Onboarding:

   • Create a comprehensive developer guide that covers setup, common tasks, and troubleshooting.
   • Document architectural decisions, component library usage, and coding standards to ensure consistency.

10. [ ] VSCode Workspace Settings:

    • Provide a .vscode/settings.json file pre-configured for optimal development with Expo and React Native.
    • Recommend extensions like ESLint, Prettier, and TypeScript for improved development experience.

By implementing these proposals, we aim to create a robust and developer-friendly environment that accelerates development and ensures a high standard of code quality for our mobile application.

[mmtftr]

~I'm thinking of utilizing Tamagui for shared UI component system. Tamagui allows us to build universal components that can be used across web and native projects. I'll be investigating how to set it up in a subdirectory and see if it's possible to do so.~

Never mind, setting up tamagui proved very difficult. It has a very sophisticated structure and is not worth the effort. We can use something else.