deps: Update to latest and properly set up expo-splash-screen.

This package lets us control when the splash/launch screen hides. Soon, we may want it to show during the Redux store rehydration time [1]. On iOS, we've stuck to the term "launch screen", since Apple uses it consistently [2]. I don't see a clear pattern for Android, so we've kept to "splash screen" to match `expo-splash-screen`. Finish following the extra instructions for bare React Native apps [3], linked to from the main Expo doc [4]. Most of it is setup that's not specific to `expo-splash-screen` and has been done in recent commits. Here, we do the steps that involve invoking code from `expo-splash-screen`. On iOS, this package removes the need to set RCTRootView's `loadingView` property, which we started using in a recent commit -- it seems that `expo-splash-screen` automatically makes sure that the splash screen persists until our React Native views have first rendered. [1] https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/React.20Navigation.20v5/near/1039507 [2] https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/ [3] https://github.com/expo/expo/tree/master/packages/expo-splash-screen#-installation-in-bare-react-native-projects [4] https://docs.expo.io/versions/latest/sdk/splash-screen/ Fixes: #2756
zulip · Oct 20, 2020 · b60c1fb · b60c1fb
1 parent f5d6947
commit b60c1fb
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 20 deletions.
diff --git a/android/app/src/main/java/com/zulipmobile/MainActivity.kt b/android/app/src/main/java/com/zulipmobile/MainActivity.kt
@@ -12,6 +12,8 @@ import com.facebook.react.ReactApplication
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
+import expo.modules.splashscreen.singletons.SplashScreen;
+import expo.modules.splashscreen.SplashScreenImageResizeMode;
 import com.zulipmobile.notifications.*
 import com.zulipmobile.sharing.SharingModule
 
@@ -36,6 +38,7 @@ open class MainActivity : ReactActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        SplashScreen.show(this, SplashScreenImageResizeMode.CONTAIN, ReactRootView::class.java, false)
         WebView.setWebContentsDebuggingEnabled(true)
         maybeHandleIntent(intent)
     }

diff --git a/flow-typed/expo-splash-screen_vx.x.x.js b/flow-typed/expo-splash-screen_vx.x.x.js
@@ -0,0 +1,38 @@
+// Copied / converted by hand from
+// node_modules/expo-splash-screen/SplashScreen.ts.
+
+declare module 'expo-splash-screen' {
+  /**
+   * Makes the native splash screen stay visible until `SplashScreen.hideAsync()` is called.
+   * It has to be called before any view is rendered.
+   *
+   * @example
+   * ```
+   * // top level component
+   *
+   * SplashScreen.preventAutoHideAsync()
+   *  .then(result => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
+   *  .catch(console.warn); // it's good to explicitly catch and inspect any error
+   *
+   * class App extends React.Component {
+   *   ...
+   *   // Hide SplashScreen once your app content is ready to be displayed.
+   *   await SplashScreen.hideAsync()
+   *   ...
+   * }
+   * ```
+   */
+  declare export function preventAutoHideAsync(): Promise<boolean>;
+
+  declare export function hideAsync(): Promise<boolean>;
+
+  /**
+   * @deprecated
+   */
+  declare export function preventAutoHide(): void;
+
+  /**
+   * @deprecated
+   */
+  declare export function hide(): void;
+}
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -23,7 +23,7 @@ PODS:
   - EXScreenOrientation (1.0.0):
     - React-Core
     - UMCore
-  - EXSplashScreen (0.5.0):
+  - EXSplashScreen (0.6.2):
     - React
     - UMCore
   - FBLazyVector (0.62.2)
@@ -649,7 +649,7 @@ SPEC CHECKSUMS:
   EXImageLoader: 02ca02c9cd5cc8a97b423207a73a791e0a86bea5
   EXPermissions: 80ac3acbdb145930079810fe5b08c022b3428aa8
   EXScreenOrientation: 44d3cd3a99a86b9cb681e742697bc2c057d7fbd2
-  EXSplashScreen: 9423d258b71afa5bf128a83dcb57b636d9900a74
+  EXSplashScreen: 7ea40b8524f27e7444e3892411c8a4782ab6b4ce
   FBLazyVector: 4aab18c93cd9546e4bfed752b4084585eca8b245
   FBReactNativeSpec: 5465d51ccfeecb7faa12f9ae0024f2044ce4044e
   Flipper: 6c1f484f9a88d30ab3e272800d53688439e50f69

diff --git a/ios/ZulipMobile/AppDelegate.m b/ios/ZulipMobile/AppDelegate.m
@@ -12,6 +12,8 @@
 #import <UMReactNativeAdapter/UMNativeModulesProxy.h>
 #import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>
 #import <EXScreenOrientation/EXScreenOrientationViewController.h>
+#import <EXSplashScreen/EXSplashScreenService.h>
+#import <UMCore/UMModuleRegistryProvider.h>
 
 #if DEBUG
   #import <FlipperKit/FlipperClient.h>
