React Native TextInput: why does secureEntryText shift outside of input box and have ellipsis?

Question

I have TextInput components in my React Native app, and when I added secureEntryText: 'true' for the password input, I noticed two things:

1) As I'm typing the password, the left edge of the typed password shifts out and to the left of the input box, as shown here:

2) When I unfocus the password input, the typed password has an ellipsis at the end, no matter how long the password is, as shown here:

Does anyone know how I can approach fixing either of these problems?

Answer 1

I do not know the answer for the first question, but the ellipsis won't show once TextInput's property textAlign is set to anything but 'auto'.

Example:

<TextInput secureTextEntry={true} textAlign={'center'} />

Answer 2

The styles for forms can be a little wonky. For example, when this happened to me, the width of the form field was only that of the typed text. The more you typed, the more it would drift to the left:

Setting the input styles to flex:1 will not only fix the disappearing secureTextEntry issue, but also allow you to click anywhere in the input to focus instead of just on the text. You would think that react would have this style as a default prop but it does not:

<TextInput style={{flex:1}}></TextInput>