{"id":13998606,"url":"https://github.com/gabimoncha/react-native-template","last_synced_at":"2025-10-08T00:31:56.192Z","repository":{"id":39863448,"uuid":"329657175","full_name":"gabimoncha/react-native-template","owner":"gabimoncha","description":"An opinionated template to bootstrap your next React Native app with all the time-wasting packages you need to have.","archived":true,"fork":false,"pushed_at":"2022-10-20T03:25:35.000Z","size":471,"stargazers_count":138,"open_issues_count":4,"forks_count":22,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-15T19:41:46.579Z","etag":null,"topics":["authentication-flow","codepush","detox","filelogger","jest","netinfo","push-notifications","react-native","react-navigation","react-query","sentry","styled-components","styled-system","zustand"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@gabimoncha/react-native-template","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/gabimoncha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2021-01-14T15:33:47.000Z","updated_at":"2025-01-14T04:44:43.000Z","dependencies_parsed_at":"2022-09-09T01:13:51.536Z","dependency_job_id":null,"html_url":"https://github.com/gabimoncha/react-native-template","commit_stats":null,"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabimoncha%2Freact-native-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabimoncha%2Freact-native-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabimoncha%2Freact-native-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gabimoncha%2Freact-native-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gabimoncha","download_url":"https://codeload.github.com/gabimoncha/react-native-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235669382,"owners_count":19026815,"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":["authentication-flow","codepush","detox","filelogger","jest","netinfo","push-notifications","react-native","react-navigation","react-query","sentry","styled-components","styled-system","zustand"],"created_at":"2024-08-09T19:01:50.273Z","updated_at":"2025-10-08T00:31:50.878Z","avatar_url":"https://github.com/gabimoncha.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# :space_invader: React Native Template TypeScript with Goodies ![npm](https://img.shields.io/npm/dw/@gabimoncha/react-native-template)\n\nAn opinionated template to bootstrap your next React Native app with all the time-wasting packages you need to have.\n\n## :computer: Contributions are very welcome 🤝\n\n### Let's build the best React Native template together 🚀\n\nPlease check out the [contributing document](CONTRIBUTING.md).\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- [Zustand](https://github.com/pmndrs/zustand) instead of Redux\n- [styled-components](https://github.com/styled-components/styled-components)\n- [styled-system](https://github.com/styled-system/styled-system)\n- [React Navigation](https://reactnavigation.org/) for navigation and deeplinking.\n- [Wix React Native Notifications](https://github.com/wix/react-native-notifications) native notifications.\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- [react-i18next](https://github.com/i18next/react-i18next) internationalization.\n- [Code Push](https://github.com/microsoft/react-native-code-push) syncronize JavaScript and Images with over-the-air updates.\n- [Crisp chat](https://github.com/walterholohan/react-native-crisp-chat-sdk) free live customer support.\n- [Sentry](https://github.com/getsentry/sentry-react-native) for debugging in production.\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-native-svg](https://github.com/react-native-community/react-native-svg) because svg.\n- [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv)\n- [AsyncStorage](https://github.com/react-native-community/async-storage) you're gonna install it anyway.\n- [NetInfo](https://github.com/react-native-netinfo/react-native-netinfo) Network Info API for Android, iOS, macOS \u0026 Windows.\n- [FastImage](https://github.com/DylanVann/react-native-fast-image) its more performant.\n- [react-native-testing-library](https://callstack.github.io/react-native-testing-library/) for unit and component tests.\n- [Detox](https://github.com/wix/Detox) for e2e.\n- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) to avoid re-renders.\n\n## Contents\n\n- [Documentation](#documentation)\n- [Getting Started](#getting-started)\n- [Road Map](#road-map)\n- [Optional Steps](#optional-steps)\n- [Credits](#credits)\n\n## Documentation\n\n- [Libraries](#libraries)\n- [Directory Structure](#directory-structure)\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.0\n\n```bash\nnpx react-native init MyApp --template @gabimoncha/react-native-template\n```\n\n#### React Native \u003c=\u003e Template Version\n\n| React Native | Template |\n| ------------ | -------- |\n| 0.64         | 1.1.2    |\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#### Set up 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#### Set up notifications\n\n1. Android\nCreate a Firebase project, change bundle id, register your app in Firebase, replace configuration file android/app/google-services.json\n![Instructions to get the configuration file](https://firebase.google.com/docs/android/setup#console)\n\n1. iOS\nEnable Push Notification capability from Xcode\nYou must be a member of the Apple Developer Program in order to enable Push Notifications\n![Instructions to add push notifications capability](https://i.stack.imgur.com/qsQTx.jpg)\n\n#### Customize notification appearance on Android\n\nStarting Android 10 (API 29), notification icons should be glyphs. You need to follow this step to [customize the notification appearance](https://wix.github.io/react-native-notifications/docs/installation-android/#step-6-customize-the-appearance).\n\n#### Set up 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#### Connect To Crisp chat\n\nRegister an account and website on [the platform](https://crisp.chat). Go to Settings \u003e Website settings \u003e Select website \u003e Set up Instructions \u003e Copy Website ID and replace it in `AppDelegate.m` and `MainApplication.java`\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#### Add project email for the FileLogger\n\nUpdate project email used by `sendLoggedFiles` method in `Home.tsx`\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### Storybook\n\nStorybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components\n\n### React Query\n\nHooks for fetching, caching and updating asynchronous data in React.\n\n### Zustand\n\nA small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.\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 Navigation\n\nRouting and navigation for your React Native apps Platform-specific look-and-feel with smooth animations and gestures.\n\n### Wix React Native Notifications\n\nHandle all the aspects of push notifications for your app, including remote and local notifications, interactive notifications, silent notifications, and more.\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### 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### Crisp chat\n\nA free alternative to Intercom or Zendesk, for startups and SMBs.\n[Crisp chat](https://crisp.chat)\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-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### react-native-svg\n\nPrefer using SVG over images all the time (remember to [optimize](https://jakearchibald.github.io/svgomg/) your SVGs).\n\n### react-native-dotenv\n\nUsing environment variables in your React Native project\n\n### AsyncStorage\n\nFor caching simple data such as user preferences.\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### FastImage\n\nReplacement for the `\u003cImage/\u003e` component. Gives a performance boost and imaga preload.\n\n### react-native-testing-library\n\nFor unit and component testing.\n\n### Detox\n\nFor end-to-end testing.\n\n### why-did-you-render\n\nFix avoidable re-renders\n\n## Directory Structure\n\n```\nroot\n├── __tests__\n├── android\n├── ios\n├── storybook\n|   └── addons.js\n|   └── index.js\n|   └── rn_addons.js\n└── src\n    └── components\n    |   └── LanguageButton\n    |   |   └── index.tsx\n    |   |   └── LanguageButton.tsx\n    |   |   └── stories.tsx\n    |   └── Counter.tsx\n    |   └── CustomScreen.tsx\n    |   └── CustomText.tsx\n    |   └── StatusBar.tsx\n    |   └── stories.ts\n    └── hooks\n    |   └── useCustomBackBehaviour.tsx\n    |   └── useMockApi.tsx\n    |   └── useNotification.tsx\n    |   └── usePrevious.tsx\n    └── localization\n    |   └── resources\n    |   |   └── en.json\n    |   |   └── index.ts\n    |   |   └── ro.json\n    |   └── index.tsx\n    └── modules\n    |   └── auth\n    |   |   └── hooks\n    |   |   |   └── useKeychainBiometrics.tsx\n    |   |   |   └── useKeychainCredentials.tsx\n    |   |   |   └── useSupportedBiometry.tsx\n    |   |   └── screens\n    |   |   |   └── index.tsx\n    |   |   |   └── Onboarding.tsx\n    |   |   |   └── ResetPassword.tsx\n    |   |   └── store\n    |   |   |   └── index.ts\n    |   └── \u003cyour_app_modules\u003e\n    └── navigation\n    |   ├── navigatorMethods.tsx\n    |   └── Router.tsx\n    └── screens\n    |   ├── CustomWebView.tsx\n    |   ├── Home.tsx\n    |   ├── index.ts\n    |   └── NetworkError.tsx\n    └── utils\n        ├── colors.ts\n        └── console.ts\n\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 temaplate](https://github.com/osamaqarem/react-native-template)\n\nThank you ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabimoncha%2Freact-native-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabimoncha%2Freact-native-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabimoncha%2Freact-native-template/lists"}