Common Typing Error (Android)

Android component usually has strict typing limition - if type mismatch, Android will crash while iOS won't

example: java.lang.Double cannot be cast to java.lang.Boolean on <ScrollView> & <RefreshControl>

reason: some props in <RefreshControl> require a Boolean, but you are giving Number to those props so it won't convert and throw type error.

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

TextInput & IME

event order: onChange > onChangeText > onSubmitEditiing > onEndEditing

noted: using value={state} will break IME input process as onChangeText =/= (on)compositionend which will fire on every key press.

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)