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,57 +514,60 @@ function LightboxFooter({
       }}
       onMomentumScrollEnd={() => {
         isMomentumScrolling.current = false
-      }}
+      }}>
-      contentContainerStyle={[a.py_md, a.px_2xl]}>
+      <PlatformBackground style={[a.py_md, a.px_2xl]}>
-      <SafeAreaView edges={['bottom']}>
+        <SafeAreaView edges={['bottom']}>
-        {altText ? (
+          {altText ? (
-          <View accessibilityRole="button" style={[isIOS ? a.pb_xl : a.pb_lg]}>
+            <View
-            <Text
+              accessibilityRole="button"
-              style={[t.atoms.text_contrast_high]}
+              style={[isIOS ? a.pb_xl : a.pb_lg]}>
-              numberOfLines={isAltExpanded ? undefined : 3}
+              <Text
-              selectable
+                style={[t.atoms.text_contrast_high]}
-              onPress={() => {
+                numberOfLines={isAltExpanded ? undefined : 3}
-                if (isMomentumScrolling.current) {
+                selectable
-                  return
+                onPress={() => {
-                }
+                  if (isMomentumScrolling.current) {
-                LayoutAnimation.configureNext({
+                    return
-                  duration: 450,
+                  }
-                  update: {type: 'spring', springDamping: 1},
+                  LayoutAnimation.configureNext({
-                })
+                    duration: 450,
-                toggleAltExpanded()
+                    update: {type: 'spring', springDamping: 1},
-              }}
+                  })
-              onLongPress={() => {}}>
+                  toggleAltExpanded()
-              {altText}
+                }}
-            </Text>
+                onLongPress={() => {}}>
-          </View>
+                {altText}
-        ) : null}
+              </Text>
-        <ThemeProvider theme="light">
+            </View>
-          <View style={[a.w_full, a.flex_row, a.justify_center, a.gap_sm]}>
+          ) : null}
-            <Button
+          <ThemeProvider theme="light">
-              label={_(msg`Save`)}
+            <View style={[a.w_full, a.flex_row, a.justify_center, a.gap_sm]}>
-              color="secondary_inverted"
+              <Button
-              variant="solid"
+                label={_(msg`Save`)}
-              size="small"
+                color="secondary_inverted"
-              onPress={() => onPressSave(uri)}>
+                variant="solid"
-              <ButtonIcon icon={SaveIcon} />
+                size="small"
-              <ButtonText>
+                onPress={() => onPressSave(uri)}>
-                <Trans context="action">Save</Trans>
+                <ButtonIcon icon={SaveIcon} />
-              </ButtonText>
+                <ButtonText>
-            </Button>
+                  <Trans context="action">Save</Trans>
-            <Button
+                </ButtonText>
-              label={_(msg`Share`)}
+              </Button>
-              color="secondary_inverted"
+              <Button
-              variant="solid"
+                label={_(msg`Share`)}
-              size="small"
+                color="secondary_inverted"
-              onPress={() => onPressShare(uri)}>
+                variant="solid"
-              <ButtonIcon icon={ShareIcon} />
+                size="small"
-              <ButtonText>
+                onPress={() => onPressShare(uri)}>
-                <Trans context="action">Share</Trans>
+                <ButtonIcon icon={ShareIcon} />
-              </ButtonText>
+                <ButtonText>
-            </Button>
+                  <Trans context="action">Share</Trans>
-          </View>
+                </ButtonText>
-        </ThemeProvider>
+              </Button>
-      </SafeAreaView>
+            </View>
+          </ThemeProvider>
+        </SafeAreaView>
+      </PlatformBackground>
     </ScrollView>
   )
 }