Warning - Highly opinionated material 😂
This post is organic, I will continue to update it with relevant stuff related to React Native.
Table of Contents
- Component Libraries
- Native Modules
- Supported Platforms
- State Management
- Upcoming Features
Basically you need to know:
- and the Module: AccessibilityInfo
See official documentation on accessibility.
Also, use FormidableLabs’ ESLINT plugin to ensure accessible components
You can use the Animated API with
useNativeDriver: true for most simple animations. But, for more complex animations that are driven by user interaction like swipes and scrolls make sure you are using something that uses reanimated under-the-hood.
react-native-redash Redash is a utility library powered by reanimated made by William Candillon, creator of
[Can it be done in React Native?](https://www.youtube.com/user/wcandill)series.
react-native-reanimated And reanimated itself. Version 2 of this library is a complete rewrite making it way more developer friendly, previous version had a steep curving learn.
Short list of impressive companies that are using React Native:
- Sky UK | NowTV
- CruncyRoll | Ellation
There are posts, job listings, and public libraries that prove these companies are using React Native. Plus, I have personally worked as a contractor for some of them.
Which one? Well that depends, I like react-native-elements because it doesn’t try to do too much, it is simple and lightweight. Native Base is famous for being vast and offering support for web too.
There are more UI libraries for React Native, but most serious products will develop their own system design and component library. Use react-native-elements as an inspiration.
React Native Navigation, on the contrary, implemented a fully native solution that required linking the native parts. Linking the native parts was not straight forward, thus many preferred React Navigation.
For native performance plus look and feel, you can use either react-native-navigation or react-native-screens/native-stack.
New Navigation Module
Graham Mendick introduced another approach to navigation for React Native with similar principles of React Native Navigation. I wrote about it here (@TODO - Not yet public).
If you are going to implement a native module use the following library for help:
There is a page in the docs dedicated to this as well.
- Android TV
- LG webOS
- Fire TV
For iOS, Android, and AndroidTV see https://reactnative.dev/
For Windows, XBox, and Macos see https://microsoft.github.io/react-native-windows/
For a more unified solution that has all 12 platforms see https://www.youi.tv/youi-engine/react-native/
Renative tries to target all handsets, tablets, and 10ft devices with a single build system. It is still early and it does not seem to have serious financial support, but it has shown some growth.
Performance is a broad subject. If you think you got a performance issue, first identify where/when?
On Initial App Load
Watch Parashuram N talk on React Native architecture to better understand where the problem might be. The initial load can be improved by reducing bundle size, RAM bundling, and lazily loading native modules.
On Initial Component Screen Loads
While Scrolling Lists
First see if you can just use a FlatList with the right optimization props, see this post.
If that’s not enough and you still struggle, checkout the RecyclerListView.
If your company still find it slow, implement a native view where the list is fully handled natively for both iOS and Android 😅.
There are multiple problems you can face here, like slowness with the animation or lack of responsiveness. If it is an animation issue check out the animation point below.
For unresponsiveness you can check where the navigation is being dispatched plus profile your JS executor to validate what is blocking/delaying its process. For iOS, make sure you use Safari to debug the JS context using the same JS engine (JSCore). For Android you can use react-native-debugger if you don’t have Hermes enabled, else see this post.
Be careful with Stack navigators stacking too many screens, this can cause memory issues. Plus your global store could cause updates to screens at the back of the stack.
Depending on the problem it might not be optimizable. You can explore options that implement native navigators for slight better performance.
When Global Store Updates
This is also another broad topic. Your state manager of choice has a huge impact on this, and often if they don’t control when to update your connected components you are likely going to need to implement memoize for your state selectors.
See Animation section on this.
If you haven’t learned about the difference of UI state and Server cache please read Kent’s post. State management is made hard because of this confusion.
This is an ever-growing list. See React State Museum for a sense.
We can argue that the growth of so many options is caused by the lack of a solution offered by the React Core team.
For a moment everyone thought this would have been solved with React Context API, nevertheless, the React Core team admitted it is not recommended for states that update frequently.What options do I recommend?
Objective, lightweight, and performant. Its pattern forces you into a good practice of separating your concerns.
- Server Cache (Requires you to write entire invalidation/rehydration/update logic)
- Global UI State (If you can avoid it please avoid it)
Nothing really. But, it is likely incompatible with the future suspense API, which is not done.
Server Cache solution. It is full of features to deal with server data.
- Server Cache (Complete with many features)
- Global UI State
Recoil is for UI state that can dynamically grow and updates too frequently. I had to leave a note here about Recoil since it is the current hot thing.
Is Recoil JS fully support React Native?
It “experimentally” does. https://recoiljs.org/blog/2020/10/30/0.1.1-released/
- UI State With Frequent Atomic Updates
Atomic updates means updating just a node in your entire React Component tree.
- Server Cache
- Global State that is non-atomic
I am intentionally omitting many famous libraries, the above two libraries Zustand and React Query would solve 100% of my state management problems
Jest is the go to framework. You can or not use any helpers.
Since React Native inherits much of the React ecosystem, many liked using Enzyme, but this is not longer a go to choice.
From my experience, Jest plus react-test-renderer is all you need for unit and integration testing on React Native. However, a recent rise in popularity of Kent’s react-testing-library made room for a react-native-testing-library
- react-native-testing-library (Optional)
- react-native-testing-library (Optional)
End To End Testing
- Appium (Recommended)
Is Fast Fresh Ready? Yes! See postIs The New UIManager (Fabric) Ready?
Last official update on fabric https://github.com/react-native-community/discussions-and-proposals/issues/4#issuecomment-569883489Is JSI Ready?
First part is in master https://github.com/react-native-community/discussions-and-proposals/issues/261
But migration of UIManager to use JSI has not been released into the public.Is TurboModule Ready?
There are examples of it working on master, but no official documentation yet.Hermes is coming to iOS
It is included in the v0.64 release candidate. https://github.com/facebook/react-native/releases/tag/v0.64.0-rc.0Multiple Bundle Support?
This is the ability to have “super apps”. That is, a single app that can dynamically load other apps within it. This idea was popularized by China’s super app like WeChat
In November of 2020 work was put in place to support it. A new Hermes release should come with the support soon. See https://github.com/facebook/hermes/issues?q=JS+Intl+support+in+Hermes