1

Scenario: I want to achieve a situation like the code shown below. Where there will be:

  • A multiline TextInput with other components and the screen will be scrollable.
  • I don't want the TextInput to be scrollable.

Problem: What happens is, after writing a certain amount of lines in the TextInput, the texts vanishes. I can still select the text and get suggestion in the keyboard. It's like the texts and the TextInput became transperant. After the TextInput reaches the height of the phone screen, this problem occurs.

Is this a bug of React-Native? or am I doing something wrong here?

Note: I'm using "expo": "~40.0.0". Also, the code below is just to portrait the situation, not the actual code.

return (
  <ScrollView>
    <View style={styles.block} />
    <View style={styles.block} />
    <TextInput
      value={content}
      onChangeText={setContent}
      placeholder="Start writing from here"
      multiline
    />
    <View style={styles.block} />
    <View style={styles.block} />
  </ScrollView>
);

const styles = StyleSheet.create({
  block: {
    height: 200,
    backgroundColor: 'blue',
  },
});
Fahim Morshed
  • 11
  • 2

1 Answers1

1

Try out any of following Workarounds:

  • Enabling scrollEnabled on the TextInput
  • Explicitly setting a height on the TextInput (eg. by dynamically measuring the contents)
<ScrollView scrollEnabled style={{ marginTop: 100 }}>
  <TextInput multiline placeholder="type here" scrollEnabled={true} />
</ScrollView>
Harshit
  • 157
  • 10