{"id":15908200,"url":"https://github.com/fxcosta/react-native-typescript-template","last_synced_at":"2026-03-05T20:45:35.819Z","repository":{"id":40783294,"uuid":"262873097","full_name":"fxcosta/react-native-typescript-template","owner":"fxcosta","description":"Template boilerplate for React Native using Typescript, Redux (duck pattern), Redux-saga, React navigation, etc","archived":false,"fork":false,"pushed_at":"2022-12-11T05:23:20.000Z","size":4029,"stargazers_count":8,"open_issues_count":16,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-13T14:40:08.854Z","etag":null,"topics":["ducks-pattern","jest","react-native","react-navigation-v5","redux","redux-saga","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fxcosta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-10T20:50:10.000Z","updated_at":"2024-05-20T19:43:12.000Z","dependencies_parsed_at":"2023-01-26T16:30:31.848Z","dependency_job_id":null,"html_url":"https://github.com/fxcosta/react-native-typescript-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxcosta%2Freact-native-typescript-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxcosta%2Freact-native-typescript-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxcosta%2Freact-native-typescript-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxcosta%2Freact-native-typescript-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fxcosta","download_url":"https://codeload.github.com/fxcosta/react-native-typescript-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820745,"owners_count":16886225,"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":["ducks-pattern","jest","react-native","react-navigation-v5","redux","redux-saga","typescript"],"created_at":"2024-10-06T14:11:51.243Z","updated_at":"2026-03-05T20:45:30.754Z","avatar_url":"https://github.com/fxcosta.png","language":"TypeScript","readme":"\n\u003cdiv align=\"center\"\u003e\u003ch1\u003eTypescript React Native Starter\u003c/h1\u003e\u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003eA highly scalable foundation with a focus on best pratices and simplicity to start your React Native project in seconds.\u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://david-dm.org/NewBieBR/typescript-react-native-starter\"\u003e\n    \u003cimg src=\"https://david-dm.org/NewBieBR/typescript-react-native-starter.svg\" alt=\"Dependency Status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/NewBieBR/typescript-react-native-starter#info=devDependencies\"\u003e\n    \u003cimg src=\"https://david-dm.org/NewBieBR/typescript-react-native-starter/dev-status.svg\" alt=\"devDependency Status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/NewBieBR/typescript-react-native-starter\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/NewBieBR/typescript-react-native-starter.svg?style=popout\" alt=\"Codecov Coverage\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"./CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs Welcome\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Quick Start\n\nSee below\n\n\n## Features\n\n- **Typescript**\n  - [Typescript](https://github.com/microsoft/TypeScript) based: enhance code quality, understandability and scability with `Interface oriented development`\n\n- **Flux State management**\n  - [Redux](https://github.com/reduxjs/redux): predictable state container\n  - [Redux Persist](https://github.com/rt2zz/redux-persist): offline and persistent store\n  - [typesafe-actions](https://github.com/piotrwitek/typesafe-actions): create typesafe actions easily\n  - [Redux Saga](https://github.com/redux-saga/redux-saga): side effect model for Redux using Duck pattern for better modules\n\n- **Navigation**\n  - [React Navigation](https://github.com/react-navigation/react-navigation): easy-to-use navigation solution based on Javascript\n\n- **Unit testing**\n  - Unit tests with [Jest](https://github.com/facebook/jest), [Enzyme](https://github.com/airbnb/enzyme) and [react-native-testing-library](https://github.com/callstack/react-native-testing-library)\n- - [Codecov](https://codecov.io/): coverage report\n\n- **CI/CD**\n\n  - Run linting pre-commit and unit testing pre-push with [husky](https://github.com/typicode/husky)'s hooks\n  - Placeholder App Icon: useful for uploading your app to beta quickly with Fastlane\n  - [App Icon generator](https://github.com/dwmkerr/app-icon#readme): generate all required sizes, label and annotate icon.\n  - Placeholder feature graphic and screenshot to upload beta android app quickly\n\n- **Linting**\n  - Eslint configured for React Native\n  - VSCode Prettier compatible\n\n- **Internationalization and localization**\n  - [react-native-localization](https://github.com/stefalda/ReactNativeLocalization): easy to use package for i18n\n\n- **Others**\n  - [react-native-normalize](https://github.com/NewBieBR/react-native-normalize): make your app responsive easily\n  - [react-native-easy-icon](https://github.com/NewBieBR/react-native-easy-icon#readme): wrapper component of [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) for easier usage:\n\n    Before:\n    ```JSX\n    import AntDesignIcon from 'react-native-vector-icons/AntDesign';\n\n    \u003cAntDesignIcon name=\"home\" color=\"blue\" size={42}/\u003e\n\n    ```\n\n    After:\n    ```JSX\n    import Icon from 'react-native-easy-icon';\n\n    \u003cIcon type=\"antdesign\" name=\"home\" color=\"blue\" size={42}/\u003e\n    ```\n\n  - [Cocoapods](https://github.com/CocoaPods/CocoaPods): iOS dependencies manager\n  - [jetifier](https://github.com/mikehardy/jetifier#readme): transition tool for [React Native 0.60 AndroidX migration](https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support)\n  - [autobind-decorator](https://github.com/andreypopp/autobind-decorator#readme): bind your component's functions easily with a decorator\n\n    Before:\n    ```JSX\n    handleClick()  {...}\n\n    \u003cbutton onClick={ this.handleClick.bind(this) }\u003e\u003c/button\u003e\n    ```\n    After:\n    ```JSX\n    @boundMethod\n    handleClick() {...}\n\n    \u003cbutton onClick={ this.handleClick }\u003e\u003c/button\u003e\n    ```\n\n## Installation\n\n- Clone this repo\n  ```\n  git clone git@github.com:fxcosta/react-native-typescript-template.git \u003cPROJECT_NAME\u003e\n  ```\n  ```\n  cd \u003cPROJECT_NAME\u003e\n  ```\n- Execute the installtion script\n  ```\n    yarn setup \u003cPROJECT_NAME\u003e\n  ```\n    \u003e The script will rename, jetify your project, install imagemagick for app-icon generator, change husky pre-push to 'yarn test' instead of 'yarn codecov, delete README, CODE_OF_CONDUCT, CONTRIBUTING and LICENSE'\n\n#### if (you want to use Codecov) {\n- [Link your github repository with Codecov](https://docs.codecov.io/docs)\n\n- Update your project's informations and the Codecov token `scripts` \u003e `codecov` in `package.json`\n\n- Change `husky` \u003e `pre-push` to `yarn codecov` in `package.json`\n\n#### }\n\n## Manual Installation\n\n- Clone this repo\n\n  ```\n  git clone git@github.com:fxcosta/react-native-typescript-template.git \u003cPROJECT_NAME\u003e\n  ```\n\n  ```\n  cd \u003cPROJECT_NAME\u003e\n  ```\n\n- Install dependencies\n  ```\n  yarn\n  ```\n- Rename the project\n\n  ```\n  yarn run rename \u003cPROJECT_NAME\u003e\n  ```\n\n- Migrate to AndroidX to [support React Native 0.60](https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support)\n\n  ```\n  yarn jetify\n  ```\n\n- Update pods\n\n  ```\n  cd ios \u0026\u0026 pod install\n  ```\n\n- Remove .git\n\n  ```\n  rm -rf .git\n  ```\n\n#### if (you want to use Codecov) {\n- [Link your github repository with Codecov](https://docs.codecov.io/docs)\n\n- Update your project's informations and the Codecov token `scripts` \u003e `codecov` in `package.json`\n\n#### } else {\n- Change `husky` \u003e `pre-push` to `yarn test` in `package.json`\n#### }\n\n## Useful Tips \u0026 Notes\n\n### Apple Store Connect's missing compliance\nThis is added to your `Info.plist` in order to avoid Apple Store Connect's missing compliance warning.\n\n```plist\n\u003ckey\u003eITSAppUsesNonExemptEncryption\u003c/key\u003e\n\u003cfalse/\u003e\n```\nSo you don't have to *Provide Export Compliance Information* at **every push**,\n\n\n\u003cimg src=\"https://i.stack.imgur.com/i7ret.png\" height=\"100\"\u003e\n\n\u003e Note that you might have to set that to `\u003ctrue/\u003e` if your [app uses encryption](https://developer.apple.com/documentation/bundleresources/information_property_list/itsappusesnonexemptencryption)\n\n\n### Responsiveness with react-native-normalize\n\nUse the **normalize** functio from react-native-normalize whenever you have to use a *hard value* (100, 200, 1000,...). This function will adapt your value accordingly to different screen sizes\n\n### Without `normalize`\n\n\u003cimg src=\"https://i.imgur.com/bLbnjsC.jpg\" height=\"250\"/\u003e\n\n### With `normalize`\n\u003cimg src=\"https://i.imgur.com/4IqqAR2.jpg\" height=\"250\"/\u003e\n\n### Static bundle\n\nThe static bundle is built every time you target a physical device, even in Debug. To save time, the bundle generation [is disabled in Debug](https://facebook.github.io/react-native/docs/running-on-device)\n\n\n### react-native-screens\n\nYou can use react-native-screens with react-navigation in order to [improve memory consumption](https://reactnavigation.org/docs/en/community-libraries-and-navigators.html#react-native-screens)\n\n- Install and follow steps in `Usage with react-navigation (without Expo)` from [react-native-screens](https://github.com/kmagiera/react-native-screens)\n\n- Open `./src/index.tsx` and uncomment\n\n```javascript\n// import { enableScreens } from 'react-native-screens';\n// enableScreens();\n```\n\n### React Native Extended Stylesheet\n\n[react-native-extended-stylesheet](https://github.com/vitalets/react-native-extended-stylesheet) is a drop-in replacement of React Native StyleSheet with media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff.\n\n\n### Patch Package\n\nWhen developing with React Native, sometimes I found bugs in the packages that I use so I fix them directly in the *node_modules/package-with-bug*. However, when I install a new package with *npm install*, the changes I made got override.\n\nTo prevent this, I use  [patch-package](https://github.com/ds300/patch-package) which allows me to modify and keep the changes I made.\n\n\u003e So no more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.\n\nExample:\n\n```\n# fix a bug in one of your dependencies\nvim node_modules/some-package/brokenFile.js\n\n# run patch-package to create a .patch file\nnpx patch-package some-package\n\n# commit the patch file to share the fix with your team\ngit add patches/some-package+3.14.15.patch\ngit commit -m \"fix brokenFile.js in some-package\"\n```\n\n### NavigationService\n\nYou can [navigate without navigation prop](https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html) by using **NavigationService** from `src/lib/NavigationService.ts`\n\n```typescript\nimport NavigationService from '../lib/NavigationService';\n\n//...\n\nNavigationService.navigate('ChatScreen', { userName: 'Lucy' });\n```\n\n\n### Beta distribution with Fastlane\n- Install [fastlane](https://docs.fastlane.tools/getting-started/ios/setup/)\n  ```bash\n  # Using RubyGems\n  sudo gem install fastlane -NV\n\n  # Alternatively using Homebrew\n  brew cask install fastlane\n  ```\n\n\u003e If you have issue installing or using fastlane on macos, check this solution: https://github.com/fastlane/fastlane/issues/15467#issuecomment-543093498\n\n#### iOS\n- Open your project Xcode workspace and update your app's `Bundle Identifier` and `Team`\n- Initialize fastlane\n  ```bash\n  cd \u003cPROJECT_NAME\u003e/ios\n  fastlane init\n  ```\n- Distribute your app\n  ```bash\n  fastlane beta\n  ```\n\n#### Android\n- [Collect your Google Credentials](https://docs.fastlane.tools/getting-started/android/setup/#collect-your-google-credentials)\n- Open your project with Android Studio and update your app's `applicationId` in `build.gradle (Module: app)` file\n- Select `Generated Signed Bundle / APK...` from the `Build` menu\n- `Next` then `Create new...` under `Key store path` then `Next` and `Finish`\n- The first time you deploy your application, you MUST upload it into Google Play Console manually. Google don't allow to use theirs APIs for the first upload.\n- Create your application in the [Google Play Console](https://play.google.com/apps/publish/) (unlike for iOS Fastlane cannot do that for you)\n- Make sure that these 4 checkmark icons are green\n    \u003e Recommended order: `Pricing \u0026 distribution`, `Content rating`, `Store listing` and `App releases`\n\n    \u003e You can find the required assets for `Store listing` in the `publishing/android` folder\n\n\n    \u003cimg src=\"https://i.stack.imgur.com/C7vDL.png\" height=\"250\"/\u003e\n\n- Initialize fastlane\n  ```bash\n  cd \u003cPROJECT_NAME\u003e/android\n  fastlane init\n  ```\n- Use the Fastfile from `publishing`\n  ```bash\n  cp publishing/android/fastlane/Fastfile android/fastlane\n  ```\n\n- Distribute your app\n  ```bash\n  fastlane beta\n  ```\n\n    \u003e  There is no official plugin to automatically upgrade android version code (unlike the iOS lane).\nBefore each deployment, be sure to manually upgrade the `versionCode` value inside `android/app/build.gradle`.\n\n#### More\n- Checkout the [Fastlane's beta distribution guide](https://github.com/thecodingmachine/react-native-boilerplate/blob/master/docs/beta%20builds.md) for more details\n- [Fastlane's documentation](https://docs.fastlane.tools/getting-started/cross-platform/react-native/) for React Native\n\n\n### Cocoapod\n\nWhen you run `react-native link` and the linked library has podspec file, then the linking will use Podfile. To disable this feature, remove\n\n```ruby\n# Add new pods below this line\n```\n\nfrom line 24 in `ios/Podfile`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxcosta%2Freact-native-typescript-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffxcosta%2Freact-native-typescript-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxcosta%2Freact-native-typescript-template/lists"}