Serves as a boilerplate for kickstarting React Native projects using the Expo framework.
Some intended in-progress features include:
| Idx | Feature | Progress |
|---|---|---|
| 1 | React Navigation structure | WIP |
| 2 | Adds deployment configuration, Expo-updates,... (WIP) | WIP |
| 3 | Grants freedom of choice so that user can customize fully. | WIP |
Feel free to submit to recommend more features. Thanks!
Make sure you have Node.js and npm installed on your machine. Additionally, you might need to install Expo CLI for better setup.
- Using Expo commands, add this template to the command:
npx create-expo-app@latest <your-project-name> --template @mngh12/the-frame- Navigate to the project directory:
cd <your-project-name>- Install dependencies:
npm installor
yarn installStart the Expo development server:
npm run iosor
npm run androidAnd let the magic happens!
The project structure is designed to provide a clear organization of code. Here's an overview:
- assets: Store static assets like images, fonts, etc.
- components: Reusable components, please add more!
- app: Main screen components of the app. Since we're using Expo Router, which is a file-based router for React-Native and web applications, we don't have navigation folder setting up here. (we'll try to bring back navigation in future releases). And oh yeah, it's still native navigation baby!
- stores: Contains 3 small chunks:
- api: Contains all api-related code. Axios, interceptors, middlewares should be in here.
- client: Contains client state management, separated from server state. We're using zustand as our default libraries. Feel free to uninstall and install others.
- server: Contains server state management, separated from client state. We're using React Query (and we cannot recommend enough).
- models: type-declaring goes this way.
- themes: Styling and theming configuration.
- utils: App-related constants.
Feel free to modify and extend the structure based on the needs of your project.
- Expo Ecosystem: Leverage the power of Expo for a simplified React Native development experience.
- Navigation: Setup with Expo Router for easy navigation between screens.
- Theme Configuration: Customize the app's theme and styling from the centralized theme file.
- Component Reusability: Utilize reusable components to maintain a modular codebase.
- Sample Screens: Includes example screens to help you get started quickly.
If you'd like to contribute, please follow the contribution guidelines in this repository.
Please check out the Code of Conduct file for more information.
This project is licensed under the MIT License.
- Special thanks to the Expo and React Native communities for their continuous support and contributions.
Feel free to use this template as a foundation for your React Native Expo projects. Happy coding!