{"id":13695266,"url":"https://github.com/kanzitelli/expo-starter","last_synced_at":"2025-04-05T08:03:44.818Z","repository":{"id":41395404,"uuid":"340548438","full_name":"kanzitelli/expo-starter","owner":"kanzitelli","description":"🦥  Expo Starter - Powered by Expo SDK, Navio (React Navigation), RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, and much more.","archived":false,"fork":false,"pushed_at":"2024-03-25T19:36:06.000Z","size":1591,"stargazers_count":432,"open_issues_count":4,"forks_count":94,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T07:02:00.389Z","etag":null,"topics":["expo","expo-app","expo-starter","mobx","react","react-native","react-native-starter","react-navigation","rn-navio","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":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-20T03:05:55.000Z","updated_at":"2025-03-24T07:39:52.000Z","dependencies_parsed_at":"2024-03-25T20:38:18.465Z","dependency_job_id":"4a0f6eb6-eaf3-4043-956d-412a9bbe592e","html_url":"https://github.com/kanzitelli/expo-starter","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Fexpo-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Fexpo-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Fexpo-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kanzitelli%2Fexpo-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kanzitelli","download_url":"https://codeload.github.com/kanzitelli/expo-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305930,"owners_count":20917207,"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","expo-app","expo-starter","mobx","react","react-native","react-native-starter","react-navigation","rn-navio","typescript"],"created_at":"2024-08-02T18:00:20.452Z","updated_at":"2025-04-05T08:03:44.798Z","avatar_url":"https://github.com/kanzitelli.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://xxx-files.ggc.team/oss/expo-starter/cover.png\" width=\"80%\" title=\"Logo\"\u003e\n\u003c/p\u003e\n\nThis starter is a collection of libraries and approaches needed for fast start and productive maintainance of React Native (Expo) App.\n\n\u003e `Expo Starter` is a part of [starters.dev](https://github.com/starters-dev) collection.\n\n\u003e If `Expo Starter` helped you in any way, don't hesitate to ⭐️ the repo!\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\n```\n\nIn order to change app's name, please make necessary changes in `app.json`.\n\n\u003cdetails\u003e\n\u003csummary\u003eManual setup\u003c/summary\u003e\n\n1. Clone the repo\n\n```bash\nnpx degit kanzitelli/expo-starter app\n```\n\n2. Install packages\n\n```bash\ncd app \u0026\u0026 yarn\n```\n\n3. Run it!\n\n```bash\nyarn start\n```\n\n\u003c/details\u003e\n\n## What's inside\n\n- [Expo SDK](https://github.com/expo/expo) - a set of tools and services built around React Native and native platforms.\n- [React Navigation (v6)](https://github.com/react-navigation/react-navigation) - routing and navigation for React Native apps.\n- [Navio](https://github.com/kanzitelli/rn-navio) - universal navigation library for React Native. Built on top of [React Navigation](https://github.com/react-navigation/react-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- [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler) - native touches and gesture system for React Native.\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- [Expo Image](https://github.com/expo/expo/tree/main/packages/expo-image) - cross-platform React component that loads and renders images.\n\n#### Native libraries\n\nIn order to use them, you will need to run `yarn prebuild` command to generate `ios/` and `android/` folders with native code.\n\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_! Available only within Expo dev clients. Instructions on installation could be found [here](https://github.com/mrousavy/react-native-mmkv#expo).\n\n#### Useful services/methods\n\n- `navio` - a service that exposes all navigation methods of [Navio](https://github.com/kanzitelli/rn-navio) instance.\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#### 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`configureDesignSystem()` - a method 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/191781571-57749464-982b-4d36-b3bc-b97ce4ace705.MP4\n\n## Advantages\n\n#### Build app layout in one place with [Navio](https://github.com/kanzitelli/rn-navio)\n\nAll setup for your screens, tabs and modals take place in one file `src/screens/index.ts`.\n\n```tsx\nimport {Navio} from 'rn-navio';\n\n// importing screen components\nimport {Main} from '@app/screens/main';\nimport {Playground} from '@app/screens/playground';\nimport {Settings} from '@app/screens/settings';\nimport {Example} from '@app/screens/_screen-sample';\n\n// building layout\nexport const navio = Navio.build({\n  screens: {\n    Main,\n    Settings,\n    Example,\n    Playground: {\n      component: Playground,\n      options: () =\u003e ({\n        title: 'Playground',\n      }),\n    },\n  },\n  stacks: {\n    MainStack: ['Main', 'Example'],\n    ExampleStack: {\n      screens: ['Example'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () =\u003e {},\n        },\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      layout: {\n        MainTab: {\n          stack: 'MainStack',\n          options: () =\u003e ({\n            title: 'Main',\n            tabBarIcon: getTabBarIcon('MainTab'),\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () =\u003e ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () =\u003e ({\n            title: services.t.do('settings.title'),\n            tabBarIcon: getTabBarIcon('SettingsTab'),\n          }),\n        },\n      },\n    },\n  },\n  modals: {\n    ExampleModal: {stack: 'ExampleStack'},\n  },\n  drawers: {\n    MainDrawer: {\n      layout: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['Playground'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport const NavioApp = navio.App;\n```\n\n#### Navigate with predictability\n\n```tsx\nexport const Screen = () =\u003e {\n  const {navio} = useServices();\n\n  return (\n    \u003cView\u003e\n      \u003cButton\n        label=\"Push Settings\"\n        onPress={() =\u003e {\n          // Typescript and IDE will help with autocompletion\n          navio.push('Settings');\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n#### App flows\n\nYou can find different app flows, such as Auth flow, simple 2 screens, 3 tabs, etc., in the [navio.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx).\n\n#### Dark mode\n\nYou can define modes in [designSystem.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/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- [x] Auth flow [example](https://github.com/kanzitelli/expo-starter/issues/14#issuecomment-1020730141)\n- [x] [Navigation library](https://github.com/kanzitelli/rn-navio) to reduce boilerplate code.\n- [x] [Expo Image](https://github.com/expo/expo/tree/main/packages/expo-image) added.\n- [ ] Shared transitions (w/ Reanimated v3)\n\nFeel free to open an issue for suggestions.\n\n## Worth checking\n\n### Other starters\n\n- [rnn-starter](https://github.com/kanzitelli/rnn-starter) - 🤹 Production-ready starter for 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- [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 Icons have been generated with [BuildIcon](https://buildicon.netlify.app) created by [Evan Bacon](https://github.com/EvanBacon).\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 Navigation](https://github.com/react-navigation/react-navigation) and other libraries. Check out [Advantages](#advantages) section.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Fexpo-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanzitelli%2Fexpo-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanzitelli%2Fexpo-starter/lists"}