Production-ready starter for React Native App
source link: https://reactnativeexample.com/production-ready-starter-for-react-native-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
RPReplay_Final1632419741.MP4
This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️
For more information, check out Why section.
Getting Started
Quick start with cli-rn
> npx cli-rn new App -t rn
If you have any troubles running the app with yarn ios
or yarn android
, open XCode or Android Studio and run the project from there.
Manual setup
What’s inside
- React Navigation (v6) – routing and navigation for React Native apps. If you’d like to use React Native Navigation by Wix, check out rnn-starter.
- RN UI lib – amazing Design System, UI toolset & components library for React Native. Dark Mode is implemented using this library.
- Reanimated 2 – React Native’s Animated library reimplemented.
- MobX – simple, scalable state management, with mobx-persist-store for persisting your stores.
- AsyncStorage MMKV – efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage!
Extra helpful libraries
- React Native Gesture Handler – native touches and gesture system for React Native.
- React Native Device Info – device information for React Native iOS and Android.
- Hermes Engine – a JavaScript engine optimized for running React Native apps.
- ESLint + Prettier – keep your code neat and structured.
- Patch Package – useful for fixing node modules instantly.
- Release It – automate versioning and publishing of your app.
- Typescript – strict syntactical superset of JavaScript.
Useful services/methods
navigation
– a service where all navigation configuration takes place in. It simplifies and abstracts the process of registering screens, layouts, etc.translate
– a service that brings easy integration of localization for an app by using i18n-js and react-native-localize. You can see an example ofen
andru
localizations inExample
screen.onStart
– a service where you can write your own logic when app is launched. For example, you can increment number ofappLaunches
there.configureDesignSystem()
– a method where all settings for an app’s design system is taking place. You can customize there colors, schemes, typegraphy, spacings, etc.
Advantages
Describe app screens in one place
All setup for your screens takes place in one file src/screens/index.ts
:
Stack Navigator:
const HomeStack = () => genStackNavigator([screens.Main, screens.Example]);
Tab Navigator:
const TabNavigator = () => genTabNavigator([tabs.Main, tabs.WIP, tabs.Settings]);
Navigate to other screens with predictability
Samples for new screens, services, stores and components.
So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.
Enhancements
There are still some things I would like to add to the starter:
General
- Passing props to a screen example
- Constants: add Dimensions
- MMKV (AsyncStorage) stores persisting example
- Shared transitions — IjzerenHein/react-navigation-shared-element
Production
Feel free to open an issue for suggestions.
Known issues (warnings)
- Large title is not shown on 2nd+ tab. This issue 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 doyarn add/remove/etc
. - 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 and be aware of the issue if you’d like to use them anyways.
Worth checking
Other starters
- 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.
- 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.
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
- Wallpapers App – Twitter, App Store soon
- Rabbit App. Lite Reddit client – Github, App Store, Google Play
- Trip Music Radio – App Store, Google Play
- App for VK – App Store
- Messenger for VK – App Store
- Christmas Market – App Store
…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 which simplify usage of React Navigation and other libraries. Check out Advantages section.
If you’d like to use React Native Navigation by Wix, check out rnn-starter.
License
This project is MIT licensed
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK