React native caveats

React-native_caveats.md

Modal / BottomSheet / React-Navigation Modal presentation

iOS-only.

Open an Modal On/Off in short duration will "freeze" the App - and no way to resolve it as the app stop to respond if this occur (RN hide the error):

Warning: Attempt to present <UIViewController: [hash1]> on <UIViewController: [hash2]> which is already presenting (null)

Analysis

Core reason:

1. You attempt to open any <Modal>-alike consecutively (pushing multiple Modal presentation Screen in react-navigation is another story and most of the time this is fine, except the case listed below)
2. The iOS implmentation in RN <Modal> will lead to a conflict of a UIViewController Rule, "A view controller can present only one view controller" (as "only the views from one view controller are visible at a time" [doc], although "You can present any (kind of) view controller from any other (kind of) view controller")
3. And that will trigger the warning above and lead the app into a lock condition 😇

Some possible point of failure:

• You have a screen using Modal presentation of react-navigation, you have opened the <Modal> in that screen and then called navigation.push() to open another screen also using Modal presentation, and in that screen you called navigation.goBack() => dismiss failure, lock
• You attempt to close the <Modal> in a screen using Modal presentation then call the navigation.push() in almost the same Tick => open another Modal but in navigation level meanwhile not truly dismiss the previous => lock

Solution

• Avoid using native Dialog/BottomSheet/Modal in any Modal presentation Screen (BottomSheet and Dialog involved as many of them using <Modal> to avoid complex setup). when needed, using the pure JS implmentation of them.
• unmount the Modal (=full dismiss) before making any navigation call (tricky)

• although it is an anti-pattern, but just in case: Supporting Multiple Modals in React Native: A New Approach

Lottie / Google Map

Android-only.

Turn out they are heavy views which will have a chance of dropping some render() during their lifecycle (e.g. mount/re-mount).

Lottie

try to switch the mounted Player animation file via props instead of mount/unmount different HoC contain Lottie Player

Google Map

Using Lite View (Static Map)

React-native_improved.md

Improve default prettier by eslint preset

To use new default ternaries formatting in 3.1

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

config file (.prettierrc.js):

module.exports = {
  arrowParens: 'always',
  bracketSameLine: true,
  bracketSpacing: true,
  singleQuote: true,
  trailingComma: 'all',
};