react-native-blur icon indicating copy to clipboard operation
react-native-blur copied to clipboard

Example doesn't work on IOS

Open dentep opened this issue 3 years ago • 4 comments

Using the example:

<SafeAreaView style={styles.container}>
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      <Text>
        I'm the non blurred text because I got rendered on top of the BlurView
      </Text>
    </SafeAreaView>

css:

  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

The blurred text doesn't show on IOS and for some reason yellow background appears on IOS. Edit: the <Text> that is above the blurred view is not showing at all...

dentep avatar Aug 06 '21 07:08 dentep

@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.

Champkinz avatar Nov 16 '21 08:11 Champkinz

@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.

@Champkinz ye, it looks like this: Screenshot 2021-11-22 at 14 48 06

ghiculescualexandru avatar Nov 22 '21 12:11 ghiculescualexandru

@dentep Can you provide a screenshot, i came across an issue like this as well, just wanted to see if you have the same issue so i can give you an answer.

@Champkinz ye, it looks like this: Screenshot 2021-11-22 at 14 48 06

position: "absolute", top: 0, bottom: 0, left: 0, right: 0, borderRadius: 20,

This is my styling for the blur view, your code seems fine.

Champkinz avatar Nov 29 '21 12:11 Champkinz

+1

alirehmanappcrates avatar Jul 26 '22 12:07 alirehmanappcrates