Fix to blurviews
parent
d04a6d7539
commit
20ccb03427
|
@ -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',
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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%',
|
||||
|
|
|
@ -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]
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue