feat: add animated splash screen

Expensify · Dec 6, 2023 · 594d0c8 · 594d0c8
1 parent 9b71f23
commit 594d0c8
Show file tree

Hide file tree

Showing 30 changed files with 313 additions and 103 deletions.
diff --git a/android/app/src/main/res/drawable/bootsplash.xml b/android/app/src/main/res/drawable/bootsplash.xml
@@ -4,8 +4,4 @@
     <item android:gravity="fill">
         <color android:color="?attr/windowSplashScreenBackground" />
     </item>
-
-    <item android:gravity="fill">
-        <bitmap android:src="?windowSplashScreenAnimatedIcon" android:gravity="center" />
-    </item>
-</layer-list>
+</layer-list>
diff --git a/android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml b/android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml
@@ -6,13 +6,4 @@
     <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>
+</layer-list>
diff --git a/android/app/src/main/res/values-v31/styles.xml b/android/app/src/main/res/values-v31/styles.xml
@@ -9,8 +9,7 @@
     </style>
 
     <style name="Theme.SplashScreen" parent="Theme.SplashScreen.Common">
-        <item name="android:windowSplashScreenAnimatedIcon">?windowSplashScreenAnimatedIcon</item>
         <item name="android:windowSplashScreenBackground">?windowSplashScreenBackground</item>
     </style>
 
-</resources>
+</resources>
diff --git a/android/app/src/main/res/values/attrs.xml b/android/app/src/main/res/values/attrs.xml
@@ -1,4 +1,3 @@
 <resources>
-    <attr name="windowSplashScreenAnimatedIcon" format="reference" />
     <attr name="windowSplashScreenBackground" format="color" />
-</resources>
+</resources>
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
@@ -1,9 +1,10 @@
 <resources>
-    <color name="bootsplash_background">#03D47C</color>
+    <color name="bootsplash_background">#002E22</color>
     <color name="white">#FFFFFF</color>
     <color name="accent">#03D47C</color>
     <color name="dark">#0b1b34</color>
     <color name="gray4">#7D8B8F</color>
     <color name="card_highlight_bg">#07271F</color>
     <color name="card_alternate_bg">#1A3D32</color>
-</resources>
+    <color name="root_view_color">#002E22</color>
+</resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -1,7 +1,7 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
 
     <!-- App Theme for Android versions 7.1 and below -->
-    <style name="AppTheme" parent="BaseAppTheme"/>
+    <style name="AppTheme" parent="BaseAppTheme" />
 
     <!-- Base application theme. Applied to all Android versions -->
     <style name="BaseAppTheme" parent="Theme.AppCompat.NoActionBar">
@@ -12,6 +12,8 @@
         <item name="popupTheme">@style/AppTheme.Popup</item>
         <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
         <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
+        <item name="android:windowBackground">@color/root_view_color</item>
+        <item name="android:windowIsTranslucent">true</item>
     </style>
 
     <!-- Themes used by the Picker -->
@@ -53,14 +55,12 @@
     </style>
 
     <style name="Theme.SplashScreen" parent="Theme.SplashScreen.Common">
-        <item name="windowSplashScreenAnimatedIcon">@android:drawable/sym_def_app_icon</item>
         <item name="windowSplashScreenBackground">?android:colorBackground</item>
     </style>
 
     <style name="BootTheme" parent="Theme.SplashScreen">
         <item name="android:statusBarColor">@android:color/transparent</item>
-        <item name="windowSplashScreenAnimatedIcon">@drawable/bootsplash_logo</item>
         <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
     </style>
 
-</resources>
+</resources>
diff --git a/assets/videos/native/Expensify_Sonic_Full_Nonvocal.mp4 b/assets/videos/native/Expensify_Sonic_Full_Nonvocal.mp4
diff --git a/assets/videos/native/Expensify_Sonic_Full_Vocal.mp4 b/assets/videos/native/Expensify_Sonic_Full_Vocal.mp4
diff --git a/assets/videos/native/Expensify_Sonic_Minimal_Nonvocal.mp4 b/assets/videos/native/Expensify_Sonic_Minimal_Nonvocal.mp4
diff --git a/assets/videos/native/Expensify_Sonic_Minimal_Vocal.mp4 b/assets/videos/native/Expensify_Sonic_Minimal_Vocal.mp4
diff --git a/assets/videos/web/Expensify_Sonic_Full_Nonvocal.webm b/assets/videos/web/Expensify_Sonic_Full_Nonvocal.webm
diff --git a/assets/videos/web/Expensify_Sonic_Full_Vocal.webm b/assets/videos/web/Expensify_Sonic_Full_Vocal.webm
diff --git a/assets/videos/web/Expensify_Sonic_Minimal_Nonvocal.webm b/assets/videos/web/Expensify_Sonic_Minimal_Nonvocal.webm
diff --git a/assets/videos/web/Expensify_Sonic_Minimal_Vocal.webm b/assets/videos/web/Expensify_Sonic_Minimal_Vocal.webm
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -88,6 +88,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 {from: 'web/manifest.json'},
                 {from: 'assets/css', to: 'css'},
                 {from: 'assets/fonts/web', to: 'fonts'},
+                {from: 'assets/videos/web', to: 'videos'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/TextLayer.css', to: 'css/TextLayer.css'},
                 {from: 'assets/images/shadow.png', to: 'images/shadow.png'},
@@ -181,6 +182,11 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 resourceQuery: /raw/,
                 type: 'asset/source',
             },
