kfiroo / react-native-cached-image

CachedImage component for react-native
MIT License
940 stars 468 forks source link

CachedImage doesn't work with BlurView (viewRef issue) when used instead of simple Image #152

Open ddudek opened 5 years ago

ddudek commented 5 years ago

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,
  },
});
ddudek commented 5 years ago

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