more opaque on android
This commit is contained in:
@@ -0,0 +1 @@
|
|||||||
|
alt-blur@3076a2b5a593b0d7b37198b5aebfe3a222afd52d
|
||||||
@@ -10,7 +10,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|||||||
import {BlurView} from 'expo-blur'
|
import {BlurView} from 'expo-blur'
|
||||||
import {useLingui} from '@lingui/react/macro'
|
import {useLingui} from '@lingui/react/macro'
|
||||||
|
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
import {atoms as a, platform, useTheme} from '#/alf'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -38,7 +38,19 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
|
|||||||
{paddingBottom: insets.bottom + 8},
|
{paddingBottom: insets.bottom + 8},
|
||||||
]}>
|
]}>
|
||||||
<View style={[a.mx_md, styles.altWrap]}>
|
<View style={[a.mx_md, styles.altWrap]}>
|
||||||
<BlurView intensity={16} tint="dark" style={styles.altBlur}>
|
<BlurView
|
||||||
|
intensity={16}
|
||||||
|
tint="dark"
|
||||||
|
style={[
|
||||||
|
// Tint kept over the blur so dense, text-heavy images stay
|
||||||
|
// readable. On Android the blur falls back to a flat overlay, so
|
||||||
|
// bump the opacity to keep the contrast the real blur provides
|
||||||
|
// elsewhere.
|
||||||
|
platform({
|
||||||
|
ios: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
|
||||||
|
android: {backgroundColor: 'rgba(0, 0, 0, 0.7)'},
|
||||||
|
}),
|
||||||
|
]}>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
scrollEnabled={isAltExpanded}
|
scrollEnabled={isAltExpanded}
|
||||||
onMomentumScrollBegin={() => {
|
onMomentumScrollBegin={() => {
|
||||||
@@ -80,9 +92,4 @@ const styles = StyleSheet.create({
|
|||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
altBlur: {
|
|
||||||
// Tint kept over the blur so dense, text-heavy images stay readable,
|
|
||||||
// including on Android where the blur falls back to a flat overlay.
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user