## 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 `` & `` reason: some props in `` 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 on which is already presenting (null) ` ### Analysis #### Core reason: 1. You attempt to open any ``-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 `` 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](https://developer.apple.com/documentation/uikit/uiviewcontroller)], 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 `` 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 `` 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 `` 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](https://www.whitespectre.com/ideas/react-native-multiple-modals-library/) ## 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)