1，How to use it in List 2, how to use on < View/> <Text /> components

[z3season]

Question

1，How to use it in FlatList item? 2, how to use on < View/> <Text /> components ?

[Juan-Castelli]

The main example on the ReadMe should be removed altogether and changed to a View. I'm gonna take a guess and say that 90% of people coming to the readme for solutions need to blur a View and not an image. Actually anything but an image in the example would have sufficed. They picked the worst example to display IMO.

[Psiiirus]

@Juan-Castelli i am not 100% but i think till 3.4.1 it was just not possible to blur the whole view on iOS and Android so this is the example which worked on both.

But sind 3.4.1/3.5.0 you can just add a BlurView and everything behind it will be blurred. I've created a Custom Modal with a BlurView Background behind it which works fine on 3.5.0 and looks pretty cool.

[Psiiirus]

@seasonZzl

The current README demo is wrong it should show something like this

import React, { Component } from "react";
import { View, Image, Text, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";

export default class Menu extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Image
          key={'blurryImage'}
          source={{ uri }}
          style={styles.absolute}
        />
        <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}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
        />
        <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
});

[jan-happy]

@Psiiirus Thank you for pointing this out. Why is the documentation wrong?

[Psiiirus]

@jan-happy well i think because no one did a PR so far...me either xD

[jan-happy]

It would be great if the changes in the documentation would be made by the same contributors that made the changes to the code. Because I guess they know best what has changed ;)

[Psiiirus]

I general u r totally right :) but anyways I did a PR with my example code...lets see if it gets excepted.

@seasonZzl can this ticket be closed?

[C-odes]

It is not addressed on how it's used in a flatlist. @Psiiirus
You might say it is because the same way can be applied to a flatlist. but nah.

The problem with flatlist is when you place the blur inside, yes, it does blur the first item, but until you scroll up the other visible items have pure white /black background.

How does one solve this issue?