react-native-template-typescript-tdd v1.0.107
react-native typescript TDD template
This template is a react-native boilerplate project template to start with for new projects.
Changelog:
v1.0.107:
- Fix project.pbxproj file
v1.0.106:
- Upgrade to react native v0.63.2
Features
✅ Typescript ready: This template based on the typescript template here
✅ React Navigation ready: Includes react navigation with basic working functionality out-of-the-box to work with.
✅ TDD ready: Includes setup for Jest, Enzyme, Detox for component and e2e testing.
✅ Lint ready: ESlint.
Installation
In the desired folder where you want to create the project, open command line and type:
npx react-native init {PROJECT_NAME} --template react-native-template-typescript-tdd
or if you want to install it from Github directly, type:
react-native init {PROJECT_NAME} --template https://github.com/zaprogrammer/react-native-template-typescript-tdd.git
How to use
This template uses functional components and React Hooks, but feel free to use class components, or use your preferred state-management library.
Structure
The template structure is as follows:
src
The src
folder is where all our development files/folders reside.
App.tsx App entry point and starting screen, where your App function is defined.
Navigation.tsx Contains basic navigation stack for main -> details screens.
screens Folder to contains app screens (pages). I structured it to contain each screen in its separate folder, like main, detail folders where the screen.tsx and screenStyle.ts files exist.
model Contains data objects so to map data retrieved from server or DB to those objects.
services Contains API or server calling related classes, and includes an API.ts file as an abstract class to retrieve data from server.
helper Other helper classes or functions like abstract DB layer.
commons To contain any shared components or app generic functionality like app common styles.
TDD
There are very good tutorials (here) covering how to use TDD with react-native so you can apply on this template.
Official documentation for creating custom project templates can be found here.