CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
iamdebadipti
iamdebadipti

Reputation: 161

TextInput gets blank in case of large input value

I am working on a simple React Native application for saving notes. I have a TextInput component which shows the pre-filled value, in case any, and you can change the input value. I have a state for controlling the input field, and have only onChangeText event attached. Here is my Note component:

const NotePage = ({ note, handleGoBack }) => {
  const [noteText, setNoteText] = useState(note ? note.description : '');

  return (
      <ScrollView style={styles.container}>
        <TextInput
          style={styles.inputStyle}
          value={noteText}
          multiline
          autoFocus={note === null}
          onChangeText={(text) => setNoteText(text)}
          textBreakStrategy="simple"
          placeholder="New Note"
        />
      </ScrollView>
  );
};

But, if I have a large text as the value for the TextInput, the value gets blank, not like there is no value, it seems like the text is getting transparent or something. And, when I press delete button on the keyboard, after deleting some character, it is visible again! Is is really weird.

Any help would be really appreciated! Thank in advance!😀

Upvotes: 2

Views: 453

Answers (1)

bas
bas

Reputation: 15722

Looks to be a ScrollView bug (https://github.com/facebook/react-native/issues/22713).

A workaround can be to set the maxLength property so you can't type more than a certain amount of characters, the max amount before the ScrollView disappears:

// ...
<ScrollView>
  <TextInput
    value={noteText}
    multiline
    autoFocus={note === null}
    onChangeText={(text) => setNoteText(text)}
    textBreakStrategy="simple"
    placeholder="New Note"
    maxLength={1778}
  />
</ScrollView>

The amount of characters you can type before it disappears might differ on your end so play around with the value.

You could also set editable to false based on the maximum amount of characters:

editable={noteText.length <= 1778}

But replacing the ScrollView with a regular View might even work better if you're only rendering a TextInput as a multiline TextInput is itself scrollable.

Upvotes: 1

Related Questions