search

Kureev / react-native-blur

React Native Blur component
MIT License
3.78k stars 558 forks source link

Not work on react-native-maps for Android #482

Open nicolasdevienne opened 2 years ago

nicolasdevienne commented 2 years ago

Summary

@react-native-community/blur not works on Android :

Screenshot_1658939028

Whereas it works on iOS :

Simulator Screen Shot - iPhone 13 mini - 2022-07-27 at 18 23 46

Reproducible sample code

<View style={{ flex: 1 }}>
<MapView style={StyleSheet.absoluteFill} />
<BlurView style={StyleSheet.absoluteFill} />
</View>

Steps to reproduce

Simple copy/past the code and run in emulator

Expected result

Map blurred like on iOS

Actual result

Map is not blurred

React Native Maps Version

1.1.0

What platforms are you seeing the problem on?

Android

React Native Version

0.66.4

What version of Expo are you using?

Not using Expo

Device(s)

Pixel 5

Additional information

Version of @react-native-community/blur is the last : 4.1.0

exoriri commented 2 years ago

Seems there are bugs on android with position: absolute in <BlurView />. Related to this issue https://github.com/Kureev/react-native-blur/issues/483

shawn10067 commented 2 years ago

Same here

ArnabXD commented 2 years ago

Seems there are bugs on android with position: absolute in <BlurView />. Related to this issue #483

I think this is not the case. Inside same view these two behaves differently

// Doesn't blur, only adds an alpha
<MapView
    mapType={'standard'}
    style={StyleSheet.absoluteFill}
    userInterfaceStyle={'dark'}
    initialRegion={{
        latitude: 20.646201934797862,
        latitudeDelta: 66.42422647230924,
        longitude: -85.31906712412702,
        longitudeDelta: 43.3273031470187,
    }}
/>
// Blur works as expected
<ImageBackground
  source={{uri: 'https://picsum.photos/640/360'}}
  style={StyleSheet.absoluteFill}
  resizeMode={'cover'}
/>
karel-suchomel-ed commented 1 year ago

Having the same problem. Components outside MapView are getting blurred, but MapView itself not.

image
EvanYung commented 1 year ago

I solved it by creating a webView...

import * as React from 'react'
import { WebViewProps } from 'react-native-webview'

import { View, WebView } from './view'

function getHtmlStr(blur = 10) {
  return `<body style="margin: 0;">
        <div style="height: 100vh; width: 100vw; backdrop-filter: blur(${blur}px);"></div>
      </body>`
}

export const BlurWebview = ({
  className,
  blurAmount,
  children,
  ...props
}: WebViewProps & { blurAmount?: number }) => {
  return (
    <View className={className}>
      <WebView
        className="absolute h-full w-full bg-transparent"
        {...props}
        source={{ html: getHtmlStr(blurAmount) }}
      />
      {children}
    </View>
  )
}