An expo template featuring expo-router, reduxjs-toolkit, react-native-reanimated, and redux-persist for cross-platform mobile app development.
npm install expo-router-redux-templatebash
npx create-expo-app my-new-app --template expo-router-redux-template
`
or
`bash
yarn create expo-app my-new-app --template expo-router-redux-template
`
2. Navigate to the project directory:
`bash
cd my-new-app
`
3. To launch your app and run it on an emulator, physical device, or web browser, start the Expo development server using one of the following commands:
- For Android:
`bash
yarn android
`
- For iOS:
`bash
yarn ios
`
- For web development:
`bash
yarn web
`
These commands will initiate the Expo development server and allow you to preview and test your app on different platforms.
You can then begin customizing the template to suit your project's requirements. Refer to the project structure and comments in the code for guidance.
Project Structure
The project structure follows the Ducks pattern recommended in the Redux documentation, combined with the typical layout for a React Native and Expo Router project. Below is a concise overview of the key directories:
- /app: Contains layouts and screens (or routes).
- /assets: Stores static assets such as images and fonts.
- /common: A collection of common utilities and components that can be reused across your app.
- /hooks: Custom React hooks designed specifically for your app.
- /components: Generic UI components that are reusable throughout your project.
- /constants: Houses various constants, including Colors, Fonts etc.
- /features: Individual features or modules of your application.
- /feature: A feature in the app
- featureSlice.ts: Holds Redux logic for the feature.
- FeatureComponent.tsx: A component related to this feature.
- /store: Includes redux-related files
- configureStore.ts: Responsible for the configuration and setup of your redux store.
- reducer.ts`: Contains the root reducer.