React-native-blur: viewRef is null

[Kariko]

I want to blur on a View component, what should i do to make the View blur at the beginning?
And what function i should use to replace the 'onLoadEnd' in the example?

RN:0.46.0
react-native-blur:3.1.3

[luck-cheng]

I have encountered this problem, and I can't solve it.

[jeffmwells]

Same issue... Works fine on iOS, fails on Android

[OlafCode]

Me too . Not working on android.

[ww930912]

+1

[alexeymolchan]

+1

[koansang]

+1

[batmanhit]

Not working on Android as well.

[niocncn]

+1

[DanGDroid]

not working on Android when trying to blur a View:
for me viewRef returns a number, but fails to findView

`@ReactProp(name = "viewRef")
public void setViewRef(BlurringView view, int viewRef) {
View viewToBlur = context.getCurrentActivity().findViewById(viewRef);

    if (viewToBlur != null) {
        view.setBlurredView(viewToBlur);
    }
}`

-- viewToBlur is null,
for a single image its ok.

[robertftw]

Same issue here on Android on a View. Anyone got a solution?

[DanGDroid]

i got it to work, try wrapping all the view you want to blur in a single View.

render(){
    const {...} = this.props
    return (
<View style={styles.container}>
        <View style ={styles.container}
                   ref={(blurView) => {this.blurBackgroundView = blurView}}>
          {this.renderTitleSubtitle(currentStage, products)}
          {this.renderCurrentStage(currentStage)}
          {this.renderButtons(nextStage, currentStage)}
          {this.renderModal(saveCurrentDetails)}
        </View>
        {this.renderBlur()}
        {this.renderFinishModal(userName, lastStage)}
      </View>
)}

and pass the ref in :

componentDidMount () {
  this.setState({ blurViewRef: findNodeHandle(this.blurBackgroundView) });
}

the blur view:

renderBlur(){
    if(this.state.finishModalVisible){
      return   <BlurView
                  style={styles.absolute}
                  viewRef={this.state.blurViewRef}
                  blurType="dark"
                  blurAmount={10}
                />
    }else {
      return null;
    }
  }

Good luck!

[robertftw]

@DanGDroid On Android? Can't get it to work with the same layout:

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({ viewRef: findNodeHandle(this.view) });
    });
  }

  render() {
    const { isLoading } = this.props;
    if (!isLoading) {
      //   return null;
    }
    return (
      <View style={[styles.container, styles.absolute]}>
        <View style={styles.innerContainer} ref={ref => (this.view = ref)} />
        <View style={[styles.absolute, styles.center]}>
          <BlurView
            style={styles.absolute}
            viewRef={this.state.viewRef}
            blurType="light"
            blurAmount={4}
          />
          <ActivityIndicator size="large" color={Colors.flaktMiddleGrey} />
        </View>
      </View>
    );
  }
}

[DanGDroid]

this view you want to blur seems empty!?

<View style={styles.innerContainer} ref={ref => (this.view = ref)} />

[robertftw]

@DanGDroid Is has a background color and blurs it on iOS.
Even if I add a text to it the text doesn't get blured.

[herarya]

+1 only android

[ThunderBoltEngineer]

+1

[lynnsouz]

Thanks @DanGDroid, your example works perfectly on both platforms.

[ajaykumar97]

How to Blur a drawer component background View?

[GuoAxiang]

plz help me

[wmonecke]

I regret trying to make this component work. What a mess.