[ANDROID] Getting white flash on background while qr code is being generated

[tkulpa]

Ignore ActivityIndicator, I just made sure that flash isn't related to animation

My modal that is storing component which is storing qr code:
`const Modal = (props: Props) => (

{props.children}

)

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow', //rgba(0,21,43,0.75)
alignItems: 'center',
justifyContent: 'center',
padding: 24,
} as ViewStyle,
wrapper: {
backgroundColor: 'white',
padding: 16,
paddingTop: 32,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderTopRightRadius: 24,
borderBottomLeftRadius: 24,
} as ViewStyle,
})

export default Modal`

And Im using react-navigation modal to show this on screen
only problem occurs on android emulator, ios is fine

[obetomuniz]

Same issue here

[heimi-block]

Same issue here

[heimi-block]

Same issue here

Only in Andriod

[devvuphan]

same issue. Any new update for this?

[eladglobalbit]

same issue here

[Jobel91]

Same issue

[AGFarhat]

I had the same issue, fixed it with a little 'hack'.
Add a view component around your QR code and apply overflow:'hidden' style to it.
Let me know if that works for you too

[sertony]

@AGFarhat it works. Thanks!

[mroozspace]

I had similar issue. Component was packed in Scrollview and on generating qr code, whole screen flckered. Solution was packing qrcode in another scrollview inside parent

[Jobel91]

Thanks to @AGFarhat. It works !

[todorone]

@AGFarhat @sertony @mroozspace @Jobel91
Followed advised pattern and have working QR code on iOS and on Android simulator, but when published, on real Android device I have blank WebView(scrollbars that being hidden within couple seconds). I have React Native 0.57. Can you please report RN version and confirm that hacks works on real Android device. Thanks!

[Jobel91]

@todorone , it works on Android real device, React Native version : 0.57.1

[AGFarhat]

@AGFarhat @sertony @mroozspace @Jobel91
Followed advised pattern and have working QR code on iOS and on Android simulator, but when published, on real Android device I have blank WebView(scrollbars that being hidden within couple seconds). I have React Native 0.57. Can you please report RN version and confirm that hacks works on real Android device. Thanks!

Yea i got that randomly one day... its weird.
Anyways i think i found a fix that works for me. Basically make sure that for props bgColor and fgColor you insert either in the form 'black' or 'white' or as 'rgb(xxx,xxx,xxx)'. try it (y)

[JherysVargas]

Ignore ActivityIndicator, I just made sure that flash isn't related to animation

My modal that is storing component which is storing qr code:
`const Modal = (props: Props) => (

{props.children}

)

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow', //rgba(0,21,43,0.75)
alignItems: 'center',
justifyContent: 'center',
padding: 24,
} as ViewStyle,
wrapper: {
backgroundColor: 'white',
padding: 16,
paddingTop: 32,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'stretch',
borderTopRightRadius: 24,
borderBottomLeftRadius: 24,
} as ViewStyle,
})

export default Modal`

And Im using react-navigation modal to show this on screen
only problem occurs on android emulator, ios is fine

How do you show the ActivityIndicator while the QR is generated?

[m3dwards]

For me, when the QR code is rendered it makes invisible any TextInputs. Using Expo API version 32.

I was able to take the sample code on the README of this project and replicate the issue on two android devices as the sample code includes a TextInput. It's a bit intermittent, sometimes they show and you can click on them and enter text even though you can see them and then sometimes they show after entering text.

Putting the QRCode inside a ScrollView with overflow hidden solved the problem for me so thanks for those who offered that solution to the flicker. I'd raise a specific issue but as the same solution fixed the problem for me, I suspect this might be the same bug.

[dvhai]

@AGFarhat it's work for me, many thanks

[ghost]

I had the same issue, fixed it with a little 'hack'.
Add a view component around your QR code and apply overflow:'hidden' style to it.
Let me know if that works for you too

@AGFarhat it's work, thank much

[lyy199212]

same issue and it's work,very thanks

[Harshbhama]

@AGFarhat It Worked, Thanks :)