Welcome!

Expo TS White-Label / Boilerplate

Specification

• react-native
• expo
• react-navigation
• typescript
• localization
• styled-components
• ts-jest
• @testing-library/react-native
• @testing-library/react-hooks
• react-hook
• prettier

INSTALL

npm install 
// then
open -a Simulator; expo start --clear

Structures

app/
├─ .levelstudio // necessary if using levelstudio-cli
├─ .expo
├─ assets
│  └─ icons // app icons
│  └─ images // app images like background images
├─ node_modules/
├─ src/
│  └─ apis
│  └─ components
│     └─ navigations
│     └─ screen
│     └─ shared
│  └─ contexts
│  └─ utils
│  └─ App.tsx
├─ test/
├─ .buckconfig
├─ .flowconfig
├─ .gitattributes
├─ .gitignore
├─ .watchmanconfig
├─ app.json
├─ babel.config.js
├─ index.js
├─ jest.config.js
├─ package.json
├─ README.md
├─ STRINGS.js
├─ tsconfig.json
└─ tslint.json

Running the project

open -a Simulator; expo start --clear

Testing the project

Testing is also just a command away:

npm test

Result

> jest -u

 PASS  src/components/shared/__tests__/Button.test.tsx
 PASS  src/components/screen/__tests__/Intro.test.tsx
 › 2 snapshots written.

Snapshot Summary
 › 2 snapshots written in 1 test suite.

Test Suites: 2 passed, 2 total
Tests:       5 passed, 5 total
Snapshots:   2 added, 4 passed, 6 total
Time:        3.055s, estimated 6s
Ran all test suites

Writing tests with Jest

We've created test examples with jest-ts in src/components/screen/__tests__ and src/components/shared/__tests__. Since react is component oriented, we've designed to focus on writing test in same level of directory with component. You can simply run npm test to test if it succeeds and look more closer opening the source.

Fixed jest setup by adding following in jestSetup.

import { NativeModules } from 'react-native';

/**

• monkey patching the locale to avoid the error:
• Something went wrong initializing the native ReactLocalization module
• https://gist.github.com/MoOx/08b465c3eac9e36e683929532472d1e0 */

NativeModules.ReactLocalization = { language: 'en_US', };

Vscode prettier and eslint setup

See eslintrc.js

### Expo

35