{"id":27867470,"url":"https://github.com/hmarques98/template-react-native-typescript","last_synced_at":"2025-05-04T22:46:04.772Z","repository":{"id":41122051,"uuid":"367491415","full_name":"hmarques98/template-react-native-typescript","owner":"hmarques98","description":"Minimal template with best practices and automation scripts for improved developer experience.","archived":false,"fork":false,"pushed_at":"2022-01-23T22:03:28.000Z","size":11289,"stargazers_count":27,"open_issues_count":0,"forks_count":13,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T23:50:05.270Z","etag":null,"topics":["react","react-components","react-native","react-query","redux-toolkit","template-react-native","typescript-template"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@hmarques98/react-native-template-typescript","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/hmarques98.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}},"created_at":"2021-05-14T22:18:14.000Z","updated_at":"2025-01-06T11:12:23.000Z","dependencies_parsed_at":"2022-08-22T22:20:11.657Z","dependency_job_id":null,"html_url":"https://github.com/hmarques98/template-react-native-typescript","commit_stats":null,"previous_names":[],"tags_count":17,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmarques98%2Ftemplate-react-native-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmarques98%2Ftemplate-react-native-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmarques98%2Ftemplate-react-native-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmarques98%2Ftemplate-react-native-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmarques98","download_url":"https://codeload.github.com/hmarques98/template-react-native-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252411763,"owners_count":21743602,"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-components","react-native","react-query","redux-toolkit","template-react-native","typescript-template"],"created_at":"2025-05-04T22:46:04.212Z","updated_at":"2025-05-04T22:46:04.760Z","avatar_url":"https://github.com/hmarques98.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :iphone: React Native Template TypeScript\n\n[![npm downloads](https://img.shields.io/npm/dt/@hmarques98/react-native-template-typescript.svg)](https://www.npmjs.com/package/@hmarques98/react-native-template-typescript)\n[![npm version](https://img.shields.io/npm/v/@hmarques98/react-native-template-typescript?color=44BC1C)](https://www.npmjs.com/package/@hmarques98/react-native-template-typescript)\n[![Publish and increment to NPM](https://github.com/hmarques98/template-react-native-typescript/actions/workflows/publishNPM.yml/badge.svg)](https://github.com/hmarques98/template-react-native-typescript/actions/workflows/publishNPM.yml)\n\n\u003cp align=\"center\" \u003e\n  \u003cimg\n    height=\"480px\"\n    src=\"docs/assets/list_loaded.png\"\n    alt=\"Template landing screen preview\"\n  /\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\nAn opinionated template to bootstrap your next React Native app with all the time-wasting packages you need to have.\n\nIn this template is started with example fetching datas from Star Wars Api, where is showing Peoples with Name and HomeWorld and in the next screen when on pressed more details about People. In /docs/assets there are more photos.\n## :star: Features in this template \n- React Query for easy and more controlled requisitions.\n- CodePush integration.\n- Fastlane integration for automated builds.\n- BootSplash for faster splashScreen configurations.\n- Redux Toolkit for easy global state management.\n- StoryBook for components documentation.\n- React Testing Library and Detox for automated tests. \n- Sentry for see logs in production.\n- And so much more.\n\n## :computer: Contributions are very welcome 🤝\n\n### Let's build the best React Native template together 🚀\n\nPreconfigured with\n\n- Synced with the recommended [TypeScript template](https://reactnative.dev/docs/typescript#getting-started-with-typescript)\n- [Storybook](https://github.com/storybookjs/storybook/) The UI component explorer. Develop, document, \u0026 test React Native components\n- [React Query](https://github.com/tannerlinsley/react-query) for api calls\n- [Axios](https://github.com/tannerlinsley/react-query) for fetch api calls\n- [Redux Toolkit](https://redux-toolkit.js.org/) for global state.\n- [React Navigation](https://reactnavigation.org/) (**v5**) for navigation and deeplinking.\n- [styled-components](https://github.com/styled-components/styled-components)\n- [styled-system](https://github.com/styled-system/styled-system)\n- [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) because splash screens are cool.\n- [react-native-svg](https://github.com/react-native-community/react-native-svg) because svg.\n- [react-native-config](https://github.com/luggit/react-native-config) to manage separate environments (dev, staging, production).\n- [Reanimated](https://software-mansion.github.io/react-native-reanimated/) for animations.\n- [react-native-keychain](https://github.com/oblador/react-native-keychain) for Keychain/Keystore access.\n- [react-native-permissions](https://github.com/zoontek/react-native-permissions) unified permissions api for iOS and Android.\n- [NetInfo](https://github.com/react-native-netinfo/react-native-netinfo) Network Info API for Android, iOS, macOS \u0026 Windows.\n- [react-native-appstate-hook](https://github.com/amrlabib/react-native-appstate-hook) handle app state in your app.\n- [react-native-file-logger](https://github.com/BeTomorrow/react-native-file-logger) to log important stuff.\n- [react-i18next](https://github.com/i18next/react-i18next) internationalization.\n- [AsyncStorage](https://github.com/react-native-community/async-storage) you're gonna install it anyway.\n- [FastImage](https://github.com/DylanVann/react-native-fast-image) its more performant\n- [Mirage JS](https://miragejs.com/) the easiest way to mock APIs.\n- [Fastlane](http://fastlane.tools/) for automation.\n- [Code Push](https://github.com/microsoft/react-native-code-push) syncronize JavaScript and Images with over-the-air updates.\n- handy npm scripts.\n- [react-native-testing-library](https://callstack.github.io/react-native-testing-library/) for unit and component tests.\n- [Sentry](https://github.com/getsentry/sentry-react-native) for debugging in production.\n- [Detox](https://github.com/wix/Detox) for e2e.\n\n## Contents\n\n- [Documentation](#documentation)\n- [Getting Started](#getting-started)\n- [Optional Steps](#optional-steps)\n- [Credits](#credits)\n\n## Documentation\n\n- [Libraries](#libraries)\n- [Directory Structure](#directory-structure)\n- [Quick Overview](#quick-overview)\n- [File Walkthrough](./docs/file-walkthrough.md)\n\n## Getting Started\n\nCreate a new project using the template.\n\n- **Note:** the command will fail if you have the global legacy react-native-cli installed. Make sure you uninstall it first. More info at [react-native-community/cli](https://github.com/react-native-community/cli#about).\n\n### RN 0.64.1\n\n```bash\n$ npx react-native init MyApp --template @hmarques98/react-native-template-typescript\n```\n\n## Road Map\n\n- Finish Detox integration\n- Add Docusaurs docs\n- [Codepush Code Signing](https://github.com/microsoft/code-push/tree/v3.0.1/cli#code-signing)\n\n## Optional Steps\n\n#### Connect To Sentry\n\nThis template comes with [Sentry](https://github.com/getsentry/sentry-react-native), but its disabled until you connect your account.\n\nTo connect your account:\n\n```bash\n$ cd MyApp/\n\n# For MacOS\n$ npx sentry-wizard -i reactNative -p ios android\n\n# Other Platforms\n$ npx sentry-wizard -i reactNative -p android\n```\n\nInsert your sentry DSN in each [.env](https://github.com/osamaq/react-native-template/blob/ed37c213eacf0681c4f50f959bad170d46be0ed7/template/.env.prod#L5) file (dev, staging and production) and you're all done.\n\n### Setup deep linking scheme\n\nImplementation was based on react-navigation[instructions](https://reactnavigation.org/docs/deep-linking/#set-up-with-bare-react-native-projects).\n\n1. Update the prefix with wanted URI in `App.tsx`\n\n1. iOS\n\nUpdate `CFBundleURLName` and `CFBundleURLSchemes` to your desired URI\n\n1. Android\n\nUpdate `android:scheme` value inside `\u003cdata\u003e` tag from the `\u003cintent-filter\u003e`\n\n#### Enable Push Notification capability from Xcode\n\nYou must be a member of the Apple Developer Program in order to enable Push Notifications\n\n![Instructions to add push notifications capability](https://i.stack.imgur.com/qsQTx.jpg)\n\n### Setup OneSignal\n\n1. You will need to have [OneSignal Account](https://app.onesignal.com/signup)\n2. Your OneSignal App ID, available in [Keys \u0026 IDs\n   iOS.](https://documentation.onesignal.com/docs/accounts-and-keys#section-app-id)\n\n3. IOS - [Generate an iOS Push Certificate.](https://documentation.onesignal.com/docs/generate-an-ios-push-certificate) You should generate a certificate after adding the Push Notification capability while setting up your iOS app.\n4. Android - [Generate a Google Firebase Server API Key](https://documentation.onesignal.com/docs/generate-a-google-server-api-key)\n5. Optional step for your application to use [Confirmed Deliveries](https://documentation.onesignal.com/docs/confirmed-deliveries) and and increment/decrement [Badges](https://documentation.onesignal.com/docs/badges) through push notifications, you need to set up an App Group for your application.\n\nIn your main app target go back to Signing \u0026 Capabilities \u003e All \u003e + Capability and add App Groups\n\n![Instructions to add push notifications capability](https://files.readme.io/5b72690-Screen_Shot_2020-08-15_at_6.10.59_PM.png)\n\n![Instructions to add push notifications capability](https://files.readme.io/2f271ce-Screen_Shot_2020-08-15_at_6.15.25_PM.png)\n\n![Instructions to add push notifications capability](https://files.readme.io/230100f-c51bffb-Screen_Shot_2020-08-15_at_6.21.25_PM.png)\n\nFor more instructions and doubts, go to [Documentation Integration](https://documentation.onesignal.com/docs/react-native-sdk-setup#step-4-install-for-ios-using-cocoapods-for-ios-apps)\n\n### Setup Code Push\n\n1. You will need to have [AppCenter CLI](https://github.com/microsoft/appcenter-cli) installed\n\n1. Creating an AppCenter account and/or organization and create an app for each platform and environment\n\n1. Copy and Replace the CodePushDeploymentKey in android/app/build.gradle under `buildTypes`\n\n1. Copy and Replace the CodePushDeploymentKey in android/app/build.gradle and XCode -\u003e YourProject -\u003e Build Settings -\u003e `CODE_PUSH_KEY`\n\nYou can retrieve this values by running `appcenter codepush deployment list -a \u003cownerName\u003e/\u003cappName\u003e -k`\n\n## Libraries\n\nLet's briefly go over the benefit of each library included in this template.\n\n### TypeScript\n\nFor type safety ¯\\\\_(ツ)_/¯\n\nBut in all seriousness, if you are considering this template I assume you are a TypeScript fan. If you happen to be a JavaScript user, this template might be overwhelming. If you would like to start learning TypeScript, I suggest bootstrapping with this instead [react-native-community/react-native-template-typescript](https://github.com/react-native-community/react-native-template-typescript) so you can learn at your own pace.\n\n### styled-components\n\nStyle your apps without stress with dynamic styling and painless maintenance. `styled-components` utilises tagged template literals to style your component. Checkout this [Getting started tutorial](https://styled-components.com/docs/basics#getting-started).\n\n### styled-system\n\nStyled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties. Checkout this [Getting started tutorial](https://styled-system.com/#getting-started).\n\n### React Query\n\nHooks for fetching, caching and updating asynchronous data in React.\n\n- Alternative: SWR/Apollo.\n\n### AXIOS\n\nI like to used axios because your interceptors configurations.\n\n### Redux/Redux Toolkit\n\nI'm happy using Redux Toolkit. It's a lot more concise now and I enjoy the redux ecosystem of plugins.\n\nSWR reduces our dependency on Redux for global state. And sometimes React Navigation can be used to send data to the next screen. I try to leverage these two before reaching out to global state.\n\nIf you prefer something else, remove redux and go with that. Do not waste time trying a new state management solution.\n\n### React Navigation\n\nIt is the most popular navigation library. For most apps, this is the best choice.\n\n### react-native-keychain\n\nSave and use credentials from phone's Keychain/Keystore\n\n### react-native-permissions\n\nA unified permissions API for React Native on iOS and Android. For iOS you have to the `Podfile` with permissions pod and update `Info.plist` with wanted permissions descriptions. For Android add wanted permissions in `AndroidManifest.xml`\n\n### react-i18next\n\nLocalization using hooks. [React Native example](https://github.com/i18next/react-i18next/tree/master/example/react-native)\n\n### OneSignal\n\nOneSignal is the fastest and most reliable service to send push notifications, in-app messages, and emails to your users on mobile\n\n### Codepush\n\nA React Native app is composed of JavaScript files and any accompanying images, which are bundled together by the packager and distributed as part of a platform-specific binary (i.e. an .ipa or .apk file). Once the app is released, updating either the JavaScript code (e.g. making bug fixes, adding new features) or image assets, requires you to recompile and redistribute the entire binary, which of course, includes any review time associated with the store(s) you are publishing to.\n\nThe CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the \"web-like\" agility of side-loading updates as soon as they are available. It's a win-win!\n\n### Sentry\n\nBenefitial in debugging issues that occur only in release builds. You can view error stack traces for unhandled exceptions. You can also choose to log specific errors in some catch blocks to study how often they occur in production.\n\n### react-native-bootsplash\n\nWorks great for controlling your splash screen.\nTo help about lib\n\n```bash\n$ npx react-native generate-bootsplash --help\n```\n\nFull command usage example to put your SplashScreen\n\n```bash\nnpx react-native generate-bootsplash assets/splash.png \\\n  --background-color=F5FCFF \\\n  --logo-width=100 \\\n  --assets-path=assets \\\n  --flavor=main\n```\n\nOnly iOS follow this instructions from library [BootSplash](https://github.com/zoontek/react-native-bootsplash)\nwhere is saying `Set the BootSplash.storyboard as launch screen file:`\n\n### react-native-svg\n\nPrefer using SVG over images all the time (remember to optimize your SVGs).\n\n### react-native-config\n\nIf you have different development, staging and production variables, this library is very helpful. It allows you to declare environment variables that can be accessed by all 3 sides (android, ios, JavaScript).\n\nAndroid: by default, running `react-native run-android` will use the development .env file. To load .env.staging we must use:\n\n`ENVFILE=.env.staging react-native run-android`\n\n\u003e Note: the above works on MacOS. For windows its a bit different. See [Different Environments](https://github.com/luggit/react-native-config#different-environments).\n\niOS: two additional schemes are created in the Xcode project for staging and production. The corresponding .env file is set via the scheme's pre-action:\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"docs/assets/scheme.png\" alt=\"Scheme's pre-action setting the .env file\" width=\"100%\"\u003e\n\u003c/div\u003e\n\nNPM scripts for running the app with the desired configuration are [included](https://github.com/osamaq/react-native-template/blob/acc4f4ab117bee099a531ad44be1130f9d24df69/template/package.json#L11) for convenience.\n\n### Reanimated\n\nNecessary when creating complex gesture based animations that are highly performant.\n\n### Lottie React Native\n\nLottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!\n\nFor the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.\n\n### react-native-appstate-hook\n\nCustom react hook, built to handle iOS or Android appState in your react component.\n\n### react-native-file-logger\n\nA simple file-logger for React Native with configurable rolling policy, based on CocoaLumberjack on iOS and Logback on Android.\n\n### AsyncStorage\n\nFor caching simple data such as user perferences.\n\n### FastImage\n\nDrop in replacement for the `\u003cImage/\u003e` component. I've found this to give a performance boost on android when rendering many images.\n\n### NetInfo\n\nNetwork Info API for Android, iOS, macOS \u0026 Windows. It allows you to get information on:\n\n- Connection type\n- Connection quality\n\n### react-native-testing-library\n\nFor unit and component testing.\n\n### Detox\n\nFor end-to-end testing.\n\n### Mirage JS\n\nMirage is an in-memory server for intercepting API calls and returning whatever data you want. Very useful for developing before the backend is deployed, and for confirming how the app reacts to different API call outcomes.\n\n### Fastlane\n\nFastlane community has an endless amount of mobile development automation plugins. I currently use it mainly for [automatic versioning](https://osamaq.com/automatic-versioning-for-react-native-apps/), and often for deploying to Microsoft's App Center in [one command](https://github.com/osamaq/reactnative-fastlane-appcenter).\n\nThis template also has a [fastlane command](https://github.com/osamaq/react-native-template/blob/acc4f4ab117bee099a531ad44be1130f9d24df69/template/fastlane/Fastfile#L203) for adding version badges to app icons. Useful outside of production as it makes it easier for QA to tell the app version.\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"docs/assets/ic_launcher.png\" alt=\"App icon with version badge\" width=\"20%\"\u003e\n\u003c/div\u003e\n\n---\n\n\u003e _If you appreciate those libraries and find them useful, please consider supporting them._\n\n## Directory Structure\n\n```\nroot\n├── __mocks__\n├── __tests__\n├── android\n├── ios\n├── storybook\n|   └── addons.js\n|   └── index.js\n|   └── rn_addons.js\n└── src\n    └── components\n    |   └── molecules\n            └── Box\n              └── Box.tsx\n              └── index.tsx\n              └── stories.tsx \n            └── Button\n              └── Button.tsx\n              └── index.tsx\n              └── stories.tsx \n            └── Typography\n              └── Typography.tsx\n              └── index.tsx\n              └── stories.tsx \n    |   └── organisms\n            └── CardPeoples.tsx\n    |   └── StatusBar.tsx\n    |   └── stories.ts\n    └── hooks\n    |   └── useCustomBackBehaviour.tsx\n    |   └── useInfinityQuery.tsx\n    |   └── useReactQuery.tsx\n    |   └── useOneSignal.tsx\n    |   └── useStartupTime.tsx\n    └── interfaces\n    |   └── IPeople.ts\n    └── localization\n    |   └── resources\n    |   |   └── en.json\n    |   |   └── index.ts\n    |   |   └── ro.json\n    |   └── index.tsx\n    └── navigation\n    |   └── RootNavigation.tsx\n    |   └── Router.tsx\n    └── navigation\n    |   ├── RootNavigation.tsx\n    |   └── Router.tsx\n    └── screens\n    |   ├── CharacterDetail.tsx\n    |   ├── Home.tsx\n    |   ├── index.ts\n    └── utils\n        ├── constants.ts\n        └── console.ts\n    └── services\n        ├── axios.ts\n    └── store\n        └── slices\n          └── auth.ts\n          └── index.ts\n        └── index.ts\n        └── rootReducer.ts\n    └── styles\n        ├── colors.ts\n        ├── typography.ts\n        ├── spacing.ts\n        ├── index.ts\n├── plop-templates\n  └── CommonScreen.js.hbs\n  └── Component.js.hbs\n  └── ExportIndex.js.hbs\n  └── Stories.js.hbs\n├── e2e\n├── assets\n├── fastlane\n```\n\n## Credits\n\nThis template is modified from [react-native-typescript-template](https://github.com/react-native-community/react-native-template-typescript) and inspired from Osama Qarem's [React Native template](https://github.com/osamaqarem/react-native-template) and also inspired from Gabriel Moncea [React Native template](https://github.com/gabrielmoncea/react-native-template)\n\nThank you ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarques98%2Ftemplate-react-native-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmarques98%2Ftemplate-react-native-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarques98%2Ftemplate-react-native-typescript/lists"}