{"id":13679336,"url":"https://github.com/starters-dev/rn-starter","last_synced_at":"2025-10-27T06:32:06.183Z","repository":{"id":43154434,"uuid":"409688578","full_name":"starters-dev/rn-starter","owner":"starters-dev","description":"🦄 React Native Starter - Powered by cli-rn, React Navigation (v6), Expo Modules, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.","archived":false,"fork":false,"pushed_at":"2022-03-15T23:04:48.000Z","size":1934,"stargazers_count":154,"open_issues_count":2,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-06T21:46:29.097Z","etag":null,"topics":["expo-modules","react","react-native","react-native-app","react-native-navigation","react-navigation"],"latest_commit_sha":null,"homepage":"https://cli-rn.batyr.io","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/starters-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-23T17:40:15.000Z","updated_at":"2025-01-26T15:51:47.000Z","dependencies_parsed_at":"2022-07-15T00:15:59.320Z","dependency_job_id":null,"html_url":"https://github.com/starters-dev/rn-starter","commit_stats":null,"previous_names":["starters-dev/rn-starter","kanzitelli/rn-starter"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starters-dev%2Frn-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starters-dev%2Frn-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starters-dev%2Frn-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starters-dev%2Frn-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/starters-dev","download_url":"https://codeload.github.com/starters-dev/rn-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238455145,"owners_count":19475396,"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":["expo-modules","react","react-native","react-native-app","react-native-navigation","react-navigation"],"created_at":"2024-08-02T13:01:04.416Z","updated_at":"2025-10-27T06:32:05.793Z","avatar_url":"https://github.com/starters-dev.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://xxx-files.ggc.team/oss/rn-starter/cover.png\" width=\"80%\" title=\"Logo\"\u003e\n\u003c/p\u003e\n\nThis starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️\n\nFor more information, check out [Why](#why) section.\n\n## Getting Started\n\n#### Quick start with [cli-rn](https://github.com/kanzitelli/cli-rn)\n\n```bash\n\u003e npx cli-rn new App -t rn\n```\n\nIf you have any troubles running the app with `yarn ios` or `yarn android`, open XCode or Android Studio and run the project from there.\n\n\u003cdetails\u003e\n\u003csummary\u003eManual setup\u003c/summary\u003e\n\n1. Clone the repo\n\n```bash\n\u003e git clone https://github.com/kanzitelli/rn-starter.git App \u0026\u0026 cd App\n```\n\n2. Remove `.git` file (if not planning to contribute)\n\n```bash\n\u003e rm -rf .git\n```\n\n3. Install packages and pods\n\n```bash\n\u003e yarn \u0026\u0026 yarn ios:pods\n```\n\n4. Run it!\n\nOpen XCode or Android Studio to run the project (recommended) or do\n\n```bash\n\u003e yarn ios\n\u003e yarn android\n```\n\nIf you need to rename the app, do the following (based on [react-native-rename](https://github.com/junedomingo/react-native-rename)):\n\n```bash\n\u003e yarn rename NewAppName\n\u003e yarn ios:pods\n```\n\n\u003c/details\u003e\n\n## What's inside\n\n- [React Navigation (v6)](https://github.com/react-navigation/react-navigation) - routing and navigation for React Native apps. If you'd like to use [React Native Navigation](https://github.com/wix/react-native-navigation) by Wix, check out [rnn-starter](https://github.com/kanzitelli/rnn-starter).\n- [Expo Modules](https://github.com/expo/expo) - libraries and modules from [Expo](https://expo.dev) ecosystem.\n- [RN UI lib](https://github.com/wix/react-native-ui-lib) - amazing Design System, UI toolset \u0026 components library for React Native. Dark Mode is implemented using this library.\n- [Reanimated 2](https://github.com/software-mansion/react-native-reanimated) - React Native's Animated library reimplemented.\n- [MobX](https://github.com/mobxjs/mobx) - simple, scalable state management, with [mobx-persist-store](https://github.com/quarrant/mobx-persist-store) for persisting your stores.\n- ~~AsyncStorage~~ [MMKV](https://github.com/mrousavy/react-native-mmkv) - efficient, small mobile key-value storage framework developed by WeChat. [~30x faster](https://github.com/mrousavy/react-native-mmkv#benchmark) than _AsyncStorage_!\n\n#### Extra helpful libraries\n\n- [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) - native touches and gesture system for React Native.\n- [Hermes Engine](https://reactnative.dev/docs/hermes) - a JavaScript engine optimized for running React Native apps.\n- [ESLint](https://github.com/eslint/eslint) + [Prettier](https://github.com/prettier/prettier) - keep your code neat and structured.\n- [Patch Package](https://github.com/ds300/patch-package) - useful for fixing node modules instantly.\n- [Release It](https://github.com/release-it/release-it) - automate versioning and publishing of your app.\n- [Typescript](https://www.typescriptlang.org/) - strict syntactical superset of JavaScript.\n\n#### Useful services/methods\n\n- `navigation` - a service where all navigation configuration takes place in. It simplifies and abstracts the process of registering screens, layouts, etc.\n- `translate` - a service that brings an easy integration of localization for an app by using [i18n-js](https://github.com/fnando/i18n-js) and [expo-localization](https://github.com/expo/expo/tree/master/packages/expo-localization). You can see an example of `en` and `ru` localizations in `Example` screen.\n- `onStart` - a service where you can write your own logic when app is launched. For example, you can increment number of `appLaunches` there.\n- `configureDesignSystem()` - a method where all settings for an app's design system is taking place. You can customize there colors, schemes, typegraphy, spacings, etc.\n\nhttps://user-images.githubusercontent.com/4402166/148631148-7f6e88aa-7516-4343-a812-bebc64d24102.MP4\n\n\n## Advantages\n\n#### Describe app screens in one place\n\nAll setup for your screens takes place in one file `src/screens/index.ts`:\n\n```\ntype Screen = 'Main' | 'Example' | 'Settings';\ntype Tabs = 'Main' | 'WIP' | 'Settings';\n\nconst screens: ScreenLayouts = {\n  Main: {\n    name: 'Main',\n    component: Main,\n    options: () =\u003e ({\n      title: 'Home',\n    }),\n  },\n  // ...\n}\n\nconst tabs: TabScreenLayouts = {\n  Main: {\n    name: 'MainNavigator',\n    component: HomeStack,\n    options: () =\u003e ({\n      title: 'Home',\n    }),\n  },\n  // ...\n}\n```\n\n#### Build layouts with ease\n\nStack Navigator:\n\n```\nconst HomeStack = () =\u003e\n  genStackNavigator([\n    screens.Main,\n    screens.Example,\n  ]);\n```\n\nTab Navigator:\n\n```\nconst TabNavigator = () =\u003e\n  genTabNavigator([\n    tabs.Main,\n    tabs.WIP,\n    tabs.Settings,\n  ]);\n```\n\n#### Navigate to other screens with predictability\n\n```\nconst Screen = ({componentId}) =\u003e {\n  const {nav} = useServices();\n\n  return (\n    \u003cView\u003e\n      \u003cButton\n        label=\"Open Settings\"\n        onPress={() =\u003e nav.push('Settings')}\n      /\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n#### Samples for new screens, services, stores and components.\n\nSo you have one structure within the project. You can find them in corresponding folders. Just copy\u0026paste it and make the necessary changes.\n\n## Enhancements\n\nThere are still some things I would like to add to the starter:\n\n#### General\n\n- [x] Passing props to a screen example\n- [x] Constants: add Dimensions\n- [x] MMKV (AsyncStorage) stores persisting example\n- [ ] Shared transitions — [IjzerenHein/react-navigation-shared-element](https://github.com/IjzerenHein/react-navigation-shared-element)\n\n#### Production\n\n- [ ] Auth flow\n- [ ] Fast Image — [DylanVann/react-native-fast-image](https://github.com/DylanVann/react-native-fast-image)\n- [ ] Notifications — [wix/react-native-notifications](https://github.com/wix/react-native-notifications) or/and [invertase/notifee](https://github.com/invertase/notifee)\n- [ ] E2E tests — [wix/Detox](https://github.com/wix/Detox)\n- [ ] Permissions — [zoontek/react-native-permissions](https://github.com/zoontek/react-native-permissions)\n- [ ] FB SDK — [thebergamo/react-native-fbsdk-next](https://github.com/thebergamo/react-native-fbsdk-next)\n- [ ] Appodeal — [appodeal/react-native-appodeal](https://github.com/appodeal/react-native-appodeal)\n- [ ] In-app purchases — [dooboolab/react-native-iap](https://github.com/dooboolab/react-native-iap)?\n\nFeel free to open an issue for suggestions.\n\n## Known issues (warnings)\n\n- _Large title is not shown on 2nd+ tab_. This [issue](https://github.com/software-mansion/react-native-screens/issues/649) exists. So you can find the patch file for fixing that in `patches/react-native+0.65.1.patch`. It will be autorun when you do `yarn add/remove/etc`.\n- _Over-The-Air Updates_. They have been removed from the current version as I had some problems publishing one of the apps to AppStore. Check out [my tweet](https://twitter.com/kanzitelli/status/1398229619862642692) and be aware of the issue if you'd like to use them anyways.\n\n## Worth checking\n\n### Other starters\n\n- [expo-starter](https://github.com/kanzitelli/expo-starter) - 🦥 Production-ready starter for Expo (React Native) App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, and much more.\n- [rnn-starter](https://github.com/kanzitelli/rnn-starter) - 🤹 Production-ready starter for your next React Native App! Powered by cli-rn, React Native Navigation, RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.\n\n### Articles\n\n- Expo + React Native Navigation? Yes! - [Medium](https://kanzitelli.medium.com/expo-react-native-navigation-yes-ebda0cbfa4b1), [Dev.to](https://dev.to/kanzitelli/expo-react-native-navigation-1pll)\n- cli-rn — making RN app developing experience as smooth as possible - [Medium](https://kanzitelli.medium.com/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-1022aae3a0d3), [Dev.to](https://dev.to/kanzitelli/cli-rn-making-rn-app-developing-experience-as-smooth-as-possible-4e98)\n\n### Apps in production\n\n- Wallpapers App - [Twitter](https://twitter.com/kanzitelli/status/1408192827155177472?s=20), App Store soon\n- Rabbit App. Lite Reddit client - [Github](https://github.com/kanzitelli/rabbit-app), [App Store](https://apps.apple.com/ru/app/rabbit-app-lite-reddit-client/id1535084154), [Google Play](https://play.google.com/store/apps/details?id=io.batyr.rabbitapp)\n- Trip Music Radio - [App Store](https://apps.apple.com/ru/app/id1525645826), [Google Play](https://play.google.com/store/apps/details?id=team.ggc.tripmusic)\n- App for VK - [App Store](https://apps.apple.com/ru/app/id1067670987)\n- Messenger for VK - [App Store](https://apps.apple.com/ru/app/id891605076)\n- Christmas Market - [App Store](https://apps.apple.com/ru/app/id1446775875)\n\n## Why\n\n...do we need yet another starter/boilerplate? Well, I work with React Native for more than 3 years and during the time I started having my own project structure which was a good fit for almost all of the delivered apps. Also, I have come up with some custom [useful services/methods](#useful-servicesmethods) which simplify usage of [React Navigation](https://github.com/react-navigation/react-navigation) and other libraries. Check out [Advantages](#advantages) section.\nIf you'd like to use [React Native Navigation](https://github.com/wix/react-native-navigation) by Wix, check out [rnn-starter](https://github.com/kanzitelli/rnn-starter).\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarters-dev%2Frn-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarters-dev%2Frn-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarters-dev%2Frn-starter/lists"}