Open
Description
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"
Metadata
Metadata
Assignees
Labels
No labels