# react-native-template-typescript-tdd

> A react native template, with support for TDD and typescript out of the box.

Latest version **1.0.107** (published 2020-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-template-typescript-tdd
pnpm add react-native-template-typescript-tdd
yarn add react-native-template-typescript-tdd
bun add react-native-template-typescript-tdd
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.107 |
| Published | 2020-08-13 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 242.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ahmed Elshaabany |
| Maintainers | elshaabany |
| Keywords | react-native, typescript, template, boilerplate, navigation, TDD, jest, detox |

## Links

- npm: https://www.npmjs.com/package/react-native-template-typescript-tdd
- Repository: https://github.com/zaprogrammer/react-native-template-typescript-tdd
- Homepage: https://github.com/zaprogrammer/react-native-template-typescript-tdd#readme
- Issues: https://github.com/zaprogrammer/react-native-template-typescript-tdd/issues
- npm.io page: https://npm.io/package/react-native-template-typescript-tdd

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.107 (latest) — 2020-08-13
- 1.0.105 — 2020-08-13
- 1.0.104 — 2020-08-13
- 1.0.103 — 2020-07-07
- 1.0.102 — 2020-06-23
- 1.0.101 — 2020-06-23
- 1.0.1 — 2020-06-23
- 1.0.6 — 2020-06-23
- 1.0.5 — 2020-06-23
- 1.0.4 — 2020-06-23
- 1.0.3 — 2020-06-20
- 1.0.2 — 2020-06-20

## README

# 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](https://github.com/react-native-community/react-native-template-typescript)

*  [✅]  **React Navigation ready:** Includes [react navigation](https://reactnavigation.org/) with basic working functionality out-of-the-box to work with.

*  [✅]  **TDD ready:** Includes setup for [Jest](https://jestjs.io/), [Enzyme](https://enzymejs.github.io/enzyme/), [Detox](https://github.com/wix/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](https://reactjs.org/docs/hooks-intro.html), 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](https://learntdd.in/react-native/)) 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](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template).

---
_Source: https://npm.io/package/react-native-template-typescript-tdd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._