Web support?

[lloydwatkin]

Hi, are there any plans to support this library on the web? For example when using react native for the web?

[leidto]

The below solution works perfectly on iOS/Android/Web. (I tried expo-blur, but it was ugly on Android because of the transparent solution.)

BlurWidget.js

import React from 'react'
import { StyleSheet } from 'react-native'
import { BlurView } from '@react-native-community/blur'
import variables from 'assets/styles/variables'

const BlurWidget = () => {
  return (
    <BlurView
      style={styles.blur}
      blurType="dark"
      blurAmount={6}
      reducedTransparencyFallbackColor={variables.blurBackground}
    />
  )
}

export default BlurWidget

const styles = StyleSheet.create({
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
})

BlurWidget.web.js

import variables from 'assets/styles/variables'
import React from 'react'
import { StyleSheet, View } from 'react-native'

const BlurWidget = () => {
  return <View style={styles.blur}/>
}

export default BlurWidget

const styles = StyleSheet.create({
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backdropFilter: 'blur(5px)',
    backgroundColor: variables.modalBackground
  }
})

Modal component:

...
<Modal transparent={true} {...restProps}>
  <BlurWidget />
  <View style={computedStyle.overlay}>
    ...
  </View>
</Modal>
...

[nabilfreeman]

I've also written a simple BlurView (no VibrancyView):

import React from 'react';
import { View } from 'react-native-web';

// defaults from native library
const DEFAULT_BLUR_AMOUNT = 10;
const DEFAULT_BLUR_TYPE = 'dark';

const getBackgroundColor = (blurType) => {
	switch (blurType) {
		case 'light':
			return 'rgba(255,255,255,0.5)';
		case 'dark':
			return 'rgba(0,0,0,0.5)';
		default:
			// will just blur without any tinting.
			return 'transparent';
	}
};

const BlurView = ({ blurType = DEFAULT_BLUR_TYPE, blurAmount = DEFAULT_BLUR_AMOUNT, style }) => (
	<View style={[
		{
			backdropFilter: `blur(${blurAmount}px)`,
			backgroundColor: getBackgroundColor(blurType),
		},
		style,
	]}
	/>
);

export { BlurView };

If you are using react-app-rewired or similar to stub out native modules you can drop this straight in and import BlurView in the same way as native.

[Younext19]

@leidto that's not working for me on web any solution update for the web ?