client

HackaTalk (Expo)

• Contributing

Specification

• react-native
• react-navigation
• typescript
• fbt
• emotion
• ts-jest
• expo
• @testing-library/react-native
• react-hook
• graphql
• relay

Gain points

1. Sample of context-api with `react-hook` (`useContext`).
2. Know how to structure react native app with typescript.
3. Know how to navigate between screens with `react-navigation`.
4. Know how to write `react-native` app with managed flow from `expo` with `unimodules`.
5. Know how to write test code with `@testing-library/react-native`.
6. Know how to `lint` your project with `eslint`.
7. Know how to localize your project with [facebook fbt](https://medium.com/dooboolab/localizing-react-app-with-fbt-instead-of-i18n-90822e0cb373).

INSTALL

npm install && npm start
// or
yarn && yarn start

Structures

app/
├─ .dooboo // necessary if using dooboo-cli
├─ assets
│  └─ icons // app icons
│  └─ images // app images like background images
├─ node_modules/
├─ src/
│  └─ apis
│  └─ components
│     └─ navigations
│     └─ pages
│     └─ uis
│  └─ graphql
│  └─ hooks
│  └─ providers
│  └─ relay
│  └─ types
│  └─ utils
│  └─ App.tsx
│  └─ index.js
│  └─ styled.d.ts
│  └─ theme.ts
├─ test/
├─ web-build/
├─ .env
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .watchmanconfig
├─ app.json
├─ App.tsx
├─ babel.config.js
├─ codegen.yml
├─ config.ts
├─ environment.d.ts
├─ jest.config.ts
├─ metro.config.js
├─ package.json
├─ README.md
├─ relay.config.js
├─ schema.graphql
├─ STRINGS.ts
├─ tsconfig.json
├─ webpack.config.js
└─ yarn.lock

.ENV

Run below to make your own app variables.

cp .env.sample .env

• env variables

  Name	default	required	description
  GRAPHQL_URL	http://localhost:4000/graphql	yes
  ROOT_URL	http://localhost:4000	yes
  SYBSCRIPTION_URL	http://localhost:4000/graphql	yes
  facebookAppId
  googleWebClientId
  googleAndroidClientId
  googleIOSClientId

Adding FCM

To use FCM in android, you need to download own google-services.json from firebase and put that in root folder.

Running the project

Running the project is as simple as running

yarn start

This runs the start script specified in our package.json, and will spawn off a server which reloads the page as we save our files. Typically the server runs at http://localhost:8080, but should be automatically opened for you.

Testing the project

Testing is also just a command away:

yarn 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.

Localization

We've defined Localization strings in STRINGS.js which is in root dir. We used react-native-localization pacakage for this one.

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

const en = {
  HELLO: 'Hello',
  LOGIN: 'Login',
  EMAIL: 'Email',
  PASSWORD: 'Password',
  SIGN_UP: 'SIGN UP',
  FORGOT_PW: 'Forgot password?',
  NAVIGATE: 'Navigate',
  CHANGE_THEME: 'Change theme',
};

const ko = {
  HELLO: '안녕하세요',
  LOGIN: '로그인',
  EMAIL: '이메일',
  PASSWORD: '패스워드',
  SIGN_UP: '회원가입',
  FORGOT_PW: '비밀번호를 잊어버리셨나요?',
  NAVIGATE: '이동하기',
  CHANGE_THEME: '테마변경',
};

i18n.fallbacks = true;
i18n.translations = { en, ko };
i18n.locale = Localization.locale;

export const getString = (param: string, mapObj?: Record<string, unknown>) => {
  if (mapObj) {
    i18n.t(param, mapObj);
  }
  return i18n.t(param);
};

Troubleshoot

• Experiencing Localization.locale undefined? Setup your emulator once again as decribed here.