Only blur what's actually behind the blurview

[Vashiru]

I just noticed that react-native-blur-view handles blurring a little differently than @react-native-community/blur. Specifically it doesn't seem to constrain the blur to what's actually behind it, but it will also include what's in front of it. Resulting in undesired halos.

Demonstration:

@danielsaraldi/react-native-blur-view:

@react-native-community/blur:

As you can tell from the first picture, there's white ghosting around the text, where there's none in the second picture.

Because I only want to blur the background image, rather than the entire view, I have my code set up as follows (irrelevant bits stripped):

 <ImageBackground source={artwork} style={{ minHeight: "100%" }}>
  <BlurView style={styles.backgroundBlur} type={"dark"} radius={10} />
  <SafeAreaView
    edges={["top", "bottom"]}
    style={styles.container}
  >
    <View style={ styles.artworkContainer }>
      <Artwork
        artwork={artwork}
        showInfoUrl={showInfoUrl}
        nowPlaying={nowPlaying}
        trackTitle={trackTitle}
      />
    </View>

    <View key={nowPlaying?.url} style={styles.infoContainer}>
      <View
        style={
          style.songInfoContainer
        }
      >
        <View style={[styles.songInfo]}>
          <StyledText
            numberOfLines={1}
            allowFontScaling={false}
            style={styles.songTitle}
            fontFamily="Poppins-Bold"
          >
            {trackTitle.toUpperCase()}
          </StyledText>
          {trackArtist && (
            <StyledText
              numberOfLines={1}
              allowFontScaling={false}
              style={styles.songArtist}
            >
              {trackArtist}
            </StyledText>
          )}
        </View>
      </View>
    </View>
  </SafeAreaView>
</ImageBackground>

styles.backgroundBlur: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    zIndex: 1,
  }

styles.container: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.2)',
    zIndex: 2,
}

[DanielAraldi]

Interesting, I'll take a look at that. I'm not sure if it's necessarily a problem, but I think I can add a parameter to the component to handle it according to the developer's preference.

Is this issue happening on iOS or Android?

[DanielAraldi]

I'm glad the community one still works for you. I was worried because I really thought it wasn't, haha.

I'll work to make this package as stable as possible. I notice a serious lack of this type of library in the React Native ecosystem, which is why I built this one.

I might contact you on Telegram in the future to ask for more information. Thanks for getting in touch!

[DanielAraldi]

I just fixed the problem. Please check if it's working. If you have any problems, just get in touch. The new version is 0.6.1.

[Vashiru]

@DanielAraldi Thanks for the fast turn-around. Just checked Android in Debug mode => Building issue is resolved, so are the halos (it now only blurs what's behind the object). Much better!

It's still not rendering anything for me on iOS 18.1 (I can't test in 18.4 due to a bug with that and Xcode 16.3: https://mastodon.social/@twostraws/114261602978817975 which causes network requests to fail like 99.9% of the time), but I'll create a separate issue for that to keep things separated.

[DanielAraldi]

Okay, I'll check this issue in the future on iOS 18.1; there must be some very specific setting for that version.

Thanks for the feedback, and I'm glad the build on Android worked :D

[Vashiru]

Okay, I'll check this issue in the future on iOS 18.1; there must be some very specific setting for that version.

Thanks for the feedback, and I'm glad the build on Android worked :D

Check my new issue #4, I found out what the issue is ;)