+            // Load mp4 videos
+            {
+                test: /\.mp4$/,
+                use: 'file-loader?name=videos/[name].[ext]',
+            },
             {
                 test: /\.lottie$/,
                 type: 'asset/resource',
@@ -191,7 +197,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         alias: {
             'react-native-config': 'react-web-config',
             'react-native$': 'react-native-web',
-
             // Module alias for web & desktop
             // https://webpack.js.org/configuration/resolve/#resolvealias
             '@assets': path.resolve(__dirname, '../../assets'),
@@ -216,6 +221,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'process/browser': require.resolve('process/browser'),
         },
     },
+
     optimization: {
         runtimeChunk: 'single',
         splitChunks: {

diff --git a/ios/NewExpensify/AppDelegate.mm b/ios/NewExpensify/AppDelegate.mm
@@ -31,9 +31,9 @@ - (BOOL)application:(UIApplication *)application
   [[RCTI18nUtil sharedInstance] forceRTL:NO];
 
   [super application:application didFinishLaunchingWithOptions:launchOptions];
-
-  [RCTBootSplash initWithStoryboard:@"BootSplash"
-                           rootView:(RCTRootView *)self.window.rootViewController.view]; // <- initialization using the storyboard file name
+  self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.00000 green:0.18039 blue:0.13333 alpha:1.00];
+  // [RCTBootSplash initWithStoryboard:@"BootSplash"
+  //                          rootView:(RCTRootView *)self.window.rootViewController.view]; // <- initialization using the storyboard file name
 
   // Define UNUserNotificationCenter
   UNUserNotificationCenter *center =

diff --git a/ios/NewExpensify/BootSplash.storyboard b/ios/NewExpensify/BootSplash.storyboard
@@ -1,45 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
-    <device id="retina4_7" orientation="portrait" appearance="light"/>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0"
+    toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none"
+    useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES"
+    colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light" />
     <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
-        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
-        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+        <deployment identifier="iOS" />
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505" />
+        <capability name="Safe area layout guides" minToolsVersion="9.0" />
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0" />
     </dependencies>
     <scenes>
-        <!--View Controller-->
+        <!--View
+        Controller-->
         <scene sceneID="EHf-IW-A2E">
             <objects>
                 <viewController id="01J-lp-oVM" sceneMemberID="viewController">
-                    <view key="view" autoresizesSubviews="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="Ze5-6b-2t3">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
-                        <autoresizingMask key="autoresizingMask"/>
-                        <subviews>
-                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
-                                <rect key="frame" x="137.5" y="283.5" width="100" height="100"/>
-                                <accessibility key="accessibilityConfiguration">
-                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
-                                </accessibility>
-                            </imageView>
-                        </subviews>
-                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
-                        <color key="backgroundColor" red="0.0117647058823529" green="0.831372549019608" blue="0.486274509803922" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                    <view key="view" autoresizesSubviews="NO" userInteractionEnabled="NO"
+                        contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667" />
+                        <autoresizingMask key="autoresizingMask" />
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS" />
+                        <color key="backgroundColor" red="0.00000" green="0.18039" blue="0.13333"
+                            alpha="1" colorSpace="custom" customColorSpace="sRGB" />
                         <accessibility key="accessibilityConfiguration">
-                            <accessibilityTraits key="traits" notEnabled="YES"/>
+                            <accessibilityTraits key="traits" notEnabled="YES" />
                         </accessibility>
                         <constraints>
-                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
-                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI"/>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX"
+                                secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT" />
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY"
+                                secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI" />
                         </constraints>
                     </view>
                 </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1"
+                    userLabel="First Responder" sceneMemberID="firstResponder" />
             </objects>
-            <point key="canvasLocation" x="0.0" y="0.0"/>
+            <point key="canvasLocation" x="0.0" y="0.0" />
         </scene>
     </scenes>
-    <resources>
-        <image name="BootSplashLogo" width="100" height="100"/>
-    </resources>
-</document>
+</document>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -604,6 +604,11 @@ PODS:
     - RCTTypeSafety
     - React-Core
     - ReactCommon/turbomodule/core
+  - react-native-video (5.2.1):
+    - React-Core
+    - react-native-video/Video (= 5.2.1)
+  - react-native-video/Video (5.2.1):
+    - React-Core
   - react-native-view-shot (3.6.0):
     - React-Core
   - react-native-webview (11.23.0):
@@ -894,6 +899,7 @@ DEPENDENCIES:
   - react-native-quick-sqlite (from `../node_modules/react-native-quick-sqlite`)
   - react-native-render-html (from `../node_modules/react-native-render-html`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-video (from `../node_modules/react-native-video`)
   - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1072,6 +1078,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-render-html"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-video:
+    :path: "../node_modules/react-native-video"
   react-native-view-shot:
     :path: "../node_modules/react-native-view-shot"
   react-native-webview:
@@ -1242,6 +1250,7 @@ SPEC CHECKSUMS:
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
   react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
+  react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
   react-native-view-shot: 705f999ac2a24e4e6c909c0ca65c732ed33ca2ff
   react-native-webview: e771bc375f789ebfa02a26939a57dbc6fa897336
   React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f