diff --git a/src/view/com/lightbox/ImageViewing/components/PlatformBackground.ios.tsx b/src/view/com/lightbox/ImageViewing/components/PlatformBackground.ios.tsx
new file mode 100644
index 0000000000..b9deeff055
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ )
+}
diff --git a/src/view/com/lightbox/ImageViewing/components/PlatformBackground.tsx b/src/view/com/lightbox/ImageViewing/components/PlatformBackground.tsx
new file mode 100644
index 0000000000..aa8bfcc30c
--- /dev/null
+++ b/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 {children}
+}
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 9ca4101e4d..cbc75fe932 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/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,57 +514,60 @@ function LightboxFooter({
}}
onMomentumScrollEnd={() => {
isMomentumScrolling.current = false
- }}
- contentContainerStyle={[a.py_md, a.px_2xl]}>
-
- {altText ? (
-
- {
- if (isMomentumScrolling.current) {
- return
- }
- LayoutAnimation.configureNext({
- duration: 450,
- update: {type: 'spring', springDamping: 1},
- })
- toggleAltExpanded()
- }}
- onLongPress={() => {}}>
- {altText}
-
-
- ) : null}
-
-
-
-
-
-
-
+ }}>
+
+
+ {altText ? (
+
+ {
+ if (isMomentumScrolling.current) {
+ return
+ }
+ LayoutAnimation.configureNext({
+ duration: 450,
+ update: {type: 'spring', springDamping: 1},
+ })
+ toggleAltExpanded()
+ }}
+ onLongPress={() => {}}>
+ {altText}
+
+
+ ) : null}
+
+
+
+
+
+
+
+
)
}