react-native-custom-qr-codes icon indicating copy to clipboard operation
react-native-custom-qr-codes copied to clipboard

Don't work with react-native-cache-img lib, component doesn't re-render

Open jamessawyer opened this issue 5 years ago • 0 comments

First, thanks for this awesome lib! I used this lib to work with this forked react-native-cached image in my latest project. Here is code snippet:

import React from 'react';
import { View, Button } from 'react-native';
import { QRCode } from 'react-native-custom-qr-codes';
import { CachedImage } from 'react-native-cached-image;

class Demo extends React.PureComponent {

   state = {
    currentBg: 'https://images.unsplash.com/photo-1548744575-68926b9ec662?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80', 
    url: 'https://www.youtube.com'
  }
  // and renderBackground method
  renderBackground = () => {
    return (
      <ImageBackground
        style={styles.bg}
        source={{ uri:  this.state.currentBg }}
      >
        <QRCode content={this.state.url} size={100} />
      </ImageBackground>
    );
  }

  changeUrl = () => {
    this.setState({
      url: 'https://www.facebook.com'
    })
  }

  return (
    <View>
       <CachedImage
         renderImage={this.renderBackground}
         source={{ uri: this.state.currentBg }}
      />
     <Button title='Change url' onPress={this.changeUrl} />
    </View>
  )
}

I gave url a initial state 'https://www.youtube.com', then I changed the state of url to 'https://www.facebook.com', I found qrcode never re-render.

envirnoments: react: 16.5.0 react-native: 0.57.2 react-native-custom-qr-code: 2.0.0 react-native-cached-image: 'git+https://github.com/fungilation/react-native-cached-image.git' dev envirnoment: mac os platform: iOS

thanks in advanced!

jamessawyer avatar Jan 31 '19 04:01 jamessawyer