/hackatalk-mobile

TalkTalk renewal. Open source chat app built in expo.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

HackaTalk

CircleCI codecov All Contributors PRs Welcome

aTmc5jrhbo

Contributing to HackaTalk

Specification

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 test code with `@testing-library/react-native`.
5. Know how to `lint` your project with `eslint`.
6. Know how to localize your project.

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
│     └─ screen
│     └─ shared
│  └─ contexts
│  └─ hooks
│  └─ utils
│  └─ App.tsx
├─ test/
├─ .buckconfig
├─ .gitattributes
├─ .gitignore
├─ .watchmanconfig
├─ app.sample.json
├─ babel.config.js
├─ index.js
├─ jest.config.js
├─ GoogleService-Info.plist
├─ google-services.json
├─ package.json
├─ README.md
├─ STRINGS.js
├─ tsconfig.json
└─ tslint.json

app.json

Run below to make your own app variables.

cp app.sample.json app.json

  • app variables

    Name Description required? default
    facebookAppId facebook app id true null
    facebookDisplayName facebook display name true hackatalk
    ios.config.googleSignIn.reservedClientId REVERSED_CLIENT_ID in GoogleService-Info.plist firebase ios app project. true {our test ios}
    android.config.googleSignIn.certificateHash SHA1 or SHA256 hash keys from expo fetch:android:hashes true {our test ios}
    ...
      "ios": {
        "supportsTablet": false,
        "bundleIdentifier": "com.dooboolab.hackatalk",
        "config": {
          "googleSignIn": {
            "reservedClientId": "<reservedClientId>"
          }
        }
      },
      "android": {
        "package": "com.dooboolab.hackatalk",
        "googleServicesFile": "./google-services.json",
        "config": {
          "googleSignIn": {
            "certificateHash": "<certificateHash>"
          }
        }
      }
    ...
    • Add expo key hash if you want to sign in with facebook in expo client. rRW++LUjmZZ+58EbN5DVhGAnkX4=

config.ts

Run below to make your own config variables.

cp config.sample.ts config.ts

  • config variables

    Name Description required? default
    iOSClientId CLIENT_ID in GoogleService-Info.plist firebase ios app project. true {our test ios clientId}
    iOSExpoClientId CLIENT_ID in GoogleService-Info.plist ios app project with host.exp.exponent true {our test ios clientId}
    androidExpoClientId CLIENT_ID in google-service.json android app project with host.exp.exponent true {our test and clientId}
    export const iOSClientId = '';
    export const iOSExpoClientId = '';
    export const androidExpoClientId = '';

    For android, you should run openssl rand -base64 32 | openssl sha1 -c and paste the result in your host.exp.exponent firebase project. Also note that you can't use googleSignIn in emulator.

Running the project

Running the project is as simple as running

npm run 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:

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.

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?: object) => {
  if (mapObj) {
    i18n.t(param, mapObj);
  }
  return i18n.t(param);
};

Android

  1. Create new Android project
  2. Set package name com.dooboolab.hackatalk
  3. Set SHA1 or SHA256 hash keys from expo fetch:android:hashes
  4. Download google-services.json to hackatalk root folder

iOS

  1. Create new iOS project
  2. Set bundleIdentifier com.dooboolab.hackatalk
  3. Download GoogleService-Info.plist to hackatalk root folder

Expo version

35

React navigation

3

Troubleshoot

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Hyo Chan Jang
Hyo Chan Jang

💻 ⚠️ 📖
Youngsu Han
Youngsu Han

💻 ⚠️
Dong-Kyun Ko
Dong-Kyun Ko

📖 💻 ⚠️
Hwasung Kim
Hwasung Kim

💻 ⚠️
Choi, Jongtaek
Choi, Jongtaek

💻 ⚠️ 📖
Huy, Tae Young
Huy, Tae Young

💻 ⚠️ 📖
YongPilMoon
YongPilMoon

💻 ⚠️ 📖
bumjoo.lee
bumjoo.lee

💻 ⚠️
hankkuu
hankkuu

💻
Minseok
Minseok

💻 ⚠️
cwalker
cwalker

💻 ⚠️
TaeSeong Park
TaeSeong Park

💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!