{"id":13695261,"url":"https://github.com/kanzitelli/rnn-starter","last_synced_at":"2025-04-04T19:11:14.305Z","repository":{"id":38930821,"uuid":"222925303","full_name":"kanzitelli/rnn-starter","owner":"kanzitelli","description":"🤹 React Native Starter - Powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Splash Screen, Localization, Notifications, Permissions, and much more.","archived":false,"fork":false,"pushed_at":"2023-10-03T01:58:18.000Z","size":3840,"stargazers_count":559,"open_issues_count":5,"forks_count":70,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T18:12:20.515Z","etag":null,"topics":["android","expo","expo-modules","ios","mobx","mobx-react","react-native","react-native-gesture-handler","react-native-navigation","react-native-navigation-starter","react-native-splash-screen","react-native-starter","react-native-vector-icons","react-navigation","rnn-screens","typescript"],"latest_commit_sha":null,"homepage":"https://starters.dev","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/kanzitelli.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,"governance":null}},"created_at":"2019-11-20T11:46:23.000Z","updated_at":"2025-02-14T22:46:45.000Z","dependencies_parsed_at":"2023-02-18T08:46:03.229Z","dependency_job_id":"2a660822-24c0-43ec-8583-8e81960dcd24","html_url":"https://github.com/kanzitelli/rnn-starter","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frnn-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frnn-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frnn-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Frnn-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kanzitelli","download_url":"https://codeload.github.com/kanzitelli/rnn-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234921,"owners_count":20905854,"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","expo","expo-modules","ios","mobx","mobx-react","react-native","react-native-gesture-handler","react-native-navigation","react-native-navigation-starter","react-native-splash-screen","react-native-starter","react-native-vector-icons","react-navigation","rnn-screens","typescript"],"created_at":"2024-08-02T18:00:20.393Z","updated_at":"2025-04-04T19:11:14.275Z","avatar_url":"https://github.com/kanzitelli.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://xxx-files.ggc.team/oss/rnn-starter/cover.png\" width=\"80%\" title=\"Logo\"\u003e\n\u003c/p\u003e\n\n![React Native](https://img.shields.io/badge/React%20Native-0.70.3-blue)\n![React Native Navigation](https://img.shields.io/badge/React%20Native%20Navigation-7.29.0-blue)\n![Expo](https://img.shields.io/badge/𝝠%20Expo-46.0.16-blue)\n\nThis starter is a collection of libraries and approaches needed for fast start and productive maintainance of React Native App.\n\n\u003e \u003ci\u003eRNN Starter\u003c/i\u003e is a part of [starters.dev](https://github.com/starters-dev) collection.\n\n## Getting Started\n\n### Quick start with [cli-rn](https://github.com/kanzitelli/cli-rn)\n\n```bash\nnpx cli-rn new App -t rnn\n```\n\n\u003e As `cli-rn` uses `react-native-rename` script for renaming under the hood, please refer to [Rename section](#rename) to apply necessary changes to Android part.\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\nnpx degit kanzitelli/rnn-starter app\n```\n\n2. Install packages and pods\n\n```bash\ncd app \u0026\u0026 yarn \u0026\u0026 yarn ios:pods\n```\n\n3. Run it\n\nOpen XCode or Android Studio to run the project (recommended) or do\n\n```bash\nyarn ios\nyarn android\n```\n\n\u003c/details\u003e\n\n### Rename\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\nyarn rename \"NewApp\" -b com.yourcompany.newapp\nyarn ios:pods\n```\n\n⚠️ Troubleshooting on Android. You can see that after running `rename` script, it doesn't change package name and imports for files under `newarchitecture` folder.\n\n\u003cdetails\u003e\n\u003csummary\u003eYou will need do these steps manually\u003c/summary\u003e\n\n1. Open all `.java` files under `android/app/src/main/java/your/bundle/newarchitecture/` folder.\n\n2. Open `MainApplication.java`.\n\n3. Find all packages and imports which contain `com.rnnstarter` and change them to yours.\n\n\u003c/details\u003e\n\n## What's inside\n\n- [React Native Navigation](https://github.com/wix/react-native-navigation) - truly native navigation experience for iOS and Android.\n- [Expo Modules](https://github.com/expo/expo) - libraries and modules from [Expo](https://expo.dev) ecosystem.\n- [RNN Screens](https://github.com/kanzitelli/rnn-screens) - simplifed and predictable Navigation for React Native. Built on top of [React Native Navigation](https://github.com/wix/react-native-navigation).\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- [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- [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- [Flash List](https://github.com/Shopify/flash-list) - a better list for React Native (by Shopify).\n- [Fast Image](https://github.com/DylanVann/react-native-fast-image) - performant React Native image component.\n- [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons) - customizable icons for React Native.\n- [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) - native touches and gesture system for React Native.\n- [React Native Splash Screen](https://github.com/crazycodeboy/react-native-splash-screen) - a splash screen for React Native. Works with RNN!\n\n#### Extra helpful libraries\n\n- [React Native Navigation Hooks](https://github.com/underscopeio/react-native-navigation-hooks) - a set of hooks for React Native Navigation.\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\n#### Useful services/methods\n\n- `nav` - a service where some of navigation configuration takes place in (such as default options).\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).\n- `api` - a service where API-related methods are located.\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\n#### Splash Screen 🎉\n\nStarting from `v16.0.0`, we have added a Splash Screen that works great on pair with [React Native Navigation](https://github.com/wix/react-native-navigation) and can be hidden at any moment in your app! Thanks to [@FawadMahmood](https://github.com/FawadMahmood)!\n\n\u003e Current approach relies on `LaunchImage` on iOS that is marked as deprecated by Apple. However, people still use it and that's the only way to make it work with React Native Navigation.\n\nAt some point of the app development, you'll probably want to replace existing splash screen (with [starters.dev](https://github.com/starters-dev) icon). Below, you can find some tutorials/advices on how to replace the splash screen images.\n\n\u003cdetails\u003e\n\u003csummary\u003eSplash Screen replacement\u003c/summary\u003e\n\nIf you already have some images ready for Splash Screen, you can just drag and drop them instead of existing `Images/LaunchImage` in XCode.\n\nIf you'd like to generate new images, then follow the steps below.\n\nWe are going to use [rn-toolbox](https://github.com/bamlab/generator-rn-toolbox) to achieve that. You can use any other tool or website.\n\n1. Follow the [requirements and installation](https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md#requirements) steps for rn-toolbox.\n\n2. Prepare `splashscreen.psd` with the design of your splash screen.\n\n3. Run `yarn splash:gen`.\n\nNow, splash screens for iOS and Android must be generated and you should manually add them to the following folders.\n\n\u003e Note for Android: discard any changes of `styles.xml` if it was accidentally overwritten by the script.\n\n\u003e Note for iOS: key `UILaunchStoryboardName` must be removed from `Info.plist` file and `LaunchImage` value must be set for \"Asset Catalog Launch Image\" in Build Settings.\n\n\u003c/details\u003e\n\n\u003e Splash Screen hides loading state of the app bundle when launching the app in debug mode.\n\n#### Design System\n\nThis starter is using [RN UI lib](https://github.com/wix/react-native-ui-lib) as a design system, UI toolset and a source of ready-to-go components.\n\n`DesignSystem` - a class where all settings for an app's design system is taking place. You can customize colors, schemes, typegraphy, spacings, etc. Located at `src/utils/designSystem.tsx`.\n\nhttps://user-images.githubusercontent.com/4402166/197052859-d7eef80a-a923-4a9b-86df-b9dbc32a075b.mov\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```tsx\nimport {generateRNNScreens} from 'rnn-screens';\n\nimport {Main} from './main';\nimport {Settings} from './settings';\n\nexport const screens = generateRNNScreens(\n  {\n    Main: {\n      component: Main,\n      options: {\n        topBar: {\n          ...withTitle('Main'),\n          ...withRightButtons('inc', 'dec'),\n        },\n      },\n    },\n    Settings: {\n      component: Settings,\n      options: {\n        topBar: {\n          ...withTitle('Settings'),\n        },\n      },\n    },\n    // ...\n  },\n  [withGestureHandler, withSS, withAppearance],\n);\n```\n\n#### Navigate with predictability\n\n```tsx\nimport {screens} from '.';\n\nconst SomeScreen = ({componentId}) =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cButton\n        label=\"Open screen\"\n        onPress={() =\u003e {\n          // IDE will autocomplete with registered screens\n          screens.push(componentId, 'AnotherScreen');\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n#### Build root component with ease\n\n```tsx\n// single screen app\nconst App = () =\u003e Root(Screen(screens.get('Main')));\n\n// tab based app\nconst TabsApp = () =\u003e\n  Root(\n    BottomTabs([\n      Screen(screens.get('Main')),\n      Screen(screens.get('Playground')),\n      Screen(screens.get('Settings')),\n    ]),\n  );\n```\n\n#### Dark mode support\n\nYou can define modes in `utils/designSystem.tsx`.\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- [ ] Auth flow\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\n\n- **[iOS]** _Hermes framework not found/loaded_. There are some cases when `hermes.framework` is not found/loaded in XCode with React Native 0.70. Check [this](https://github.com/facebook/react-native/issues/34608#issuecomment-1243232921) and [this](https://github.com/facebook/react-native/issues/34608#issuecomment-1246730507) comments for potential solution.\n- **[iOS]** _Large title is not shown on 2nd+ tab_. This [issue](https://github.com/software-mansion/react-native-screens/issues/649) exists. You can find the patch file for fixing that at `patches/react-native+0.70.0.patch`.\n- **[Android]** _Issue after renaming on Android_. This happens when you [rename](#rename) the app using `yarn rename` script. Check [Rename](#rename) section for possible solution.\n\n## Worth checking\n\n### Other starters\n\n- [rnn-with-expo](https://github.com/starters-dev/rnn-with-expo) - 🛹 Minimalistic React Native App Starter with React Native Navigation, Expo Modules and RNN Screens.\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- [rn-starter](https://github.com/kanzitelli/rn-starter) - 🦄 Production-ready starter for React Native App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.\n\n\u003e Originally bootstrapped from [starters-dev/rnn-with-expo](https://github.com/starters-dev/rnn-with-expo).\n\n### Articles\n\n- \"Build React Native Apps with Simplified and Predictable Navigation\" - [Medium](https://kanzitelli.medium.com/build-react-native-apps-with-simplified-and-predictable-navigation-2859f047f29e), [Dev.to](https://dev.to/kanzitelli/build-react-native-apps-with-simplified-and-predictable-navigation-5b3j)\n- \"Testing React Native apps with zero effort\" - [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- \"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\n## Why\n\n...do we need yet another starter/boilerplate? Well, I work with React Native for more than 4 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 Native Navigation](https://github.com/wix/react-native-navigation) and other libraries. Check out [Advantages](#advantages) section.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Frnn-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanzitelli%2Frnn-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Frnn-starter/lists"}