0

I have big amount of text data and fragmented in to small parts and saved in to the array (in code its props.frames)
and now I want to animate these fragments as qr code on iterating a list "frames" . I tried following but it does not work .

  • I know there is Animated.loop api but I am not sure how to apply this logic in my case , I mean on each iteration how to refresh qr code value dynamically
  • If you do have any suggestions it would be highly appreciated .
import React, {useState, useEffect,useRef } from 'react';
import {View, Animated} from 'react-native';

import QRCode from 'react-native-qrcode-generator';

function QRCodeLoop(props) {
 // const [frame, setFrame] = useState(0);

  const currentFrameToAnimate = useRef(new Animated.Value(0)).current;
  const opacity = useRef(new Animated.Value(0)).current;
  const frame = useRef(new Animated.Value(0)).current;


  //const [frameIndex, setFrameIndex] = useState(0);

  console.log('props.frames length : ' + props.frames.length);

  const frames = props.frames;
  const size = props.size;
  const fps = props.fps;

  let _raf;
  useEffect(() => {
    console.log('QRCodeLoop use effect called ');

    let elapsed;

    const nextFrame = (frame, frames) => {
      frame = (frame + 1) % frames.length;
      console.log('nextFrame:', frame);
      console.log('frames.length:', frames.length);
      return frame;
    };

  },[frames]);

  return (
    <>
      <View style={{position: 'relative', width: size, height: size}}>
        {frames.map((chunk, i) => {

        Animated.timing(frame, {
          toValue: chunk,
          duration: 1000,
          useNativeDriver: true
        }).start();

          return (
            <Animated.View
              key={i}
              style={{position: 'absolute', opacity: 1}}>
              <QRCode
                value={chunk}
                size={size}
                bgColor="purple"
                fgColor="white"
              />
            </Animated.View>
          );
        })}
      </View>
      
    </>
  );
}

export default QRCodeLoop;
savita
  • 79
  • 4
  • It's hard to catch you. Animated is used to do animations. It seems you are using it to handle a loop. – gwl002 Jun 28 '21 at 13:53
  • Do you want every chunk to animated from 0 to the chunk value? – gwl002 Jun 28 '21 at 13:57
  • @gwl002 I want to iterate 0 to frames.length , each iteration give a chunk which is text data which I wanted to show as qr code. – savita Jun 28 '21 at 15:30
  • gwl002 My requirement is I have a big text which is beyong the limit of qr code so I want to break it in to multiple frames and then will animate each frame with duration of 1 second . Am I making sense now ? – savita Jun 28 '21 at 15:34
  • Why animate it? so just start animation for every frame is okay? – gwl002 Jun 29 '21 at 00:06
  • Your outside view and the small QrcodeView has the same size? – gwl002 Jun 29 '21 at 07:25
  • yes is there possible to animate frames array data as series of qr code ? – savita Jun 29 '21 at 14:44

1 Answers1

0

#gwl002 I took your suggestions and looks like I dont need animation , below code seems working for my requirement , I can see series of qr code , only issue now I see is since frames array length is 200 which is quite big , the time it is taking loading the first frame is quite long also the screen getting stuck some time , Any suggestions how can i improve my code perfomance ?

import React, {useState, useEffect, useRef} from 'react';
import {View, Animated} from 'react-native';

import QRCode from 'react-native-qrcode-generator';

function QRCodeLoop(props) {


  console.log('props.frames length : ' + props.frames.length);
  const size = props.size;
  return (
    <View style={{position: 'relative', width: size, height: size}}>
      {props.frames.map((chunk, i) => {
        return (
          <View key={i} style={{position: 'absolute', opacity: 1}}>
            <QRCode
              value={chunk}
              size={size}
              bgColor="purple"
              fgColor="white"
            />
          </View>
        );
      })}
    </View>
  );
}

export default QRCodeLoop;
savita
  • 79
  • 4
  • After reading the source code of the package, I found every QrCodeView is a webview instance. 200 Webview instances created in one screen of course will stuck it. Maybe rendering the QRcode with javascript in one webview will improve performance. You can try to change the source code from the package.It's just pure javascript. – gwl002 Jun 30 '21 at 03:07
  • Thanks for your suggestiona and it make complete sense to me , I am really just a month old in react native world , sorry for silly question ,..... but how do you know it is a web view , by chance do you know any other libraray of qr code where its not web view ? or is there a way to refresh data in to the same view . any sample code in case you do have . – savita Jun 30 '21 at 11:31
  • [https://github.com/rishichawda/react-native-qrcode-generator/blob/master/lib/Canvas.js](https://github.com/rishichawda/react-native-qrcode-generator/blob/master/lib/Canvas.js) You can find the source code of the package on github. – gwl002 Jul 01 '21 at 02:14