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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React from 'react'
import {StyleSheet, View, ViewProps} from 'react-native'
import {addStyle} from 'lib/styles'

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
  let blur = `blur(${blurAmount || 10}px`
  // @ts-ignore using an RNW-specific attribute here -prf
  style = addStyle(style, {backdropFilter: blur, WebkitBackdropFilter: blur})
  if (blurType === 'dark') {
    style = addStyle(style, styles.dark)
  } else {
    style = addStyle(style, styles.light)
  }
  return <View style={style} {...props} />
}

const styles = StyleSheet.create({
  dark: {
    backgroundColor: '#0008',
  },
  light: {
    backgroundColor: '#fff8',
  },
})