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.
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)
- 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) - The iOS implmentation in RN
<Modal>
will lead to a conflict of aUIViewController
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") - And that will trigger the warning above and lead the app into a
lock
condition 😇
- You have a screen using Modal presentation of react-navigation, you have opened the
<Modal>
in that screen and then callednavigation.push()
to open another screen also using Modal presentation, and in that screen you callednavigation.goBack()
=> dismiss failure, lock - You attempt to close the
<Modal>
in a screen using Modal presentation then call thenavigation.push()
in almost the sameTick
=> open another Modal but in navigation level meanwhile not truly dismiss the previous => lock
- 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
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.
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).
try to switch the mounted Player animation file via props instead of mount/unmount different HoC contain Lottie Player
Using Lite View (Static Map)