Delay rendering stuck UI for while in android

[devps00]

Description

In my application I am creating QR code with the help of QRCode generator.

Every thing is working well in iOS, but in android the QRcoder draw QR to UI some delay, at this time my UI getting stuck and even I'm not able to show loader as well.

However I have used IneractionManager api to create this task in other thread but still UI getting stuck when I am updating the hook to show on UI.

Here is my code which I am follo w to doing this functionality

My main component :-

const PozReceive = ({ onClose }: ReceiveProps) => {

const [walletQR, setWalletQR] = useState(null);

const generateWalletQrCode = () => {
    const interactionPromise = InteractionManager.runAfterInteractions(() => {
      const qrCode = ConentQR(user?.walletAddress || '', walletImg, 50);
      setWalletQR(qrCode);
    });
    return () => interactionPromise.cancel();
  };
  useEffect(() => {
    if (! walletQR) {
      generatePouchQrCode();
    }
  }, []);

return (
   {!walletQR ? (
               <Image style={styles.qrLoader} source={loaderGif} />
                ) : (
                 <QRCode {...walletQR} />
     }
 )
}
export default PozReceive;

and here is my QR generator code :-

const ConentQR = (
  content: string,
  logo: Image.propTypes.source,
  logoSize: number,
  backgroundColor: string = 'transparent',
) => {
  return (
    <QRCode
      color={Colors.DARK_PURPLE}
      content={content}
      codeStyle={'dot'}
      outerEyeStyle={'diamond'}
      logo={logo}
      logoSize={logoSize}
      backgroundColor={backgroundColor}
    />
  );
};

Version

0.64.2

Output of npx react-native info

System: OS: macOS 12.5.1 CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz Memory: 37.07 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 18.10.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.2 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 25, 28, 29, 30, 31, 33 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0 System Images: android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 14.1/14B47b - /usr/bin/xcodebuild Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.2 => 0.64.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

While generating the QR code in my application.

Snack, code example, screenshot, or link to a repository

Here is the link for this issue described in details :-

https://stackoverflow.com/questions/74906346/how-to-set-ui-component-to-state-in-background-in-react-native

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.