Question 199889 in React native Question posted in
The official React Native documentation can be found here.

React native – Unable to apply blur to a linear gradient

I am trying to create a card that looks like this (https://codepen.io/hemvi/pen/RwqgMew) in react native:

enter image description here

Here’s my attempt to recreate the same in react native:

import {BlurView} from '@react-native-community/blur';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const sytles = StyleSheet.create({
  cardContainer: {
    color: 'white',
    backgroundColor: 'black',
    position: 'relative',
    borderRadius: 20,
    padding: 5,
  },
  cardContent: {
    color: 'white',
    padding: 10,
  },
  gradientStyle: {
    position: 'absolute',
    top: -5,
    left: -5,
    right: -5,
    bottom: -5,
    zIndex: -1,
  },
});

export function MyCard() {
  return (
    <View style={sytles.cardContainer}>
      <View style={{borderRadius: 20, backgroundColor: 'black'}}>
        <Text style={sytles.cardContent}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          feugiat facilisis ante, eu cursus massa facilisis sit amet. Sed
          ullamcorper massa vitae est volutpat, in dapibus elit suscipit. Mauris
          ex augue, accumsan ut dui in, finibus varius enim. Quisque ullamcorper
          odio at tincidunt scelt dolor vel mauris congue vestibulum. Nulla
          accumsan urna elementum ullamcorper ornare. Aenean eu rhoncus justo,
          sed viverra diam. Donec ut posuere mi, non fermentum nisl. In at dui
          vel erat semper porta. Donec mollis ultricies metus et tempus.
        </Text>
      </View>
      <View style={sytles.gradientStyle}>
        <LinearGradient
          style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}
          useAngle={true}
          angle={90}
          locations={[0, 0.5, 1]}
          colors={['rgba(0,188,212,1)', 'rgba(6,12,33,1)', 'rgba(0,188,212,1)']}
        />
        <BlurView
          overlayColor="transparent"
          blurType="xlight"
          blurAmount={20}
          blurRadius={15}
        />
      </View>
    </View>
  );
}

The blur doesn’t seem to apply properly to the linear gradient like it does in web CSS, also note that I am only testing this on an Android device and I don’t know how it looks in iOS.

Android Device output

enter image description here

Tags:

2

Answers


  1. 0

    react-native-linear-gradient and @react-native-community/blur may not be compatible.

    One possible solution is to use a library like react-native-image-filter-kit, which provides various image filters and effects, including blur. You can use the BlurFilter component to apply a blur effect to an image or another component.

    To use react-native-image-filter-kit:

    npm install react-native-image-filter-kit
react-native link react-native-image-filter-kit

    Then:

    import { BlurFilter } from 'react-native-image-filter-kit';

<View style={styles.cardContainer}>
  ...
  <View style={styles.gradientStyle}>
    <LinearGradient
      style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
      colors={["rgba(0,188,212,1)", "rgba(6,12,33,1)", "rgba(0,188,212,1)"]}
      useAngle={true}
      angle={90}
      locations={[0, 0.5, 1]}
    />
    <BlurFilter image={<LinearGradient />} blurRadius={15} />
  </View>
</View>
    Login or Signup to reply.
  2. 0

    I can see two potential solutions.

    1. The z-index of the Blur View does not appear to be set. In order for the blur view to actually blur something, it must be positioned on top of the item. By default, the z-index of an element is 0.Try changing BlurView to this:
    <BlurView
      overlayColor="transparent"
      blurType="xlight"
      blurAmount={20}
      blurRadius={15}
      style={{zIndex: 10}}
/>
    1. What happens if you change the overlay color to something besides transparent?

    Extra note:
    It has been a while since I wrote React Native but if I remember correctly, the order of the components actually makes a difference behind the scenes for what is rendered in the virtual dom.

    You can try moving the Blur View component to before the LinearGradient component in your code to see if that changes anything.

    Example:

    <View style={sytles.gradientStyle}>
       <BlurView
          overlayColor="transparent"
          blurType="xlight"
          blurAmount={20}
          blurRadius={15}
        />
        <LinearGradient
          style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}
          useAngle={true}
          angle={90}
          locations={[0, 0.5, 1]}
          colors={['rgba(0,188,212,1)', 'rgba(6,12,33,1)','rgba(0,188,212,1)']}
        />
 </View>

    Finally, I noticed in your code that you misspelled "styles". Even though it doesn’t actually make a difference in this case, make sure you are more careful in the future. I have had thousands of lines of code break because of a typo or misplaced comma.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search