All Projects → kanzitelli → Rnn Starter

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.

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
data-flow
frontend data flow explored in React
Stars: ✭ 19 (-85.04%)
Mutual labels:  redux-saga, mobx
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
Rnexample
一个基于mobx、react-navigation、teaset的react-native框架
Stars: ✭ 114 (-10.24%)
Mutual labels:  mobx
Prodo
Prodo is a React framework to build apps faster.
Stars: ✭ 114 (-10.24%)
Mutual labels:  mobx
Enegrecer Web
Verdade Seja Dita!
Stars: ✭ 113 (-11.02%)
Mutual labels:  redux-saga
Snack React Native Apps
List of react native apps on https://snack.expo.io
Stars: ✭ 126 (-0.79%)
Mutual labels:  expo
Apple Basket Redux
🍎 苹果篮子,一个微型的redux/mobx演示(附多版本)
Stars: ✭ 125 (-1.57%)
Mutual labels:  mobx
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
Alpha
Craft your own web-based chatbot
Stars: ✭ 113 (-11.02%)
Mutual labels:  redux-saga
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
Mobx Preact
MobX bindings for Preact
Stars: ✭ 117 (-7.87%)
Mutual labels:  mobx
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-8.66%)
Mutual labels:  redux-saga

Table of contents

Motivation

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

Quick start with cli-rn

> npm i -g cli-rn
> cli-rn new AppName

Manual setup

  1. Clone the repo
git clone https://github.com/kanzitelli/expo-rnn-starter.git <appName> && cd <appName>
  1. Remove .git file (if are not planning to contribute)
rm -rf .git
  1. Install packages and rename the app (based on [react-native-rename-next
yarn
yarn rename <AppName>
yarn ios:pods
  1. 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

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 only react-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 with expo-localization and i18n-js. You can see an example of en, ru and de localizations in ExpoScreen.
  • 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 with expo-updates. In order to use it, you will need to change Expo.plist and AndroidManifest.xml with your actual information. More information about expo-updates.

Enhancements

There are still some things I would like to add to the starter:

Feel free to open an issue for suggestions.

Known issues (warnings)

  • Expo splash screen. There is some weird behavior using expo-splash-screen with react-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 include react-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 and react-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

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].