{"id":13727486,"url":"https://github.com/hyochan/dooboo-native-ts","last_synced_at":"2025-05-07T22:31:21.186Z","repository":{"id":29376715,"uuid":"121505294","full_name":"hyochan/dooboo-native-ts","owner":"hyochan","description":"Complete boilerplate for react-native app. Contains, typescript, react-hook, context-api, ts-jest, localization, navigation and etc.","archived":true,"fork":false,"pushed_at":"2023-03-11T15:09:20.000Z","size":8488,"stargazers_count":81,"open_issues_count":2,"forks_count":27,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-01T19:02:30.619Z","etag":null,"topics":["react","react-hook","react-native","react-navigation","typescript"],"latest_commit_sha":null,"homepage":"https://medium.com/dooboolab/announcing-dooboo-cli-v3-5c9fceeb2ac4","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyochan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-02-14T11:52:51.000Z","updated_at":"2024-10-17T09:32:06.000Z","dependencies_parsed_at":"2024-02-04T20:28:17.569Z","dependency_job_id":"d508f5c1-7bb4-42e8-be31-7785f3bbb6b1","html_url":"https://github.com/hyochan/dooboo-native-ts","commit_stats":null,"previous_names":["dooboolab/dooboo-native-ts","hyochan/dooboo-native-ts","dooboolab-community/dooboo-native-ts"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Fdooboo-native-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Fdooboo-native-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Fdooboo-native-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyochan%2Fdooboo-native-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyochan","download_url":"https://codeload.github.com/hyochan/dooboo-native-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965479,"owners_count":21832896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-hook","react-native","react-navigation","typescript"],"created_at":"2024-08-03T01:04:00.799Z","updated_at":"2025-05-07T22:31:20.495Z","avatar_url":"https://github.com/hyochan.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"### ANNOUNCEMENT\n\nDO NOT MODIFY OR CHANGE THE CODE BEFORE CONFIRMED BY `DOOBOOLAB`. THIS REPOSITORY IS USED IN `DOOBOO-CLI`.\n\n# React Native TS Boilerplate\n\n[![CI](https://github.com/dooboolab/dooboo-native-ts/actions/workflows/ci.yml/badge.svg)](https://github.com/dooboolab/dooboo-native-ts/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/dooboolab/dooboo-native-ts/branch/master/graph/badge.svg)](https://codecov.io/gh/dooboolab/dooboo-native-ts)\n\n\u003e Specification\n\n- [react-native](https://github.com/facebook/react-native)\n- [react-navigation](https://github.com/react-navigation/react-navigation)\n- [typescript](https://github.com/Microsoft/TypeScript)\n- [react-i18n](https://react.i18next.com/)\n- [emotion](https://emotion.sh)\n- [dooboo-ui](https://github.com/dooboolab/dooboo-ui)\n- [ts-jest](https://github.com/kulshekhar/ts-jest)\n- [react-hook](https://reactjs.org/docs/hooks-intro.html)\n- [@testing-library/react-native](https://github.com/callstack/react-native-testing-library)\n- [@testing-library/react-hooks](https://github.com/testing-library/react-hooks-testing-library)\n- [prettier](https://prettier.io)\n\n### Gain points\n\n```\n1. Sample of context-api with `react-hook` (`useContext`).\n2. Know how to structure react native app with typescript.\n3. Know how to navigate between screens with `react-navigation`.\n4. Know how to write test code with `testing-library`.\n5. Know how to `lint` your project with `eslint` for both `ts` and maybe some `js`.\n6. Know how to localize your project.\n```\n\n### INSTALL\n\n```\nnpm install \u0026\u0026 npm start\n// or\nyarn \u0026\u0026 yarn start\n```\n\n### Structures\n\n```text\napp/\n├─ .doobooo // necessary if using dooboo-cli\n├─ assets\n│  └─ icons // app icons\n│  └─ images // app images like background images\n├─ node_modules/\n├─ src/\n│  └─ apis\n│  └─ components\n│     └─ navigations\n│     └─ screen\n│     └─ shared\n│  └─ providers\n│  └─ utils\n│  └─ App.tsx\n├─ test/\n├─ .buckconfig\n├─ .flowconfig\n├─ .gitattributes\n├─ .gitignore\n├─ .watchmanconfig\n├─ app.json\n├─ babel.config.js\n├─ index.js\n├─ jest.config.js\n├─ package.json\n├─ README.md\n├─ STRINGS.js\n├─ tsconfig.json\n└─ eslint.json\n```\n\n### Running the project\n\nRunning the project is as simple as running\n\n```sh\nnpm run start\n```\n\nThis runs the `start` script specified in our `package.json`, and will spawn off a server which reloads the page as we save our files.\nTypically the server runs at `http://localhost:8080`, but should be automatically opened for you.\n\n## Post Installation - iOS\n\n### step 1\n\nIf you get error about Flipper when your first build, Replace all `Podfile` code in `ios` to below.\n\n  \u003cdetails\u003e\n    \u003csummary\u003eCode\u003c/summary\u003e\n\n    ```\n      require_relative '../node_modules/react-native/scripts/react_native_pods'\n      require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'\n      platform :ios, '11.0'\n      target '\u003cYour projectName\u003e' do\n         config = use_native_modules!\n         use_react_native!(\n          :path =\u003e config[:reactNativePath],\n          # to enable hermes on iOS, change `false` to `true` and then install pods\n          :hermes_enabled =\u003e false\n        )\n        pod 'RNVectorIcons', :path =\u003e '../node_modules/react-native-vector-icons'\n        target '\u003cYour projectName\u003eTests' do\n          inherit! :complete\n           # Pods for testing\n        end\n        # Enables Flipper.\n        #\n        # Note that if you have use_frameworks! enabled, Flipper will not work and\n        # you should disable the next line.\n        use_flipper!({'Flipper' =\u003e '0.87.0'})\n        post_install do |installer|\n          react_native_post_install(installer)\n          installer.pods_project.targets.each do |target|\n            target.build_configurations.each do |config|\n              config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'\n              config.build_settings[\"ONLY_ACTIVE_ARCH\"] = \"YES\"\n              config.build_settings[\"EXCLUDED_ARCHS[sdk=iphonesimulator*]\"] = \"arm64\"\n            end\n          end\n        end\n      end\n    ```\n\n  \u003c/details\u003e\n\nAfter replace a code, remove Podfile.lock \u0026 Pods. then run `npx pod-install` to applying.\n\n\\*\\* Note that you should replace a `\u003cYour projectName\u003e` field to your real project name.\n\n### step 2\n\nTo use [dooboo-ui](https://github.com/dooboolab/dooboo-ui) you have to follow the steps below\n\n1. Create `fonts` folder in `ios`, then add `doobooui.ttf` in `node_modules/dooboo-ui/Icons/` to it.\n2. Add folder reference with xcode.\n\u003cdetails\u003e\n  \u003csummary\u003eDetail\u003c/summary\u003e\n  \u003cdiv markdown=\"1\"\u003e\n  \u003cdiv\u003eAdd files to ...\u003c/div\u003e\n  \u003cimg width=\"186\" alt=\"Screen Shot 2021-06-30 at 13 50 58\" src=\"https://user-images.githubusercontent.com/58724686/123933178-17750480-d9cd-11eb-9d72-28fe3751146a.png\"\u003e\n  \u003cdiv\u003eSelect fonts folder you're added, then press Add\u003c/div\u003e\n  \u003cimg width=\"796\" alt=\"Screen Shot 2021-06-30 at 13 51 38\" src=\"https://user-images.githubusercontent.com/58724686/123933381-4b502a00-d9cd-11eb-9240-64158c42e6f3.png\"\u003e\n  \u003c/div\u003e\n\u003c/details\u003e\n\n3. Add a following code to `info.plist` in `ios/project.xcassets`.\n   you can see `doobooui.ttf` on the bottom.\n    \u003cdetails\u003e\n      \u003csummary\u003eCode\u003c/summary\u003e\n\n   ```\n   \u003ckey\u003eUIAppFonts\u003c/key\u003e\n   \u003carray\u003e\n     \u003cstring\u003eAntDesign.ttf\u003c/string\u003e\n     \u003cstring\u003eEntypo.ttf\u003c/string\u003e\n     \u003cstring\u003eEvilIcons.ttf\u003c/string\u003e\n     \u003cstring\u003eFeather.ttf\u003c/string\u003e\n     \u003cstring\u003eFontAwesome.ttf\u003c/string\u003e\n     \u003cstring\u003eFontAwesome5_Brands.ttf\u003c/string\u003e\n     \u003cstring\u003eFontAwesome5_Regular.ttf\u003c/string\u003e\n     \u003cstring\u003eFontAwesome5_Solid.ttf\u003c/string\u003e\n     \u003cstring\u003eFontisto.ttf\u003c/string\u003e\n     \u003cstring\u003eFoundation.ttf\u003c/string\u003e\n     \u003cstring\u003eIonicons.ttf\u003c/string\u003e\n     \u003cstring\u003eMaterialCommunityIcons.ttf\u003c/string\u003e\n     \u003cstring\u003eMaterialIcons.ttf\u003c/string\u003e\n     \u003cstring\u003eOcticons.ttf\u003c/string\u003e\n     \u003cstring\u003eSimpleLineIcons.ttf\u003c/string\u003e\n     \u003cstring\u003eZocial.ttf\u003c/string\u003e\n     \u003cstring\u003edoobooui.ttf\u003c/string\u003e\n   \u003c/array\u003e\n   ```\n\n    \u003c/details\u003e\n\n4. Add `doobooui.ttf` to `build pharses - copy bundle Resource`\n\u003cdetails\u003e\n  \u003csummary\u003eImage\u003c/summary\u003e\n  \u003cimg width=\"869\" alt=\"Screen Shot 2021-06-30 at 17 15 44\" src=\"https://user-images.githubusercontent.com/58724686/123934299-1e504700-d9ce-11eb-8792-6502d2198bcc.png\"\u003e\n\u003c/details\u003e\n\n5. Run `npx pod-install` and Happy code!\n\n## Testing the project\n\nTesting is also just a command away:\n\n```sh\nnpm test\n```\n\n\u003e Result\n\n```\n\u003e jest -u\n\n PASS  src/components/shared/__tests__/Button.test.tsx\n PASS  src/components/screen/__tests__/Intro.test.tsx\n › 2 snapshots written.\n\nSnapshot Summary\n › 2 snapshots written in 1 test suite.\n\nTest Suites: 2 passed, 2 total\nTests:       5 passed, 5 total\nSnapshots:   2 added, 4 passed, 6 total\nTime:        3.055s, estimated 6s\nRan all test suites\n```\n\n### Writing tests with Jest\n\nWe'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.\n\n### Vscode prettier and eslint setup\n\n```\n\"eslint.enable\": true,\n\"eslint.validate\": [\n    \"javascript\",\n    \"javascriptreact\",\n    \"typescript\",\n    \"typescriptreact\"\n],\n// prettier extension setting\n\"editor.formatOnSave\": true,\n\"[javascript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n},\n\"[javascriptreact]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n},\n\"[typescript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n},\n\"[typescriptreact]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n},\n\"prettier.singleQuote\": true,\n\"prettier.trailingComma\": \"all\",\n\"prettier.arrowParens\": \"always\",\n\"prettier.jsxSingleQuote\": true\n```\n\n### Using Context Api\n\nWhenever you add your own Context provider you can add it to `providers/` and use it inside of `providers/index.tsx`\n\n- [Splitting provider is preferred](https://github.com/facebook/react/issues/15156#issuecomment-474590693)\n\n```tsx\n// Add providers here\nconst RootProvider = ({\n  initialThemeType,\n  children,\n}: Props): React.ReactElement =\u003e {\n  return (\n    \u003cAppProvider\u003e\n      \u003cThemeProvider initialThemeType={initialThemeType}\u003e\n        {children}\n      \u003c/ThemeProvider\u003e\n    \u003c/AppProvider\u003e\n  );\n};\n```\n\nThe `RootProvider` is being used at `App.tsx` and test files easily\n\n```tsx\n// App.tsx\nfunction App(): React.ReactElement {\n  return (\n    \u003cRootProvider\u003e\n      \u003cSwitchNavigator /\u003e\n    \u003c/RootProvider\u003e\n  );\n}\n```\n\n```tsx\n// test files\nconst component = (props): React.ReactElement =\u003e {\n  return (\n    \u003cRootProvider initialThemeType\u003e\n      \u003cIntro {...props} /\u003e\n    \u003c/RootProvider\u003e\n  );\n};\n```\n\n\u003e using consistent theme('light') explicitly is encouraged in testing for avoiding unexpected snapshot test errors\n\n### Localization\n\nWe migrate localize lib from [fbt](https://github.com/facebook/fbt) to [react-i18n](https://react.i18next.com/). If you interested in fbt usages refer this [blog](https://medium.com/dooboolab/localizing-react-app-with-fbt-instead-of-i18n-90822e0cb373).\n\nWe've defined localized strings in `src/translates/en/translate.json` for English and `src/translates/ko/translate.json` for Korean. You can add more language code just by creating [language code]/translation.json file in `src/translates/` folder. Then pass that language code to init functions in `i18n.ts`. For further information about usages, Refer [this](https://react.i18next.com/latest/usetranslation-hook).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Fdooboo-native-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyochan%2Fdooboo-native-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyochan%2Fdooboo-native-ts/lists"}