Fix to blurviews

src/view/com/util/BlurView.web.tsx

@@ -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
+type BlurViewProps = ViewProps & {
-export const BlurBiew = View
+  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',
+  },
+})

src/view/com/util/ViewHeader.tsx

@@ -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>
   )
 })
 

src/view/com/util/ViewSelector.tsx

@@ -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'

src/view/com/util/Views.web.tsx

@@ -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%',

src/view/lib/addStyle.ts

@@ -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]
+}

src/view/screens/Profile.tsx

@@ -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>