React Native TextInput - Scroll to left when value is updated

Question

I have a single line TextInput that can be updated via other parts of the UI.

My issue is that sometimes, the text can be long. And in this case, when I update the value, the TextInput scrolls all the way to the end of its content. I need the TextInput to stay pegged to the left when it is updated.

Is there any way for me to do this?

Expo SDK 37, React Native 0.61, React 16.9

Do you set it's width? – Vahid Alimohamadi Jun 30 '20 at 12:55 — Vahid Alimohamadi, Jun 30 '20 at 12:55
can you add screenshot here? – Muhammad Numan Jun 30 '20 at 14:07 — Muhammad Numan, Jun 30 '20 at 14:07

score 3 · Accepted Answer · answered Jul 02 '20 at 12:30

3

If I understand right, you want to move the "visible text" to the beginning of the TextInput, but only when you set value via props (I assume that, while typing, users will be able to see last portion of the string).

If this is your issue, I managed to fix it sometimes ago with the following code (this.input is the ref to your TextInput)

 if (this.input) {
   this.input.setNativeProps({
     selection: {
       start: 0,
       end: 0
     }
   });
 }

Let me know if this works for you :)

answered Jul 02 '20 at 12:30

Fabrizio Rizzonelli

429
6
16

1

This worked. The only issue was that after setting selection to 0, typing in the input field would only allow characters to be put in the 0 position. While the user is typing, I had to add `input?.setNativeProps({ selection: null })` – zholmes1 Jul 07 '20 at 15:59
Yup, you need to "undo" it for letting user typing. I use it in a case where I just set the value via prop without allowing editing :) – Fabrizio Rizzonelli Jul 08 '20 at 08:11

React Native TextInput - Scroll to left when value is updated

1 Answers1