TextInput field only displays two lines of default value

[JerryHobby]

I have a React Native app. One of my data fields has multiple lines of text. That is being passed to my form. When the form displays, it uses TextInput with multiline. But it only shows the first two lines of input in the field. When I click on it (giving it focus) it shows all the content. But I have to click on the page to display all the data in that field. So I know the data is there, but by default it will not show all the data.

Any ideas?

Screenshot #1 – This is my list of blog posts. It displays as expected (with an imposed limit on the amount of text to display).

Screenshot #2 - When I click on the blog posts, it shows the form page. But only the first two lines appear (in this case line 2 is blank).

Screenshot #3 - Same page, but after I click somewhere, it populates all the data.

So it is not an issue of state since the data is there. But somehow a restriction on how much data will display by default. That’s my best understanding of what’s going wrong.

This happens whether or not the TextField is set to readonly or not set to readonly.

The code for the TextField …

            <ScrollView
                style={styles.bodyInput}
                showsVerticalScrollIndicator={true}
            >
                <TextInput
                    editable={!readOnly}
                    multiline={true}
                    placeholder="Text ..."
                    onChangeText={newText => {
                        setNewBlogPost({...newBlogPost, body: newText})
                    }}
                    defaultValue={newBlogPost.body}
                />
            </ScrollView>

[JerryHobby]

I found my own solution. Posting here for others to be able to learn from it.

It turns out the error is that he ScrollView component is not required. I was applying my styles to the ScrollView, so I moved that to the TextInput component. That resolved the issue. While the TextInput was expanded as desired, it did not have a height property (since that was on ScrollView). When I put the styles directly to my TextInput then the height property was properly assigned and it began working.

There is another prop that might be helpful in some cases: numberOfLines={20}. But I did not need that particular prop. I think it would help to hide extremely large data that would not all fit on the screen.