Text Flickering While Typing

[MS0015]

When I use the react-native-modalize library to display a modal that contains a TextInput component and I start typing text into the TextInput, I notice that the entered text intermittently flickers or disappears briefly. This behavior is distracting and negatively affects the user experience.

Expected Behavior:
The entered text should remain stable and visible within the TextInput as I type, without any flickering or disappearing.

Actual Behavior:
The entered text within the TextInput flickers or disappears momentarily while typing, making the text input experience jarring and unpleasant.

Reproduce
https://github.com/jeremybarbet/react-native-modalize/assets/34243617/6ca520bd-9c8e-407e-9652-b539a2be1ede

Dependencies:

• react-native-modalize [2.1.1]
• react-native [0.70.6]
• react-native-gesture-handler [2.8.0]

[ajlee4]

have you been able to solve this problem?

[slauzinho]

Having the same issue, removing multiLine from the TextInput stops the issue from happening.

If we add a console.log on the onChangeText it looks like it gets called a bunch of times when typing a single char

[AndyDesign999]

@slauzinho
This issue occurs in the react-native-portalize library when using a TextInput inside a modal.
If the TextInput has the multiline prop enabled and is placed inside react-native-portalize, using the value prop on iOS causes text flickering while typing.

To fix this issue:

• Use defaultValue instead of value on iOS.
• On Android, you can continue using value normally.

*This workaround ensures smooth text input behavior inside react-native-portalize on iOS.

import { Platform } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

<TextInput
  placeholder="Enter text"
  multiline={true}
  /*
   * Using `defaultValue` on iOS to prevent flickering,
   * and `value` on Android for expected behavior.
   */
  {...(Platform.OS === 'ios' ? { defaultValue: text } : { value: text })}
  onChangeText={setText}
  style={{ height: 100, borderWidth: 1, padding: 10 }}
/>