Crashing after the second time on Android with React Navigation

[choco14t]

TL;DR

Crashes when navigate to a screen contains <QRCode />.

Detail

Navigate to screen and render QRCode correctly the first time. But, second time is crashing when move to the screen again.

According to this issue, occurs by <WebView /> wrapped <View />.

In another issue, to avoid this problem set androidHardwareAccelerationDisabled={true} at parent <View /> or set style opacity: 0.99 at <WebView />.

Reproduce Code

import React from 'react';
import {Button, StyleSheet, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import QRCode from 'react-native-qrcode-generator';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        title="Show Qrcode"
        onPress={() => navigation.navigate('Qrcode')}
      />
    </View>
  );
};

const QrcodeScreen = () => {
  return (
    <View style={styles.container}>
      <QRCode size={200} bgColor="black" fgColor="white" />
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Qrcode" component={QrcodeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

Dependencies

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.10.2",
"react-native-qrcode-generator": "^1.2.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1",
"react-native-webview": "^11.2.3"

[PedroMeirelesInspira]

I had the same issue in the project I'm currently working with The issue, more precisely is: When the user navigate to another screen while the QRCode is being rendering/loading, then in android the app crashes

[rishichawda]

Thanks for reporting the issue @choco14t. I'll try to take a look at it and push a fix soon.

[imanuelvic]

hi, is there any fix for this dependencies? or do you have a qr code library recommendation @choco14t ?. I'm making a project using qr code, and I'm looking for the right one. This react-native-qrcode-svg have an issue for me. Thank you.