CODEWITHSUNDEEP
iosscrollviewreact-nativetextinput
Masonoise
Masonoise

Reputation: 1573

React-Native ScrollView makes TextInput vanish

Being pretty new to React Native, hopefully this is an obvious oversight, but I've experimented and not found a solution. It's a pretty straightforward problem: when I have a couple of Views and a TextInput, everything lays out as expected. When I wrap them in a ScrollView, the Views remain but the TextInput no longer renders. I have not been able to figure out why.

To test and share it I created an rnplay app here: https://rnplay.org/apps/P774EQ

As you can see, the text in the Views wrapping the TextInput appear as expected, but the TextInput isn't there. If you just remove the ScrollView (lines 18 & 39), the TextInput appears.

Hopefully someone experienced will look at this and have an answer in a few seconds because I'm pretty sure I'm just missing something obvious. Thanks in advance.

Upvotes: 1

Views: 984

Answers (1)

KChen
KChen

Reputation: 1918

1) Line17: style={styles.scrollview} => style={styles.scrollView}, you have a spell mistake.

2) Use contentContainerStyle for ScrollView (for more details about contentContainerStyle)

<ScrollView keyboardDismissMode='interactive' style={styles.scrollview} contentContainerStyle={styles.contentContainerStyle}>

and here is the contentContainerStyle:

contentContainerStyle: {
    flex: 1,
}

3) The flex property of message style is better to set as .125 because the flex of inputcontainer is .75.

Upvotes: 1

Related Questions