Skip to content

Instantly share code, notes, and snippets.

@vincicat

vincicat/React-native_caveats.md

Last active July 15, 2024 15:01
Show Gist options
  • Save vincicat/ddd9d8830e8f2645bcea0cb79b37b6fe to your computer and use it in GitHub Desktop.
Save vincicat/ddd9d8830e8f2645bcea0cb79b37b6fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vincicat revised this gist Jul 15, 2024. 1 changed file with 9 additions and 1 deletion.
    10 changes: 9 additions & 1 deletion React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,11 @@
    ## 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.
    @@ -25,7 +33,7 @@ Open an Modal On/Off in short duration will "freeze" the App - and no way to res

    * 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
    ## TextInput & IME

    event order: onChange > onChangeText > onSubmitEditiing > onEndEditing

  2. vincicat revised this gist May 29, 2024. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,12 @@ Open an Modal On/Off in short duration will "freeze" the App - and no way to res

    * 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

    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.
  3. vincicat revised this gist Mar 15, 2024. 1 changed file with 18 additions and 0 deletions.
    18 changes: 18 additions & 0 deletions React-native_improved.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    ## Improve default prettier by eslint preset

    To use new default ternaries formatting in [3.1](https://prettier.io/blog/2023/11/13/3.1.0)

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

    config file (`.prettierrc.js`):

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

    ```
  4. vincicat revised this gist Mar 15, 2024. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,14 +10,14 @@ Open an Modal On/Off in short duration will "freeze" the App - and no way to res

    #### 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](https://developer.apple.com/documentation/uikit/uiviewcontroller)])
    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](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 `<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 => 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.
  5. vincicat revised this gist Mar 15, 2024. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,19 +8,19 @@ Open an Modal On/Off in short duration will "freeze" the App - and no way to res

    ### Analysis

    Core reason:
    #### 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. in RN `<Modal>`'s iOS implementation that 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)])
    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](https://developer.apple.com/documentation/uikit/uiviewcontroller)])
    3. And that will trigger the warning above and lead the app into a `lock` condition 😇

    Some possible point of failure:
    #### 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 => 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 setup). when needed, using the pure JS implmentation of them.
    - 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](https://www.whitespectre.com/ideas/react-native-multiple-modals-library/)
  6. vincicat revised this gist Mar 15, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,9 +19,9 @@ 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 => lock

    ### Solution:
    ### Solution
    - Avoid using native Dialog/BottomSheet/Modal in any Modal presentation `Screen` (BottomSheet and Dialog involved as many of them using `<Modal>` to avoid setup). when needed, using the pure JS implmentation of them.
    - unmount the Modal before making any navigation call (tricky)
    - 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/)

  7. vincicat revised this gist Mar 15, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ Open an Modal On/Off in short duration will "freeze" the App - and no way to res
    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. in RN that 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)])
    2. in RN `<Modal>`'s iOS implementation that 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)])
    3. And that will trigger the warning above and lead the app into a `lock` condition 😇

    Some possible point of failure:
    @@ -20,7 +20,7 @@ Some possible point of failure:
    - 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 => 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 setup)
    - Avoid using native Dialog/BottomSheet/Modal in any Modal presentation `Screen` (BottomSheet and Dialog involved as many of them using `<Modal>` to avoid setup). when needed, using the pure JS implmentation of them.
    - unmount the Modal 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/)
  8. vincicat revised this gist Mar 15, 2024. 1 changed file with 30 additions and 7 deletions.
    37 changes: 30 additions & 7 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,38 @@
    ## Modal / BottomSheet
    ## Modal / BottomSheet / React-Navigation Modal presentation

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

    `Warning: Attempt to present <UIViewController: [hash]> on <UIViewController: [hash] which is already presenting (null) `
    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):

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screens
    `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. in RN that 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)])
    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 => 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 setup)
    - unmount the Modal 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/)

    ## Lottie
    ## Lottie / Google Map

    Android-only.

    Android: Turn out Lottie is an heavy app which will have a chance of drop an screen update when switching the Animation Component.
    Turn out they are heavy views which will have a chance of dropping some `render()` during their lifecycle (e.g. mount/re-mount).

    Do: switch the mounted Player animation file instead of mount/unmount.
    ### 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)
  9. vincicat revised this gist Mar 15, 2024. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,15 @@
    ## Modal / BottomSheet

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

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

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screens

    * 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/)

    ## Lottie

    Turn out Lottie is an heavy app which will have a chance of drop an screen update when switching the Animation Component.
    Android: Turn out Lottie is an heavy app which will have a chance of drop an screen update when switching the Animation Component.

    Do: switch the mounted Player animation file instead of mount/unmount.
  10. vincicat revised this gist Mar 15, 2024. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,10 @@
    ## Modal / BottomSheet

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

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screen
    `Warning: Attempt to present <UIViewController: [hash]> on <UIViewController: [hash] which is already presenting (null) `

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screens

    ## Lottie

  11. vincicat revised this gist Mar 15, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    ## Modal / BottomSheet

    Open an Modal On/Off in short duration will "jam" the App - and no way to resolve it as the hidden overlay blocks everything.
    Open an Modal On/Off in short duration will "jam" the App - and no way to resolve it as the app stop to respond if the jamming occur (RN hide the error)

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screen

  12. vincicat created this gist Mar 15, 2024.
    11 changes: 11 additions & 0 deletions React-native_caveats.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    ## Modal / BottomSheet

    Open an Modal On/Off in short duration will "jam" the App - and no way to resolve it as the hidden overlay blocks everything.

    When using Modal presentation of react-navigation, beware any opened RN Modal - to avoid the issue, using pure JS overlay in those screen

    ## Lottie

    Turn out Lottie is an heavy app which will have a chance of drop an screen update when switching the Animation Component.

    Do: switch the mounted Player animation file instead of mount/unmount.