Update boot-splash and explore headers theme

packages/mobile/README.md

@@ -4,6 +4,20 @@ The Audius React Native mobile client
 
 ## Setup
 
+### Bootsplash (launch screen)
+
+The native splash screen uses [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash). To regenerate assets after changing the logo or background color (e.g. to match theme in `@audius/harmony`):
+
+```bash
+# Default [Neue] theme: light #F6F5F7, dark is set in values-night (Android) and Colors.xcassets (iOS)
+npx react-native-bootsplash generate src/assets/images/bootsplash_logo.png \
+  --background '#F6F5F7' \
+  --platforms ios,android \
+  --assets-output assets/bootsplash
+```
+
+This updates Android `res/values/colors.xml`, iOS `BootSplash.storyboard`, and `Colors.xcassets` / `Images.xcassets`. After regenerating, do a clean build and reinstall the app so the cached launch screen is replaced.
+
 ## Running iOS
 
 ```bash

packages/mobile/android/app/src/main/res/values-night/colors.xml

@@ -1,4 +1,5 @@
 <resources>
-    <color name="bootsplash_background">#353A51</color>
-    <color name="colorPrimary">#C74BD3</color>
+    <!-- Default [Neue] theme - dark -->
+    <color name="bootsplash_background">#000000</color>
+    <color name="colorPrimary">#806AD8</color>
 </resources>

packages/mobile/android/app/src/main/res/values-v27/styles.xml

@@ -3,7 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#7E1BCC</item>
+        <item name="android:textColor">#7F6AD6</item>
 
         <!-- Set system bars background transparent -->
         <item name="android:statusBarColor">@android:color/transparent</item>

packages/mobile/android/app/src/main/res/values/colors.xml

@@ -1,4 +1,4 @@
 <resources>
-    <color name="bootsplash_background">#f7f7f8</color>
-    <color name="colorPrimary">#CC0FE0</color>
+    <color name="bootsplash_background">#f6f5f7</color>
+    <color name="colorPrimary">#7F6AD6</color>
 </resources>

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

@@ -2,7 +2,7 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:textColor">#7E1BCC</item>
+        <item name="android:textColor">#7F6AD6</item>
 
         <!-- Set status bar background transparent -->
         <item name="android:statusBarColor">@android:color/transparent</item>

packages/mobile/assets/bootsplash/manifest.json

@@ -0,0 +1,7 @@
+{
+  "background": "#f6f5f7",
+  "logo": {
+    "width": 100,
+    "height": 100
+  }
+}

packages/mobile/ios/AudiusReactNative/BootSplash.storyboard

@@ -17,15 +17,15 @@
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo-ee25c4" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
-                                <rect key="frame" x="131.5" y="277.5" width="112" height="112"/>
+                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo-c87469" 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" name="BootSplashBackground-ee25c4"/>
+                        <color key="backgroundColor" name="BootSplashBackground-c87469"/>
                         <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"/>
@@ -38,9 +38,9 @@
         </scene>
     </scenes>
     <resources>
-        <image name="BootSplashLogo-ee25c4" width="112" height="112"/>
-        <namedColor name="BootSplashBackground-ee25c4">
-            <color red="0.968627450980392" green="0.968627450980392" blue="0.972549019607843" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        <image name="BootSplashLogo-c87469" width="100" height="100"/>
+        <namedColor name="BootSplashBackground-c87469">
+            <color red="0.964705882352941" green="0.960784313725490" blue="0.968627450980392" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
     </resources>
 </document>

packages/mobile/ios/AudiusReactNative/Colors.xcassets/BootSplashBackground-ee25c4.colorset/Contents.json → packages/mobile/ios/AudiusReactNative/Colors.xcassets/BootSplashBackground-c87469.colorset/Contents.json

@@ -5,9 +5,9 @@
       "color": {
         "color-space": "srgb",
         "components": {
-          "blue": "0.972549019607843",
-          "green": "0.968627450980392",
-          "red": "0.968627450980392",
+          "red": "0.964705882352941",
+          "green": "0.960784313725490",
+          "blue": "0.968627450980392",
           "alpha": "1.000"
         }
       }
@@ -23,9 +23,9 @@
       "color": {
         "color-space": "srgb",
         "components": {
-          "red": "0.208",
-          "green": "0.227",
-          "blue": "0.318",
+          "red": "0.000",
+          "green": "0.000",
+          "blue": "0.000",
           "alpha": "1.000"
         }
       }

packages/mobile/ios/AudiusReactNative/Images.xcassets/BootSplashLogo-c87469.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "logo-c87469.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "logo-c87469@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "logo-c87469@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

packages/mobile/src/screens/explore-screen/SearchExploreScreen.tsx

@@ -1,22 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 
-import { useFeatureFlag } from '@audius/common/hooks'
-import { FeatureFlags } from '@audius/common/services'
-import { Platform } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from 'react-native-reanimated'
 
-import { useTheme } from '@audius/harmony-native'
 import { Screen, ScreenContent } from 'app/components/core'
 import { useScrollToTop } from 'app/hooks/useScrollToTop'
-import { useStatusBarStyle } from 'app/hooks/useStatusBarStyle'
 
 import { SearchResults } from '../search-screen/search-results/SearchResults'
 import {
@@ -31,43 +18,18 @@ import { ExploreContent } from './components/ExploreContent'
 import { SearchExploreHeader } from './components/SearchExploreHeader'
 import { useExploreRoute } from './hooks'
 
-const AnimatedIOScrollView = Animated.createAnimatedComponent(IOScrollView)
-
-// Animation parameters
-const HEADER_SLIDE_HEIGHT = 46
-const FILTER_SCROLL_THRESHOLD = 300
-export const SCROLL_FACTOR = Platform.OS === 'ios' ? 1 : 3
-
 const SearchExploreContent = () => {
-  const { spacing, motion } = useTheme()
   const { params } = useExploreRoute<'SearchExplore'>()
-
-  // Set status bar to light content for dark header
-  useStatusBarStyle('light-content')
-
-  // Get state from context
+  const scrollRef = useRef<any>(null)
   const [, setCategory] = useSearchCategory()
   const [filters, setFilters] = useSearchFilters()
   const [query, setQuery] = useSearchQuery()
   const [, setAutoFocus] = useSearchAutoFocus()
-  // Animation state
-  const scrollY = useSharedValue(0)
-  const filterTranslateY = useSharedValue(0)
-  const prevScrollY = useSharedValue(0)
-  const scrollDirection = useSharedValue<'up' | 'down'>('down')
-  const scrollRef = useRef<Animated.ScrollView>(null)
 
-  // Feature flag for collapsed header
-  const { isEnabled: isCollapsedHeaderEnabled } = useFeatureFlag(
-    FeatureFlags.COLLAPSED_EXPLORE_HEADER
-  )
-
-  // Derived data
   const hasAnyFilter = Object.values(filters).some(
     (value) => value !== undefined
   )
 
-  // Sync route params into search state when they change (e.g. in-app URL navigation)
   useEffect(() => {
     if (params?.category) setCategory(params.category)
     if (params?.filters) setFilters(params.filters)
@@ -76,97 +38,29 @@ const SearchExploreContent = () => {
   }, [params, setCategory, setFilters, setQuery, setAutoFocus])
 
   useScrollToTop(() => {
-    scrollRef.current?.scrollTo({
-      y: 0,
-      animated: false
-    })
+    scrollRef.current?.scrollTo?.({ y: 0, animated: false })
     setQuery('')
     setCategory('all')
     setFilters({})
   })
 
   useEffect(() => {
     if (query.length <= 1) {
-      // Reset scroll on new or empty queries
       scrollRef.current?.scrollTo?.({ y: 0, animated: false })
     }
   })
 
-  // Animations
-  const contentPaddingStyle = useAnimatedStyle(() => {
-    // Clamped scroll prevents jitter
-    return {
-      paddingTop:
-        query || params?.autoFocus
-          ? withTiming(-HEADER_SLIDE_HEIGHT, motion.calm)
-          : interpolate(
-              scrollY.value,
-              [0, 80 * SCROLL_FACTOR],
-              [0, 80],
-              Extrapolation.CLAMP
-            )
-    }
-  })
-
-  const scrollHandler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      const y = event.contentOffset.y
-      const contentHeight = event.contentSize.height
-      const layoutHeight = event.layoutMeasurement.height
-      const isAtBottom = y + layoutHeight >= contentHeight
-      const canScroll = contentHeight > layoutHeight
-
-      // Only apply scroll animations if there's enough content to scroll
-      // fixes jitter when content is small
-      if (!canScroll) {
-        scrollY.value = 0
-        return
-      }
-
-      // Only update scroll direction if we're not at the bottom
-      // to prevent bounce from interfering
-      if (!isAtBottom) {
-        if (y > prevScrollY.value) {
-          scrollDirection.value = 'down'
-        } else if (y < prevScrollY.value) {
-          scrollDirection.value = 'up'
-        }
-      }
-      prevScrollY.value = y
-      scrollY.value = y
-
-      // Handle filter animation
-      if (y > FILTER_SCROLL_THRESHOLD && scrollDirection.value === 'down') {
-        filterTranslateY.value = withTiming(-spacing['4xl'], motion.calm)
-      } else if (
-        y < FILTER_SCROLL_THRESHOLD ||
-        scrollDirection.value === 'up'
-      ) {
-        filterTranslateY.value = withTiming(0, motion.calm)
-      }
-    }
-  })
-
   const showSearch = Boolean(query || hasAnyFilter)
+
   return (
     <ScreenContent>
-      <SearchExploreHeader
-        scrollY={scrollY}
-        filterTranslateY={filterTranslateY}
-        scrollRef={scrollRef}
-      />
+      <SearchExploreHeader scrollRef={scrollRef} />
       {showSearch ? (
         <SearchResults />
       ) : (
-        <AnimatedIOScrollView
-          ref={scrollRef}
-          onScroll={scrollHandler}
-          scrollEventThrottle={16}
-          style={isCollapsedHeaderEnabled ? undefined : contentPaddingStyle}
-          showsVerticalScrollIndicator={false}
-        >
+        <IOScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
           <ExploreContent />
-        </AnimatedIOScrollView>
+        </IOScrollView>
       )}
     </ScreenContent>
   )