[IOS] Stuck on Splash Screen with Code Push

💻 My environment

• react-native-bootsplash version: 2.2.4
• react-native version: 0.61.5
• Platform: ios
• OS version: 13.5
• Device: N/A
• Simulator: Both
• Android Studio version: N/A
• Android buildToolsVersion: N/A
• Xcode version: N/A

🕵️‍♂️ Reproducing the issue

I do not have time to create full reproduction repo, but I was facing an issue with Code Push & RNBootsplash hence I’d like to note down my findings:

Setup:

1. Setup RNBootsplash with simple usage (detail not important):

setTimeout(
  () => RNBootsplash.hide({ duration: 200 }),
  500,
)

1. Setup RNCodePush with following config:

{
  checkFrequency: RNCodePush.CheckFrequency. ON_APP_START,
  updateDialog: true,
}

1. Create a native build and CodePush build so that there’s an CodePush update available from the native build.

Steps and Expected Behaviour:

1. Upon launch, CodePush will automatically check for update
2. CodePush finds the update, and shows it’s native dialog (modal) for update prompt
3. While 1 & 2 is happening, RNBootsplash will hide the splash screen
4. Close the App, and reopen the App
5. CodePush still has context of update available, hence shows the native dialog (modal) for update prompt immediately
6. While 5 is happening, RNBootsplash should still hide the splash screen behind the scene

Actual Behaviour: 1-4. works as expected 5. native dialog (modal) for update prompt shows for split second, then disappears 6. Screen stuck on the splash screen and cannot proceed

🤞Solution

Temporal Solution

Identifying this issue took some time, but once identified the temporal “fix” was straigthforward. What I did was change the CodePush config to use the following:

{
  checkFrequency: RNCodePush.CheckFrequency. MANUAL,
  updateDialog: true,
}

And call a manual check after RNBootsplash.hide is complete. This avoids the dialog to show while RNBootsplash is still in action. This solution have solved this issue, but it is not the ideal solution.

Ideal Solution (Ask)

I am no expert with native mobile development, but my guess here is that there’s some native view interaction rules of RNBootsplash which is not cooperating well/designed for, while other native view/overlay is in place (In this case, CodePush’s native dialog/modal). Based on my assumption, I believe the ideal solution is for RNBootsplash to look for the right native view to interact with while keeping other native views untouched. Apologies if my assumption is out of place, but hope this would at least help others who’s encountering similar issue.

[zoontek]

@rarira That’s exactly why I work on Promise support. It’ too hard to handle async state with imperative functions and timer. Android support is already done, iOS nearly is.

[zoontek]

I am no expert with native mobile development, but my guess here is that there’s some native view interaction rules of RNBootsplash which is not cooperating well/designed for, while other native view/overlay is in place (In this case, CodePush’s native dialog/modal).

The BootSplash is designed using a simple UIViewController which came above the RCTRootView. It’s standard iOS behavior, there is no magic 😄

And call a manual check after RNBootsplash.hide is complete. This avoids the dialog to show while RNBootsplash is still in action. This solution have solved this issue, but it is not the ideal solution.

I don’t see why? You resolved a race condition. This is not a workaround, but proper handling of this behavior 🙂.

PS: I’m currently working on a new major version with Promises to make it easier to deal with async flow.