kanzitelli / Rnn Starter
Licence: mit
🤹 Production-ready starter for your next React Native App! Powered by cli-rn, React Native Navigation, Expo, Reanimated 2, Notifications, Over-The-Air Updates, Mobx, Dark Mode, and Localization.
Stars: ✭ 127
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Rnn Starter
Bangumi
💫 An unofficial bgm.tv app client for Android and iOS, built with React Native. 类似专门做ACG的豆瓣, 已适配 iOS/Android, mobile/Pad, light/dark theme, 并加入了很多独有的增强功能
Stars: ✭ 409 (+222.05%)
Mutual labels: expo, mobx
react-native-mobx-feathers
A basic App using react-navigation + mobx + feathers
Stars: ✭ 31 (-75.59%)
Mutual labels: mobx, expo
React Native Starter Kit
React Native starter kit, get up and running !
Stars: ✭ 9 (-92.91%)
Mutual labels: expo, redux-saga
Hackatalk
TalkTalk renewal. Open source chat app built-in expo managed work flow
Stars: ✭ 123 (-3.15%)
Mutual labels: expo
Snack React Native Apps
List of react native apps on https://snack.expo.io
Stars: ✭ 126 (-0.79%)
Mutual labels: expo
React Native Styled Toast
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
Stars: ✭ 119 (-6.3%)
Mutual labels: expo
Feline For Product Hunt
A beautiful, unofficial app for Product Hunt
Stars: ✭ 115 (-9.45%)
Mutual labels: mobx
Redux Dynostore
These libraries provide tools for building dynamic Redux stores.
Stars: ✭ 123 (-3.15%)
Mutual labels: redux-saga
React Native Gl Image Filters
React-Native image filters using gl-react
Stars: ✭ 114 (-10.24%)
Mutual labels: expo
Lit Mobx
Mixin and base class for using mobx with lit-element
Stars: ✭ 126 (-0.79%)
Mutual labels: mobx
Gakki
🌼🌸 A React Native App for Mastodon. 一个由React Native编写的长毛象客户端App🦋
Stars: ✭ 120 (-5.51%)
Mutual labels: mobx
Npx Visualize Bundle
Analyse your React Native bundle in 1 command
Stars: ✭ 125 (-1.57%)
Mutual labels: expo
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-8.66%)
Mutual labels: redux-saga
Table of contents
- 🦥 Motivation
- 🏃♂️ Getting Started
- 📖 What's inside
- 🧙♂️ Enhancements
- ⚠️ Known issues (warnings)
- ⭕️ Limitations
- 🤓 Worth checking
Motivation
- 💚 I love React Native
- 💙 I love Expo
- ❤️ I love React Native Navigation
So why not put them all together? 😏
Big love and gratitude to all people who are working on React Native, Expo and React Native Navigation!
This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️
Getting Started
cli-rn
Quick start with> npm i -g cli-rn
> cli-rn new AppName
Manual setup
- Clone the repo
git clone https://github.com/kanzitelli/expo-rnn-starter.git <appName> && cd <appName>
- Remove
.git
file (if are not planning to contribute)
rm -rf .git
- Install packages and rename the app (based on [react-native-rename-next
yarn
yarn rename <AppName>
yarn ios:pods
- Run it!
yarn ios
yarn android
👁🗨 If you are planning to use Expo modules, such as preconfigured expo-updates
and others, or add new ones, what I strongly recommend, then proceed to Expo Configuration and follow the steps.
What's inside
- React Native Navigation - truly native navigation experience for iOS and Android
-
Expo SDK - universal set of amazing libraries (such as
expo-updates
) which are needed for building sustainable apps - Reanimated 2 - React Native's Animated library reimplemented
- MobX - simple, scalable state management, with mobx-persist for persisting your stores
Extra helpful libraries
- React Native Notifications - a library that takes care of handling notifications
- React Native Navigation Hooks - a set of hooks for React Native Navigation
-
React Native Vector Icons - customizable icons for React Native. Even though Expo SDK includes
expo-icons
which you can still use, but the reason of addingreact-native-vector-icons
is to get icons as sources before launching tab based app - React Native Gesture Handler - native touches and gesture system for React Native
- React Native Defice Info - device information for React Native iOS and Android
- Hermes Engine - a JavaScript engine optimized for running React Native apps on Android
- Patch Package - useful for fixing node modules instantly
- Typescript - strict syntactical superset of JavaScript
Small useful services/hooks from me
-
useStyles()
- a hook that takes care of dark mode in your app. Supports toggling modes while you are in app. No dependencies (needs onlyreact-native
, so could be reusable). -
useConstants()
- a simple hook that gives access to constants. -
navigation
- a service where all navigation configuration takes place. It might be a bit confusing but it should simplify and abstract the process of registering screens, etc. -
translate
- a service that shows and simplifies integration withexpo-localization
andi18n-js
. You can see an example ofen
,ru
andde
localizations inExpoScreen
. -
notifications
- a service that takes care of setting up notifications which utilizes React Native Notifications. For more information, please, take a look at this guide. -
appUpdates
- a service that shows and simplifies integration withexpo-updates
. In order to use it, you will need to changeExpo.plist
andAndroidManifest.xml
with your actual information. More information about expo-updates.
Enhancements
There are still some things I would like to add to the starter:
- 🔳 Dark Mode support (still looking for a more robust solution).
- 🔳 Localization via expo-localization and i18n-js.
- 🔳 Notifications (remote) using React Native Notifications.
Feel free to open an issue for suggestions.
Known issues (warnings)
- Expo splash screen. There is some weird behavior using
expo-splash-screen
withreact-native-navigation
. That is why this module has been excluded: ios & android. - Dark Mode in Android. React Native Navigation doesn't toggle navigation and tab bars' background color to dark when dark mode is toggled on. However it does so on iOS. As a workaround, we can subscribe to toggle events and then using
Navigation.mergeOptions
&Navigation.setDefaultOptions
to change stylings for navigations and tab bars. Anyways, it needs some time to dive into it and come up with better solution. Current progress could be found here. - Notifications received in background for iOS and Android. There is an issue with getting a callback triggered for notifications received while the app in background. For more information, please, check this issue.
Feel free to open an issue for any other warning or problems.
Limitations
- [SOLVED] Check cli-rn and cli-rn-app.
Apps bootstrapped from this starter won't be available through Expo app for iOS and Android as of differences in navigation approach. Theoretically, it is possible to create an app like Expo that will includereact-native-navigation
and somehow download needed bundles. Needs more research. - Apps bootstrapped from this starter won't be able to be run on web as Expo apps do. Theoretically, it is possible to create some sort of an adapter between
react-navigation
andreact-native-navigation
. Maybe there will be other issues, but would be cool to have this feature.
Worth checking
Articles
- Expo + React Native Navigation? Yes! - Medium, Dev.to
- cli-rn — making RN app developing experience as smooth as possible - Medium, Dev.to
Apps in production
- cli-rn app - Github
- Rabbit App. Lite Reddit client - Github, App Store, Google Play
- Christmas Market - App Store
- Trip Music Radio - App Store, Google Play
- Messenger for VK - App Store
- App for VK - App Store
License
This project is MIT licensed
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].