@@ -48,15 +50,20 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
                                                       moduleName:@"ZulipMobile"
                                                initialProperties:nil];
 
-  UIView* loadingView = [UIView new];
-  loadingView.backgroundColor = [UIColor colorNamed:@"Brand"];
-  rootView.loadingView = loadingView;
-
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController =  [[EXScreenOrientationViewController alloc] initWithDefaultScreenOrientationMask:UIInterfaceOrientationMaskAll];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+
+  // Crucial setup for `expo-splash-screen`. Not currently documented
+  // -- this comes from the never-merged PR
+  // https://github.com/expo/expo/pull/7993/files and discussion on
+  // its issue, like
+  // https://github.com/expo/expo/issues/7689#issuecomment-618728916.
+  EXSplashScreenService *splashScreenService = (EXSplashScreenService *)[UMModuleRegistryProvider getSingletonModuleForClass:[EXSplashScreenService class]];
+  [splashScreenService showSplashScreenFor:rootViewController];
+
   return YES;
 }
 

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "expo-apple-authentication": "^2.1.1",
     "expo-application": "^2.1.1",
     "expo-screen-orientation": "^1.0.0",
-    "expo-splash-screen": "^0.5.0",
+    "expo-splash-screen": "^0.6.2",
     "immutable": "^4.0.0-rc.12",
     "json-stringify-safe": "^5.0.1",
     "katex": "^0.11.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1088,10 +1088,10 @@
     xcode "^2.1.0"
     xml2js "^0.4.23"
 
-"@expo/[email protected].13":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.1.13.tgz#9f974146d716ffc03461e4d2deb7bfb22826e56a"
-  integrity sha512-1AYaHDJlAXfS7K/i2kI7U5+dELfKnFrXti97cIC5PkHOwEQVti8Uw1/KXO0+Pih7g8BNDvDPjHlMNDqn7AnBCA==
+"@expo/[email protected].17":
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.1.17.tgz#74534e475546a2e67228a3741bcf908e7b06e439"
+  integrity sha512-TKQ6bUAGkRvMvU8f3PjF6C1Z3pP7jotFZnbrXV1Y1Jua9lofJ5Wt15zqgbIcBIEDFDd2BFIUhsczSd0PPfivAQ==
   dependencies:
     "@react-native-community/cli-platform-android" "^4.10.0"
     "@react-native-community/cli-platform-ios" "^4.10.0"
@@ -1100,14 +1100,15 @@
     core-js "^3.6.5"
     deep-equal "^2.0.3"
     fs-extra "^9.0.0"
+    lodash "^4.17.15"
     pngjs "^5.0.0"
     xcode "^3.0.0"
     xml-js "^1.6.11"
 
-"@expo/configure-splash-screen@0.1.17":
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.1.17.tgz#74534e475546a2e67228a3741bcf908e7b06e439"
-  integrity sha512-TKQ6bUAGkRvMvU8f3PjF6C1Z3pP7jotFZnbrXV1Y1Jua9lofJ5Wt15zqgbIcBIEDFDd2BFIUhsczSd0PPfivAQ==
+"@expo/configure-splash-screen@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@expo/configure-splash-screen/-/configure-splash-screen-0.2.0.tgz#84f9f71363259f16fd0073636a198c750a3cdd7c"
+  integrity sha512-2RG0NOeXZAGKNJXVEEA9wukDsxjmMdDTclZP9FPb15r3+siWI/GZaC36IqoQ8/mw4wzX5Y+OvZ2cHhc0J8t+0A==
   dependencies:
     "@react-native-community/cli-platform-android" "^4.10.0"
     "@react-native-community/cli-platform-ios" "^4.10.0"
@@ -5081,12 +5082,12 @@ expo-screen-orientation@^1.0.0:
   resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-1.0.0.tgz#a168b7493e7a7b45da2c80b1b0d4e89e1f8e7698"
   integrity sha512-McYHWSA3KVgh3IeztKg0oxkHtSRzDfqGRSHg6GgIici5C93LOF4tGzO38tLNVGXIjbu8EdvBRB7pslKS73AXGg==
 
-expo-splash-screen@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.5.0.tgz#cad0eb77a3eade2c7101d169b8655e7ee8053c2f"
-  integrity sha512-MqYHCbqGtmnA/b+D2JQHxeQzlSfbU4SAGQ2DmzmaBekqRMkRrVrsiBXF7b3wpHTW6R3pC5lsXoH9vq91e5a9xg==
+expo-splash-screen@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.6.2.tgz#2be7fc28ad62549e870c69f1fe133ebe756c524f"
+  integrity sha512-Rvi+aiVDztFyLh5fYJYcZxVuQNDCy6ATSTfxuch5uVQ1jA9/vjVzUKG4iZCoChaSCnMV56aFftHBWSDNWPvLFQ==
   dependencies:
-    "@expo/configure-splash-screen" "0.1.13"
+    "@expo/configure-splash-screen" "0.2.0"
 
 extend-shallow@^1.1.2:
   version "1.1.4"