Fix to blurviews

zio/stable
Paul Frazee 2023-01-26 18:15:43 -06:00
parent d04a6d7539
commit 20ccb03427
6 changed files with 55 additions and 18 deletions

View File

@ -1,4 +1,37 @@
import {View} from 'react-native'
import React from 'react'
import {StyleSheet, View, ViewProps} from 'react-native'
import {addStyle} from '../../lib/addStyle'
// TODO can actually support this, see https://github.com/Kureev/react-native-blur/issues/417
export const BlurBiew = View
type BlurViewProps = ViewProps & {
blurType?: 'dark' | 'light'
blurAmount?: number
}
export const BlurView = ({
style,
blurType,
blurAmount,
...props
}: React.PropsWithChildren<BlurViewProps>) => {
// @ts-ignore using an RNW-specific attribute here -prf
style = addStyle(style, {backdropFilter: `blur(${blurAmount || 10}px`})
if (blurType === 'dark') {
style = addStyle(style, styles.dark)
} else {
style = addStyle(style, styles.light)
}
return <View style={style} {...props} />
}
const styles = StyleSheet.create({
blur: {
// @ts-ignore using an RNW-specific attribute here -prf
backdropFilter: 'blur(5px)',
},
dark: {
backgroundColor: '#0008',
},
light: {
backgroundColor: '#fff8',
},
})

View File

@ -10,6 +10,7 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {CenteredView} from './Views'
import {UserAvatar} from './UserAvatar'
import {Text} from './text/Text'
import {MagnifyingGlassIcon} from '../../lib/icons'
@ -49,7 +50,7 @@ export const ViewHeader = observer(function ViewHeader({
canGoBack = store.nav.tab.canGoBack
}
return (
<View style={[styles.header, pal.view]}>
<CenteredView style={[styles.header, pal.view]}>
<TouchableOpacity
testID="viewHeaderBackOrMenuBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
@ -112,7 +113,7 @@ export const ViewHeader = observer(function ViewHeader({
)}
</TouchableOpacity>
) : undefined}
</View>
</CenteredView>
)
})

View File

@ -1,7 +1,8 @@
import React, {useEffect, useState} from 'react'
import {FlatList, View} from 'react-native'
import {View} from 'react-native'
import {Selector} from './Selector'
import {HorzSwipe} from './gestures/HorzSwipe'
import {FlatList} from './Views'
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
import {clamp} from '../../../lib/numbers'

View File

@ -19,10 +19,10 @@ import {
ScrollView as RNScrollView,
ScrollViewProps,
StyleSheet,
StyleProp,
View,
ViewProps,
} from 'react-native'
import {addStyle} from '../../lib/addStyle'
export function CenteredView({
style,
@ -50,16 +50,6 @@ export function ScrollView({
)
}
function addStyle<T>(
base: StyleProp<T>,
addedStyle: StyleProp<T>,
): StyleProp<T> {
if (Array.isArray(base)) {
return base.concat([addedStyle])
}
return [base, addedStyle]
}
const styles = StyleSheet.create({
container: {
width: '100%',

View File

@ -0,0 +1,11 @@
import {StyleProp} from 'react-native'
export function addStyle<T>(
base: StyleProp<T>,
addedStyle: StyleProp<T>,
): StyleProp<T> {
if (Array.isArray(base)) {
return base.concat([addedStyle])
}
return [base, addedStyle]
}

View File

@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react'
import {ActivityIndicator, StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {ViewSelector} from '../com/util/ViewSelector'
import {CenteredView} from '../com/util/Views'
import {ScreenParams} from '../routes'
import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
import {useStores} from '../../state'
@ -181,7 +182,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
onEndReached={onEndReached}
/>
) : (
renderHeader()
<CenteredView>{renderHeader()}</CenteredView>
)}
<FAB icon="pen-nib" onPress={onPressCompose} />
</View>