Merge pull request #28644 from zoontek/fix-oneui4-splashscreen

Fix splash screen logo size jump on Samsung OneUI v4

__mocks__/react-native.js

@@ -28,6 +28,7 @@ jest.doMock('react-native', () => {
                 BootSplash: {
                     getVisibilityStatus: jest.fn(),
                     hide: jest.fn(),
+                    logoSizeRatio: 1,
                     navigationBarHeight: 0,
                 },
                 StartupTimer: {stop: jest.fn()},

android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashDialog.java

@@ -6,6 +6,7 @@
 import android.view.Window;
 import android.view.WindowManager.LayoutParams;
 import androidx.annotation.NonNull;
+import com.expensify.chat.R;
 
 public class BootSplashDialog extends Dialog {
 
@@ -26,6 +27,10 @@ protected void onCreate(Bundle savedInstanceState) {
 
     if (window != null) {
       window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
+
+      if (BootSplashModule.isSamsungOneUI4()) {
+        window.setBackgroundDrawableResource(R.drawable.bootsplash_samsung_oneui_4);
+      }
     }
 
     super.onCreate(savedInstanceState);

android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashModule.java

@@ -23,6 +23,7 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.PixelUtil;
+import java.lang.reflect.Field;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.Timer;
@@ -47,6 +48,19 @@ public String getName() {
     return NAME;
   }
 
+  // From https://stackoverflow.com/a/61062773
+  public static boolean isSamsungOneUI4() {
+    String name = "SEM_PLATFORM_INT";
+
+    try {
+      Field field = Build.VERSION.class.getDeclaredField(name);
+      int version = (field.getInt(null) - 90000) / 10000;
+      return version == 4;
+    } catch (Exception ignored) {
+      return false;
+    }
+  }
+
   @Override
   public Map<String, Object> getConstants() {
     final HashMap<String, Object> constants = new HashMap<>();
@@ -61,6 +75,7 @@ public Map<String, Object> getConstants() {
             ? Math.round(PixelUtil.toDIPFromPixel(resources.getDimensionPixelSize(heightResId)))
             : 0;
 
+    constants.put("logoSizeRatio", isSamsungOneUI4() ? 0.5 : 1);
     constants.put("navigationBarHeight", height);
     return constants;
   }

android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:opacity="opaque">
+    <item android:gravity="fill">
+        <color android:color="?attr/windowSplashScreenBackground" />
+    </item>
+
+    <!-- There's an issue with logo size on Samsung OneUI v4
+         We need to render it 2 times smaller (288 / 2 = 144) -->
+    <item
+        tools:ignore="UnusedAttribute"
+        android:drawable="?windowSplashScreenAnimatedIcon"
+        android:gravity="center"
+        android:width="144dp"
+        android:height="144dp" />
+</layer-list>

android/app/src/main/res/values/styles.xml

@@ -72,7 +72,7 @@
 
     <style name="BootTheme" parent="Theme.SplashScreen">
         <item name="android:statusBarColor">@android:color/transparent</item>
-        <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
+        <item name="windowSplashScreenAnimatedIcon">@drawable/bootsplash_logo</item>
         <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
     </style>
 

src/components/SplashScreenHider/index.native.js

@@ -18,6 +18,9 @@ const defaultProps = {
 function SplashScreenHider(props) {
     const {onHide} = props;
 
+    const logoSizeRatio = BootSplash.logoSizeRatio || 1;
+    const navigationBarHeight = BootSplash.navigationBarHeight || 0;
+
     const opacity = useSharedValue(1);
     const scale = useSharedValue(1);
 
@@ -64,15 +67,15 @@ function SplashScreenHider(props) {
                 opacityStyle,
                 {
                     // Apply negative margins to center the logo on window (instead of screen)
-                    marginBottom: -(BootSplash.navigationBarHeight || 0),
+                    marginBottom: -navigationBarHeight,
                 },
             ]}
         >
             <Reanimated.View style={scaleStyle}>
                 <Logo
                     viewBox="0 0 80 80"
-                    width={100}
-                    height={100}
+                    width={100 * logoSizeRatio}
+                    height={100 * logoSizeRatio}
                 />
             </Reanimated.View>
         </Reanimated.View>

src/libs/BootSplash/index.native.ts

@@ -11,5 +11,6 @@ function hide(): Promise<void> {
 export default {
     hide,
     getVisibilityStatus: BootSplash.getVisibilityStatus,
+    logoSizeRatio: BootSplash.logoSizeRatio || 1,
     navigationBarHeight: BootSplash.navigationBarHeight || 0,
 };

src/libs/BootSplash/index.ts

@@ -30,5 +30,6 @@ function getVisibilityStatus(): Promise<VisibilityStatus> {
 export default {
     hide,
     getVisibilityStatus,
+    logoSizeRatio: 1,
     navigationBarHeight: 0,
 };

src/libs/BootSplash/types.ts

@@ -1,6 +1,7 @@
 type VisibilityStatus = 'visible' | 'hidden';
 
 type BootSplashModule = {
+    logoSizeRatio: number;
     navigationBarHeight: number;
     hide: () => Promise<void>;
     getVisibilityStatus: () => Promise<VisibilityStatus>;