{"id":13838896,"url":"https://github.com/AmitM30/react-native-typescript-boilerplate","last_synced_at":"2025-07-10T23:32:17.525Z","repository":{"id":34435812,"uuid":"167784220","full_name":"AmitM30/react-native-typescript-boilerplate","owner":"AmitM30","description":"React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7)","archived":false,"fork":false,"pushed_at":"2023-03-04T03:31:21.000Z","size":8150,"stargazers_count":287,"open_issues_count":12,"forks_count":85,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-08-05T16:17:20.588Z","etag":null,"topics":["android","boilerplate","ios","react-native","react-native-navigation-v7","redux","redux-thunk","starter-kit","template","typescript"],"latest_commit_sha":null,"homepage":"","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/AmitM30.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["amitm30"],"custom":["https://www.paypal.me/amitm30"]}},"created_at":"2019-01-27T07:52:53.000Z","updated_at":"2024-07-31T16:52:43.000Z","dependencies_parsed_at":"2024-01-08T01:44:08.720Z","dependency_job_id":"54a3280b-3998-4eee-bd11-7c6fdfcdce84","html_url":"https://github.com/AmitM30/react-native-typescript-boilerplate","commit_stats":null,"previous_names":[],"tags_count":13,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitM30%2Freact-native-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitM30%2Freact-native-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitM30%2Freact-native-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmitM30%2Freact-native-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmitM30","download_url":"https://codeload.github.com/AmitM30/react-native-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225663621,"owners_count":17504436,"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":["android","boilerplate","ios","react-native","react-native-navigation-v7","redux","redux-thunk","starter-kit","template","typescript"],"created_at":"2024-08-04T16:00:37.646Z","updated_at":"2024-11-21T02:30:47.844Z","avatar_url":"https://github.com/AmitM30.png","language":"TypeScript","funding_links":["https://github.com/sponsors/amitm30","https://www.paypal.me/amitm30","https://github.com/sponsors/AmitM30"],"categories":["Boilerplate/Template","Seeds"],"sub_categories":["Other Platforms"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg alt=\"Friday App\" src=\"./src/view/assets/images/sample/template.png\" width=\"400px\"\u003e\n  \u003ch1\u003e🚀 Friday App 🚀\u003c/h1\u003e\n  \u003cstrong\u003eBuild enterprise React Native apps\u003c/strong\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\n# React Native Template - TypeScript\n\n\u003cdiv align=\"center\"\u003e\n\n![Travis](https://api.travis-ci.com/AmitM30/react-native-typescript-boilerplate.svg?branch=master) [![Code Climate](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate/badges/gpa.svg)](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate) ![iOS and Android](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=flat) ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md) ![Code Size](https://img.shields.io/github/languages/code-size/amitm30/react-native-typescript-boilerplate.svg) ![Releases](https://img.shields.io/github/v/release/amitm30/react-native-typescript-boilerplate.svg?style=flat)\n\n\u003c/div\u003e\n\n#### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [Airbnb TSLint](https://github.com/airbnb/javascript) to build iOS and Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)\n\nThe project has been setup based off [RN Getting Started](https://facebook.github.io/react-native/docs/getting-started) and instructions from [Microsoft's Github TypeScript React Native Starter](https://github.com/Microsoft/TypeScript-React-Native-Starter) repo.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Typescript Boilerplate\" src=\"./src/view/assets/images/sample/gif_compressed.gif\" height=\"800px\" /\u003e\n\u003c/p\u003e\n\n___\n\n### Supports React 17, React Native 0.66.0, React Native Navigation v7, Flipper and Hermes\n\nUpdate (Nov 2021):\n- Added Types (actions, reducers, store, components and more).\n- Core API service using fetch\n- Support for M1\n\n| Updates | RNN | RN | React | Comments |\n|---|---|---|---|---|\n|  Nov '21 | 7.23.1 | 0.66.0 | 17.0.2 | Type definitions\n|  May '21 | 7.14.0 | 0.64.1 | 17.0.1 | Update RN RNN, Hermes Support\n|  Oct '20 | 7.1.0 | 0.63.3 | 16.13.1 | Support for Flipper\n|  Apr '20 | 3.7.0 | 0.61.5 | 16.9.0 | Support for RN \u003e 0.60, Android X\n|  Nov '19 | 2.26.2 | 0.59.10 |  | Maintenance |\n|  Mar '19 | 2.13.1 | 0.58.6 | 16.8.4 |\n\n## Sponsor\n\nI will keep supporting the projects that I have open sourced. If you have used any of my projects, for yourself or your business, I'd love your support through Github [sponsors](https://github.com/sponsors/AmitM30). You can also try to convince your employer to sponsor as a business.\n\n## Introduction\n\nJumpstart building robust apps using React Native and TypeScript with most commoly needed tools already setup. Just `yarn install` and get going from respective IDEs.\n\n- **Routing and Navigation**\n  - **Native** Tabbed navigation using [React Native Navigation v7](https://github.com/wix/react-native-navigation)\n  - Side / Drawer Menu support\n- State Management using **Flux Architecture**\n  - [Redux](https://redux.js.org/introduction/getting-started)\n  - [Redux-Thunk](https://github.com/reduxjs/redux-thunk) middleware - side-effect handling\n- **Atomic Design pattern**\n  - The structure of the app is inspired by [atomic design pattern](https://atomicdesign.bradfrost.com/chapter-2/).\n  - Widgets / Elements: Build your own **Design Language System** with these building blocks.\n    - **Typography**: Base Typography setup - Color, Font, LAYOUT, CTA, FONTS, TEXT, TEXT_INPUT\n    - **elements**: `\u003cBUTTON_DEFAULT\u003e` or `\u003cCTEXT\u003e`. They are custom elements that have default properties like font, size and so on.\n    ```typescript\n    \u003cCTEXT style={GLOBAL.CTA.Style.primaryText}\u003e{title}\u003c/CTEXT\u003e\n    ```\n    - **widgets**: Any component providing a complete functionality. E.g. carousels component, banner component, etc.\n    ```typescript\n    \u003cCategory componentId={componentId} title={locale.Categories} /\u003e\n    ```\n- **Type Definitions**\n  - Type definitons for actions, reducers, store, components and more.\n- **Built-in Splash screen**\n- **Hermes** and **Flipper** integrations\n- **Code Lint**\n  - [Airbnb's JS](https://github.com/airbnb/javascript) Linting\n\n##### App Screens\n\n| ![Splash](./src/view/assets/images/sample/1.png \"Splash\") | ![Home](./src/view/assets/images/sample/2.png \"Home\") |![Side Menu](./src/view/assets/images/sample/3.png \"Side Menu\") |\n| :-------------------------------------------------------: | :---------------------------------------------------: | :---------------------------------------------------: |\n\n##### Flipper Support\n\n![Flipper](./src/view/assets/images/sample/4.png \"Flipper\")\n\n### Table of Contents\n\n- [Project Structure](#project-structure)\n- [Getting Started](#getting-started)\n- [Cheat Sheet](#cheat-sheet)\n  - [M1 support](#m1-support)\n  - [Single Screen vs Tabbed Based Navigation](#single-screen-vs-tabbed-based-navigation)\n  - [Renaming the App](#renaming-the-app)\n  - [iOS Launch Screen](#ios-launch-screen)\n  - [Android Launch Screen](#android-launch-screen)\n- [Contributing](#contributing)\n- [TODO](#todo)\n\n### Project Structure\n\n```\n/\n├── android\t\t\t\t\t\tAndroid Native code\n├── ios\t\t\t\t\t\t\tiOS Native Code\n├── shared\n│   ├── redux\t\t\t\t\tApplications Logic\n│   │   ├── constants\n│   │   ├── actions\n│   │   ├── api\n│   │   ├── reducers\n│   │   ├── store\n│   │   └── thunk\n│   └── utilities\n│   ├── services\n│   │   ├── core\t\t\t\tCore Services - API (fetch/axios), storage\n│   │   │  ├── API\n│   │   │  └── Storage\n│   │   ├── home\n│   │   └── search\n├── src\n│   ├── config\t\t\t\t\tGlobal Configuration\n│   ├── constants\t\t\t\tScreen names and ids, Localization\n│   ├── navigators\t\t\t\tRouter, Navigation\n│   ├── view\t\t\t\t\tUI compoments\n│   │   ├── elements\t\t\t\tCustom elements\n│   │   ├── assets\n│   │   ├── screens\n│   │   ├── styles\t\t\t\tTypography\n│   │   └── widgets\t\t\t\tCustom components\n│   └── utilities\n├── __tests__\t\t\t\t\tUnit Tests\n│   ├── presentation\n│   └── redux\n├── .babelrc\n├── .gitignore\n├── .travis.yml\t\t\t\t\tTravis CI\n├── tsconfig.json\t\t\t\tTypeScript Configuration\n├── tslint.js\t\t\t\t\tTSLint configuration - extending AirBnb\n├── tsconfig.json\n├── app.json\n├── index.js\t\t\t\t\tApplication Entry point\n├── package.json\n└── README.md\n```\n\n`shared`\nEverything related to application business logic. The redux store.\n\n`src`\nPresentation layer for the app - screens, styles, images, icons etc.\n\n### Getting Started\n\nMake sure node version installed is `\u003e=12.x.x`. Then install using yarn (or npm):\n```\nyarn install\n```\n\nStart the Metro Bundler:\n```\nyarn start\n```\n\n###### iOS\n\nOne time. Move to `ios` folder and install pods:\n\n```\ncd ios \u0026\u0026 pod install\n```\n\nLaunch application from XCode (`Command + R`) Or launch from Terminal:\n\n```\nyarn ios\n# runs the following command. change device name here\n# `npx react-native run-ios --simulator='iPhone 11'`\n```\n\n###### Android\n\nStart an Android Simulator from:\n```\nAndroid Studio \u003e Tools \u003e AVD Manager \u003e Run any device\n```\n\nSimilarly, run from Android Studio itself Or from Terminal:\n```\nyarn android\n# runs the following command\n# react-native run-android --variant=Debug\n```\n\n### Commands\n\n|  | Remark |\n|---|---|\n| `yarn start` | Starts metro bundler |\n| `yarn ios` | Starts iOS app. Start metro bundler first |\n| `yarn android` | Starts Android app. Start metro bundler and Android emulator first |\n| `yarn lint` | linting |\n| `yarn lint:fix` | tries to fix linting issues automatically |\n| `yarn build:android:debug` | Android debug build |\n| `yarn build:android:release` | Android release build |\n\n### Cheat Sheet\n\n#### iOS Launch Screen\n\n```shell\nXCode -\u003e Project Folder -\u003e Click on `Images.xcassets` -\u003e Click on `LaunchScreen`\n```\n\nChange the 3 images here to set the new launch screen for iOS.\n\n![Launch Screen](./src/view/assets/images/sample/splash-image.png \"Launch Screen\")\n\n#### Android Launch Screen\n\n```shell\n`./android/app/src/main/res/drawable-*` folders\n```\n\nChange the images the `drawable-*` folders to set the new launch screen for Android.\n\n#### M1 support\nSome additional steps may be required for project to work on M1.\n\n  - Disable Rosetta in Terminal\n  - Install ffi\n```\nsudo arch -x86_64 gem install ffi\n```\n  - Re-install dependencies\n```\narch -x86_64 pod install\n```\nNow try and run CocoaPods.\n\nP.S.: Thanks to samanthadotcom#7043 (discord)\n\n#### Single Screen vs Tabbed Based Navigation\n\nThe application launches with a splash screen, and then moves to a tabbed based navigation. Splash screen is a good place to fetch data / build application launch logic like getting user token from API or Async Store, load persist state etc.\n\nFor Single screen application, replace this tabbed based navigation with a single screen - just `home`, or simply use the splash screen to setup the app, may be with a burger menu.\n\n#### Renaming the App\n\nYou might also want to rename the app for your own use. Follow any of the links below.\n- [How to Rename A React Native App](https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35)\n\nOr\n\n- NPM Package: [react-native-rename](https://www.npmjs.com/package/react-native-rename)\n\n### Contributing\n\nPlease check out [Contributing](https://github.com/AmitM30/react-native-typescript-boilerplate/blob/master/CONTRIBUTING.md).\n\n### Authors\n\n- [**Anurag Chutani**](https://github.com/a7urag) - _Android Setup_\n- [**Brian Varley**](https://github.com/BrianJVarley) - _Windows Setup_\n- [**Nelson Omuto**](https://github.com/nelsonomuto) - _Update Podfile_\n\nSee also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAmitM30%2Freact-native-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAmitM30%2Freact-native-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAmitM30%2Freact-native-typescript-boilerplate/lists"}