react-native-cached-image
react-native-cached-image copied to clipboard
CachedImage doesn't work with BlurView (viewRef issue) when used instead of simple Image
Hi there, thanks for this awesome plugin!
In short: When I recently switched from regular Image to CachedImage project, BlurView that I'm using with it stopped working on Android (the image isn't blurred). On iOS it works fine.
Something I noticed: in Android BlurView uses context.getCurrentActivity().findViewById(viewRef); to find the view, which fails with CachedImage. viewRef is earlier retrieved with with findNodeHandle as you can see in example below.
BlurView: https://github.com/react-native-community/react-native-blur
Can you help in any way? I'm willing to contribute if you'd be able to give some hints where to look at.
example:
import React, { Component } from 'react';
import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-blur';
import { CachedImage } from 'react-native-cached-image'
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = { viewRef: null };
}
imageLoaded() {
this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
}
render() {
return (
<View style={styles.container}>
<CachedImage
ref={(img) => { this.backgroundImage = img; }}
source={{uri}}
style={styles.absolute}
onLoadEnd={this.imageLoaded.bind(this)}
/>
<BlurView
style={styles.absolute}
viewRef={this.state.viewRef}
blurType="light"
blurAmount={10}
/>
<Text>Hi, I am some unblurred text</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
absolute: {
position: "absolute",
top: 0, left: 0, bottom: 0, right: 0,
},
});
The main question is how to get reference to the actual image, so that: RN: that_node_handle = findNodeHandle(that_reference) then in android: context.getCurrentActivity().findViewById(that_node_handle) will be able to find the view