Styled container component around TextInput on react-native leads to flickery behavior on Android(maybe iOS)

[tabfugnic]

Current behavior:

Using styled components and wrapping a TextInput that provides an onChangeText event creates flickery behavior. Removing the styled component and styling the component, in this case a View, directly fixes this problem.

To reproduce:

Please refer to https://snack.expo.io/Oz9BptF4Z

Steps to reproduce:

1. Create a text input with a autoFocus and an onChangeText event, in this case one that maintains the text inside the textInput
2. Create a styled container component
3. Wrap the TextInput with the styled container component
4. Run on Android(possibly iOS)
5. Notice that the keyboard pops in and out. In some cases state will revert back to a previous indetermined state
6. This is true when deleting as well
7. Change styled to component to view component and this problem disappears

Expected behavior:

It should work the same as a plain ol' View component.

Environment information:

• react: 16.13.1
• react-native: 0.63.3 (though it appears to be reproducible in whatever expo is using as well)
• @emotion/native: 11.0.0

[Andarist]

Packages related to React Native are community-driven. PRs are welcome

[leon-dunamu]

Hi! I think it is not a bug.

See my demo - https://snack.expo.io/hmEZX7a_b.

I think the styled Container is rendered everytime when you enter some words and then onChangeText works with rendering whole App.

So, App is rendered, new styled Component is made.

Each time it is rendered, a new Component is applied, so it seems that there is a flickering.

As in my demo, declaring the styled component outside the function can solve the flickering. Also, if you declare a styled component in a function, I think it will be solved by using React.useMemo.