Merge branch 'haileyok-fix/android-splash-hackfix' into main

bluesky-social · Jan 2, 2024 · e460b30 · e460b30
2 parents 4e9e92f + 43ac208
commit e460b30
Showing 1 changed file with 46 additions and 27 deletions.
diff --git a/src/Splash.tsx b/src/Splash.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useEffect} from 'react'
 import {View, StyleSheet, Image as RNImage} from 'react-native'
 import * as SplashScreen from 'expo-splash-screen'
 import {Image} from 'expo-image'
+import {platformApiLevel} from 'expo-device'
 import Animated, {
   interpolate,
   runOnJS,
@@ -136,34 +137,52 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         />
       )}
 
-      <MaskedView
-        style={[StyleSheet.absoluteFillObject]}
-        maskElement={
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFillObject,
-              {
-                // Transparent background because mask is based off alpha channel.
-                backgroundColor: 'transparent',
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center',
-                transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
-              },
-            ]}>
-            <AnimatedLogo style={[logoAnimations]} />
+      {platformApiLevel && platformApiLevel <= 25 ? (
+        // Use a simple fade on older versions of android (work around a bug)
+        <>
+          {!isAnimationComplete && (
+            <View
+              style={[
+                StyleSheet.absoluteFillObject,
+                {backgroundColor: 'white'},
+              ]}
+            />
+          )}
+          <Animated.View style={[{flex: 1}, appAnimation]}>
+            {props.children}
           </Animated.View>
-        }>
-        {!isAnimationComplete && (
-          <View
-            style={[StyleSheet.absoluteFillObject, {backgroundColor: 'white'}]}
-          />
-        )}
-
-        <Animated.View style={[{flex: 1}, appAnimation]}>
-          {props.children}
-        </Animated.View>
-      </MaskedView>
+        </>
+      ) : (
+        <MaskedView
+          style={[StyleSheet.absoluteFillObject]}
+          maskElement={
+            <Animated.View
+              style={[
+                {
+                  // Transparent background because mask is based off alpha channel.
+                  backgroundColor: 'transparent',
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                },
+              ]}>
+              <AnimatedLogo style={[logoAnimations]} />
+            </Animated.View>
+          }>
+          {!isAnimationComplete && (
+            <View
+              style={[
+                StyleSheet.absoluteFillObject,
+                {backgroundColor: 'white'},
+              ]}
+            />
+          )}
+          <Animated.View style={[{flex: 1}, appAnimation]}>
+            {props.children}
+          </Animated.View>
+        </MaskedView>
+      )}
     </View>
   )
 }