HackaTalk
HackaTalk
Contributing to - See also
- dooboolab's vision-and-mission
- dooboolab's code of conduct
- Contributing
Specification
- react-native
- react-navigation
- react-native-unimodules
- typescript
- localization
- styled-components
- ts-jest
- @testing-library/react-native
- react-hook
- graphql
- apollo-client
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 | https://hackatalk.azurewebsites.net/graphql |
yes | |
ROOT_URL | https://hackatalk.azurewebsites.net |
yes | |
MYAPP_RELEASE_STORE_FILE | |||
MYAPP_RELEASE_KEY_ALIAS | |||
MYAPP_RELEASE_STORE_PASSWORD | |||
MYAPP_RELEASE_KEY_PASSWORD |
iOSClientId=iOSClientId
GRAPHQL_URL=https://hackatalk.azurewebsites.net/graphql
ROOT_URL=https://hackatalk.azurewebsites.net
# 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?: Record<string, unknown>) => {
if (mapObj) {
i18n.t(param, mapObj);
}
return i18n.t(param);
};
Android
- Create new Android project
- Set package name com.dooboolab.hackatalk
- Set SHA1 or SHA256 hash keys from
expo fetch:android:hashes
- Download
google-services.json
to hackatalk root folder
iOS
- Create new iOS project
- Set bundleIdentifier com.dooboolab.hackatalk
- 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. - Build failing with
virgil sdk
? Here is workaround.
✨
Contributors Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!