This project is a boilerplate created for a quick start with React Native. It includes basic configurations and helps you save time when creating new projects.
- Navigation with React Navigation
- State management with Redux
- HTTP requests with RTK Query
- Unit testing with Jest
Make sure you have the following tools installed on your system before running the project:
- Node.js
- Yarn (optional, npm can also be used)
- React Native CLI
- Create a new React Native project using the following command:
npx react-native init MyApp --template https://github.com/muammertopcu/react-native-boilerplate
- Navigate to the project directory:
cd MyApp
- Start the Metro server:
npx react-native start
- Run the project on an emulator or a physical device:
npx react-native run-android
# or
npx react-native run-ios
This boilerplate allows you to quickly add new features and extend the existing structure. The main file structure is described below:
src
├── components
│ ├── Screen
│ │ ├── Screen.tsx
│ │ └── ...
│ └── ...
├── redux
│ ├── api
│ │ ├── api.ts
│ │ └── ...
│ ├── slices
│ │ ├── authSlice.ts
│ │ └── ...
│ └── store.ts
├── router
│ ├── Router.tsx
│ └── ...
├── screens
│ ├── Home
│ │ ├── Home.tsx
│ │ └── ...
│ └── ...
└── App.tsx
This boilerplate uses the following libraries:
- React Navigation
- Redux Toolkit
- RTK Query
- Jest
- React Native Testing Library
- TypeScript
- ESLint
- Prettier
- React Native Config
The API configuration is stored in the src/redux/api/api.ts
file. You can change the API URL in .env and add new endpoints to the configuration. https://redux-toolkit.js.org/rtk-query/overview for more information.
- Redux persist for storing the state
- Storybook for component development and testing
- Add e2e testing with Detox or Appium
- add a script to generate new components, screens etc. with a single command (e.g.
yarn create:component NewComponent
)
Contributions are welcome! Feel free to open an issue or submit a pull request if you have any improvements or new features to add.