flash android

[jiangchunyun]

when switch the keyboard , android will flash.

[OmarBasem]

YES SAME ISSUE

[ggunti]

Same thing at me, only on android, it happens randomly, not always.

[M-i-k-e-l]

Hi @jiangchunyun,

Please add more information if this is still relevant.

1. Does this happen in the demo app? a. If yes, on what device - real\emulator, OS and type? b. If not, please provide an example that it happens on.
2. A video of the problem if you can.

[ggunti]

@M-i-k-e-l I made a little video, you can access it below. The device is a Samsung S5, running android 6. The keyboard flickers starting second 20 of video (until second 20 do not flickered, flickering is random at me when I switch keyboard). On iOS I did not meet this problem. https://vimeo.com/417267483

[M-i-k-e-l]

It looks to me like the height of the keyboard is changed, is that what you mean? I was unable to reproduce with my code on my device. If one of you can provide an example in which this is reproduced on I'll try to investigate further.

[ggunti]

No, it's a very fast flash immediately after second 20. I will try to setup an example, but it is enough hard because as I mentioned, the flash is random.

[ggunti]

@M-i-k-e-l I was able to setup an example repo: https://github.com/ggunti/math-keyboard-example

You can simply run it for android using the react-native run-android command. In order to reproduce the keyboard flash, for example, try to switch multiple times between Text and Basic Math keyboards:

Sometimes, randomly, you should see the flash (like in the video I linked above).

[M-i-k-e-l]

Hi @ggunti,

I think I was able to reproduce the problem with your example (thanks for the effort!), however I do not think the problem is within react-native-keyboard-input. If what I saw was what you meant, then I think this has to do with the FlatList. If you allow YellowBox (remove these), you will receive a warning about "Each child in an array should have a unique "key" prop.". I can't say for sure but when I changed the usage from FlatList to ScrollView (see here) the problem did not occur. I suggest that you create a unique key mechanism for your items and hopefully that will solve the problem with FlatList.

I will not close the ticket for now, with the hope that I am correct and you will close it once you solved the issue. Please either close it or let me know this is not resolved and you still think the problem lies within react-native-keyboard-input.

[ggunti]

@M-i-k-e-l Thank you for your feedback. The "Each child in an array should have a unique "key" prop." warning was not coming from the FlatList, it was because of the renderRow function inside MathKeyboard class, I forgot to pass a key to the renderButton function.

Now it's fixed:

So, now we do not have the "Each child in an array should have a unique "key" prop." warning, but the flickering still happens. I will check what happen if I change the FlatList to ScrollView, as you suggested. I will come back soon.

[ggunti]

@M-i-k-e-l I think you are right, if we use ScrollView instead FlatList, there is no flickering anymore. The problem is that in my use-case I will have to use the FlatList component because I will need to load more comments when end of the list is reached (infinite-scroll).

So, I'm wondering what could cause the flickering in case of FlatList component. It makes some additional undesired re-rendering when keyboard changes?

FlatList is used frequently, so that's why also other people reported 'flash bug'. Anyhow, it looks that the bug is not in the react-native-keyboard-input package. Anyhow, it would be nice to find a solution also for the case when FlatList is used.

[M-i-k-e-l]

Since it's not the key, then I'm not sure what's the correct way to approach this. I agree that using FlatList should be possible and not cause issues.

I'll try to take a look at this again at a later date, please do not close it.