blurview on ios

src/view/com/lightbox/ImageViewing/components/PlatformBackground.ios.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {BlurView} from 'expo-blur'
+
+import {ViewStyleProp} from '#/alf'
+
+export function PlatformBackground({
+  children,
+  style,
+}: ViewStyleProp & {children: React.ReactNode}) {
+  return (
+    <BlurView tint="systemThickMaterialDark" intensity={75} style={style}>
+      {children}
+    </BlurView>
+  )
+}

src/view/com/lightbox/ImageViewing/components/PlatformBackground.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {ViewStyleProp} from '#/alf'
+
+/**
+ * Provides a view with a semi-transparent on Android/web, and a BlurView on iOS.
+ */
+export function PlatformBackground({
+  children,
+  style,
+}: ViewStyleProp & {children: React.ReactNode}) {
+  return <View style={[{backgroundColor: '#000d'}, style]}>{children}</View>
+}

src/view/com/lightbox/ImageViewing/index.tsx

@@ -49,6 +49,7 @@ import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
 import {ImageSource, Transform} from './@types'
 import ImageDefaultHeader from './components/ImageDefaultHeader'
 import ImageItem from './components/ImageItem/ImageItem'
+import {PlatformBackground} from './components/PlatformBackground'
 
 type Rect = {x: number; y: number; width: number; height: number}
 
@@ -504,7 +505,8 @@ function LightboxFooter({
         a.w_full,
         a.absolute,
         a.bottom_0,
-        {backgroundColor: '#000d'},
+        a.overflow_hidden,
+        {borderTopLeftRadius: 8, borderTopRightRadius: 8},
       ]}
       scrollEnabled={isAltExpanded}
       onMomentumScrollBegin={() => {
@@ -512,11 +514,13 @@ function LightboxFooter({
       }}
       onMomentumScrollEnd={() => {
         isMomentumScrolling.current = false
-      }}
-      contentContainerStyle={[a.py_md, a.px_2xl]}>
+      }}>
+      <PlatformBackground style={[a.py_md, a.px_2xl]}>
         <SafeAreaView edges={['bottom']}>
           {altText ? (
-          <View accessibilityRole="button" style={[isIOS ? a.pb_xl : a.pb_lg]}>
+            <View
+              accessibilityRole="button"
+              style={[isIOS ? a.pb_xl : a.pb_lg]}>
               <Text
                 style={[t.atoms.text_contrast_high]}
                 numberOfLines={isAltExpanded ? undefined : 3}
@@ -563,6 +567,7 @@ function LightboxFooter({
             </View>
           </ThemeProvider>
         </SafeAreaView>
+      </PlatformBackground>
     </ScrollView>
   )
 }