Skip to content
TalkTalk renewal. Open source chat app built in expo bare work flow
TypeScript Objective-C Java JavaScript Other
Branch: master
Clone or download
hyochan Implement [ChannelCreate] screen to start chatting with multiple users (
#113)

* Enhance [SearchTextInput] for [SearchUser]

* Add [ChannelCreate] screen and fab in [Channel] screen

* Enhance [ErrorView] and use it in EmptyListComponent

- Add ability to set custom title, body, buttonText and hide button.

* Implement [ChannelCreate] screen wich [CheckBox]

* CheckBox toggle on press

* Fix [UserListItem] child width

* Add ability render tablet with testUtils

* Improve test coverage
Latest commit 3238e4a Feb 24, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Organize release key credentials for android in .env (#110) Feb 20, 2020
.dooboo Initial commit built in dooboo-cli Sep 12, 2019
.expo Migration to bare work flow (#108) Feb 19, 2020
.github Group MessageListItem by date (last minute) & more advanced typings (#97 Jan 27, 2020
.vscode [Upgrade] expo to sdk 36 (#78) Dec 22, 2019
__mocks__ [Feature] Add a section list and changePassword Modal to Setting scre… Dec 25, 2019
android Organize release key credentials for android in .env (#110) Feb 20, 2020
assets Implement [ChannelCreate] screen to start chatting with multiple users ( Feb 23, 2020
ios Organize release key credentials for android in .env (#110) Feb 20, 2020
src Implement [ChannelCreate] screen to start chatting with multiple users ( Feb 23, 2020
test Implement [ChannelCreate] screen to start chatting with multiple users ( Feb 23, 2020
.all-contributorsrc docs: add ilikeu7246 as a contributor (#82) Dec 29, 2019
.env.sample Add sample error container to handle graphql error (#112) Feb 23, 2020
.eslintrc.js Enhance typings for [Chat] message (#48) Nov 3, 2019
.gitignore Organize release key credentials for android in .env (#110) Feb 20, 2020
.ncurc.json Migration to bare work flow (#108) Feb 19, 2020
.prettierrc.js [Feature] Float [ProfileModal] on profile click (#42) Nov 27, 2019
.svgrrc Refactor code base & more migration from @dooboo-ui/native (#87) Jan 11, 2020
.watchmanconfig Initial commit built in dooboo-cli Sep 12, 2019
App.tsx Initial commit built in dooboo-cli Sep 12, 2019
CLA.md Config/setup (#1) Sep 12, 2019
CODE_OF_CONDUCT.md Config/setup (#1) Sep 12, 2019
CONTRIBUTING.md Migration to bare work flow (#108) Feb 19, 2020
LICENSE Config/setup (#1) Sep 12, 2019
README.md Organize release key credentials for android in .env (#110) Feb 20, 2020
STRINGS.ts [Enhance][Config] Update test code (#85) Jan 7, 2020
app.json Migration to bare work flow (#108) Feb 19, 2020
babel.config.js Migration to bare work flow (#108) Feb 19, 2020
codecov.yml Config/setup (#1) Sep 12, 2019
environment.d.ts Refactor code base & more migration from @dooboo-ui/native (#87) Jan 11, 2020
index.js Migration to bare work flow (#108) Feb 19, 2020
jest.config.js Roadmap to tablet screen support (#100) Feb 4, 2020
metro.config.js Add sample url and retrieve authType from me query Feb 10, 2020
package.json Migration to bare work flow (#108) Feb 19, 2020
tsconfig.jest.json Initial commit built in dooboo-cli Sep 12, 2019
tsconfig.json Apollo integration and migration due to package updates (#96) Jan 26, 2020
yarn.lock Migration to bare work flow (#108) Feb 19, 2020

README.md

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 `react-native` app with bare work 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.
8. Know the hack of e2e encryption chat app.

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
│  └─ apollo
│  └─ components
│     └─ navigations
│     └─ screen
│     └─ shared
│  └─ graphql
│  └─ hooks
│  └─ contexts
│  └─ providers
│  └─ types
│  └─ utils
│  └─ App.tsx
│  └─ styled.d.ts
│  └─ theme.ts
├─ test/
├─ .env.sample
├─ .eslintrc.js
├─ .buckconfig
├─ .gitattributes
├─ .gitignore
├─ .watchmanconfig
├─ app.json
├─ babel.config.js
├─ CLA.md
├─ CODE_OF_CONDUCT.md
├─ CONTRIBUTING.md
├─ environment.d.ts
├─ index.js
├─ jest.config.js
├─ metro.config.js
├─ package.json
├─ README.md
├─ STRINGS.ts
├─ tsconfig.jest.json
├─ tsconfig.json
└─ yarn.lock

.ENV

Run below to make your own app variables.

cp .env.sample .env

  • env variables

MYAPP_RELEASE_STORE_FILE= MYAPP_RELEASE_KEY_ALIAS= MYAPP_RELEASE_STORE_PASSWORD= MYAPP_RELEASE_KEY_PASSWORD=

Name default required description
iOSClientId CLIENT_ID in GoogleService-Info.plist firebase ios app project.
GRAPHQL_URL http://stage.hackatalk.dev/graphql yes
ROOT_URL http://stage.hackatalk.dev yes
MYAPP_RELEASE_STORE_FILE
MYAPP_RELEASE_KEY_ALIAS
MYAPP_RELEASE_STORE_PASSWORD
MYAPP_RELEASE_KEY_PASSWORD
iOSClientId=iOSClientId
GRAPHQL_URL=http://stage.hackatalk.dev/graphql
ROOT_URL=http://stage.hackatalk.dev

# Android
MYAPP_RELEASE_STORE_FILE=
MYAPP_RELEASE_KEY_ALIAS=
MYAPP_RELEASE_STORE_PASSWORD=
MYAPP_RELEASE_KEY_PASSWORD=

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?: 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

Version of react-native

0.61

React navigation

5

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

💻 ⚠️ 📖

Youngsu Han

💻 ⚠️

Dong-Kyun Ko

📖 💻 ⚠️

Hwasung Kim

💻 ⚠️

Choi, Jongtaek

💻 ⚠️ 📖

Huy, Tae Young

💻 ⚠️ 📖

YongPilMoon

💻 ⚠️ 📖

bumjoo.lee

💻 ⚠️

hankkuu

💻

Minseok

💻 ⚠️

cwalker

💻 ⚠️

TaeSeong Park

💻 ⚠️

daheeahn

💻 ⚠️

Eunho Lee

💻 ⚠️

Jeff Gu Kang

💻 ⚠️

dlgmltjr0925

💻 ⚠️

Jaeho Cho (Barney)

💻

jinsun Park

💻 ⚠️

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

You can’t perform that action at this time.