{"id":27870810,"url":"https://github.com/newbiebr/typescript-react-native-starter","last_synced_at":"2025-06-11T20:04:05.979Z","repository":{"id":38375838,"uuid":"195459553","full_name":"NewBieBR/typescript-react-native-starter","owner":"NewBieBR","description":"A highly scalable foundation with a focus on best pratices and simplicity to start your React Native project in seconds.","archived":false,"fork":false,"pushed_at":"2023-07-18T20:25:01.000Z","size":22979,"stargazers_count":235,"open_issues_count":8,"forks_count":56,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-04T23:36:36.334Z","etag":null,"topics":["boilerplate","codecov","react","react-native","react-navigation","redux","starter","starter-kit","typescript","typescript-react-native-starter"],"latest_commit_sha":null,"homepage":"","language":"Java","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/NewBieBR.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-05T19:41:25.000Z","updated_at":"2025-02-07T13:32:04.000Z","dependencies_parsed_at":"2025-05-04T23:42:37.215Z","dependency_job_id":null,"html_url":"https://github.com/NewBieBR/typescript-react-native-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NewBieBR/typescript-react-native-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewBieBR%2Ftypescript-react-native-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewBieBR%2Ftypescript-react-native-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewBieBR%2Ftypescript-react-native-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewBieBR%2Ftypescript-react-native-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NewBieBR","download_url":"https://codeload.github.com/NewBieBR/typescript-react-native-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NewBieBR%2Ftypescript-react-native-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259329354,"owners_count":22841428,"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":["boilerplate","codecov","react","react-native","react-navigation","redux","starter","starter-kit","typescript","typescript-react-native-starter"],"created_at":"2025-05-04T23:26:53.287Z","updated_at":"2025-06-11T20:04:05.925Z","avatar_url":"https://github.com/NewBieBR.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"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://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=\"./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\n```bash\nyarn global add trnc\n```\n\n```bash\ntrnc init \u003cProjectName\u003e\n```\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 (and more)\n\n      ```javascript\n      import { createAction } from 'typesafe-actions';\n\n      export const myAction = createAction('MY_ACTION', (payload) =\u003e payload)();\n      ```\n\n  - [Redux Saga](https://github.com/redux-saga/redux-saga): side effect model for Redux\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), [react-native-testing-library](https://github.com/callstack/react-native-testing-library) and [redux-saga-test-plan](https://github.com/jfairbank/redux-saga-test-plan)\n- **Linting**\n  - Eslint configured for React Native\n  - VSCode Prettier compatible\n  - Useful plugins installed (see  `.eslintrc.js`)\n\n- **Internationalization and localization**\n  - [react-i18next](https://github.com/i18next/react-i18next): easy to use package for i18n\n\n- **Others**\n  - Absolute import from `src`:\n    Before:\n    ```JSX\n     import HomePage from '../../../../containers/HomePage'\n    ```\n\n    After:\n    ```JSX\n     import HomePage from 'src/containers/HomePage'\n    ```\n  - [react-native-normalize](https://github.com/NewBieBR/react-native-normalize): make your app responsive easily\n  - [styled-components](https://github.com/styled-components/styled-components):  allows you to write actual CSS code to style your components\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    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  - 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  - [Splash screen generator](https://github.com/zoontek/react-native-bootsplash): generate splash screen easily\n\n## Project Structure\n\n```\n├── android\n├── app.json\n├── assets                               // All assets: images, videos, ...\n├── credentials                          // (gitignore) Private informations: API keys,...\n├── index.js\n├── ios\n├── publishing                           // Icon, screenshots, preview,... for App Store \u0026 Play Store\n├── __tests__                            // Unit tests\n│   ├── App.test.tsx                     // App component's tests\n│   └── components\n│       └── MyComponent.test.txs\n└── src\n    ├── App.tsx                          // Root component\n    ├── store.ts\n    ├── theme.ts\n    ├── i18n.ts\n    ├── modules\n    │   ├── app\n    │   │   ├── reducer.ts               \n    │   │   ├── actions.ts               \n    │   │   └── selectors.ts                   \n    │   └── auth\n    │       └── ...                   \n    ├── components\n    │   ├── ...\n    │   └── MyComponent.tsx\n    ├── constants\n    │   └── colors.ts\n    ├── navigators\n    │   ├── ...\n    │   ├── MainBottomTab.tsx\n    │   └── AuthStack.tsx\n    ├── pages\n    │   ├── ...\n    │   ├── SignupPage.tsx\n    │   └── LoginPage.tsx\n    ├── types                            // Type declarations\n    │   └── index.d.ts\n    ├── lib                              // Libraries, services,...\n    ├── sagas                            // Redux sagas\n    ├── hooks\n    └── utils                            // Utilities\n```\n\n## Manual Installation\n\n- Clone this repo\n\n  ```\n  git clone git@github.com:NewBieBR/typescript-react-native-starter.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## Recommended configurations\n\n- [Sentry](https://sentry.io/for/react-native/) for error tracking\n\n- [Codepush](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/) for Over-the-Air distributions\n\n- [Fastlane](https://docs.fastlane.tools/) for deployment automations\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\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\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/documentation/docs/3_Guides/BetaBuild.md) for more details\n- [Fastlane's documentation](https://docs.fastlane.tools/getting-started/cross-platform/react-native/) for React Native\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewbiebr%2Ftypescript-react-native-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewbiebr%2Ftypescript-react-native-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewbiebr%2Ftypescript-react-native-starter/lists"}