TextInput from React Native does not show entered text

Question

I am trying to implement a simple iOS application with React Native. However, I got stuck with a problem with the TextInput element.

It works fine until I try the next steps:

1. Enter some long text (the text should be longer than the input itself)
2. Put the cursor to the beginning of the text
3. Try typing something.

I expect that after I type, say, abc, it will look like this:

However, by some reason, the result is like this:

I.e., abc is entered, however, the cursor stays at the initial (leftmost) position and the entered text is not visible. I have to move the cursor to the left myself to see the text. That is not expected behavior: I, as a user, feel that the input is broken and my text just is not entered at all.

I did not found any solution for the issue so far. Is it a bug of React Native or I just do something wrong?

Thank you.

Update #1

Created a simple Expo project to reproduce the issue.

Update #2

Looks like an issue of React Native. Reported the issue and implemented the workaround proposed by @HelmerBarcos (with multiline={true}).

Answer 1

The problem is that you are not making proper use of the corresponding property or props of the TextInput Component. For a better understanding of their use, please read the official API documentation from React Native components in this case TextInput Component Documentation

You need to use the placeholder prop and it should works. It could be that there is another mistake on your StylesSheet.

I have created an Expo example for you just for showing the correct way. You can add your own code there if you want to experiment with it.

Answer 2

I faced same issue, and solved it by adding:

flex: 1

on text input style.