react-native-blur
react-native-blur copied to clipboard
Kureev
viewRef is null
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
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.
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!
@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>
);
}
}
this view you want to blur seems empty!?
<View style={styles.innerContainer} ref={ref => (this.view = ref)} />
@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.
