How do I make a TextInput show the start of the entered text instead of the end in Android?

Question

I have a TextInput in my react-native application. When I set the value prop and the value is longer than the length of the TextInput, it shows the text starting from the end and not the beginning. In iOS it works okay, it seems to be an Android issue. Is there a way to align the text to show from the start of the TextInput or whichever is the preferred?

This is what I see:

This is what I want:

Here's my code

<TextInput
defaultValue={address}
ref="searchInput"
autoCorrect={false}
style={searchStyles.searchInputField}
placeholderTextColor={'#ddd'}
placeholder="Location"
onChangeText={query => this.search(query)}
/>

for android `android:ellipsize="end" ` – Abu Yousuf Feb 15 '18 at 09:19 — Abu Yousuf, Feb 15 '18 at 09:19

score 11 · Answer 1 · answered Feb 06 '19 at 12:54

11

I ran into the same issue my solution for this was adding the selection prop to the start by default. This works so when the input is focused it goes to the start. I then added the autoFocus prop and set it to true to make it go to the start when the component is loaded.

<TextInput value={address} autoFocus={true} selection={{start:0, end:0}} />

There may be a better way to do this but this is what i have come up with hope it helps others.

answered Feb 06 '19 at 12:54

Aidan Doherty

962
2
11
29

but this way the user can't move the cursor anymore – wong2 Feb 05 '20 at 08:51
@wong2 i imagine your component must be being re rendered on a change or something similar which could cause that problem. – Aidan Doherty Feb 06 '20 at 15:00
1

Gave an answer similar to yours just now. But, you should not add the 'end' attribute, that way it'll start there but won't limit the user for changes or cursor move – Yossi Saadi Apr 09 '20 at 19:05
@YossiSaadi Nice, its been a while since i used it but i think i slightly remember having trouble with excluding 'end' this may have been changed with any updates over the last year or could've been just for my particular use case. – Aidan Doherty Apr 10 '20 at 09:25
1

@AidanDoherty It does cause a little trouble, you are now allowing the user to make a selection, but the positive is he can scroll. Still no perfect solution :) – Yossi Saadi Apr 10 '20 at 10:47
I can't move cursor anymore , this solution is for fix position. – vishal rathod Mar 18 '21 at 05:33
@vishalrathod Has been a while since i done this but can you try and prevent any re renders on the component you are trying to do it with and see if that stops the cursor position reseting? There also may be a better way of doing this now since i last looked into it... i hope, best of luck. – Aidan Doherty Mar 18 '21 at 10:00

score 9 · Answer 2 · answered Apr 09 '20 at 19:03

9

Add selection={{start:0}} without the end attribute

answered Apr 09 '20 at 19:03

Yossi Saadi

790
6
8

Surender Kumar · Answer 3 · 2020-08-25T13:15:49.250

6

try this its working for me

constructor(props) {
 super(props);
 
 this.state = {
   selection: Platform.OS === 'android' ? { start: 0 } : null
 }
}

onFocus =()=>{
  if(Platform.OS==='android'){
    this.setState({ selection:null });
  }
}

onBlur =()=>{
  if(Platform.OS==='android'){
    this.setState({ selection:{ start: 0, end: 0 } });
  }
}

<TextInput
  onFocus={()=>this.onFocus()}
  onBlur={()=>this.onBlur()}
  selection={this.state.selection}
/>

edited Aug 25 '20 at 13:15

answered Aug 13 '20 at 06:47

Surender Kumar

1,152
16
17

it's working but minor issue , first time cursor is not moving I need to do second move for cursor position. – vishal rathod Mar 18 '21 at 07:03

score 2 · Answer 4 · answered Dec 02 '19 at 09:19

this.inputRef &&
        this.inputRef.setNativeProps({ selection: { start: 0, end: 0 } })

Put the code in onEndEditing and wherever you want to update the text.

Or update the text and selection at the same time:

this.inputRef &&
        this.inputRef.setNativeProps({ text: value, selection: { start: 0, end: 0 } })

score 1 · Answer 5 · answered Oct 25 '22 at 06:06

I faced the same problem and the following worked for me,

default - selection={start:0}

onFocus - selection={null}

onBlur - selection={start:0}

If you use functional component it goes like this.

const TextInputFromFirst = () => {

const [selection, setSelection] = useState({start: 0});
const handleFocus = () => {
    setSelection(null);
};
const handleBlur = () => {
    setSelection({start: 0});
};

return (
<TextInput
        placeholder="Enter Some Long Text"
        onBlur={handleBlur}
        onFocus={handleFocus}
        selection={selection}
/>
)

score -3 · Answer 6 · edited May 26 '18 at 07:11

-3

ellipsizeMode="head" or You can try ellipsizeMode="tail"

edited May 26 '18 at 07:11

Suraj Rao

29,388
11
94
103

answered May 26 '18 at 07:07

Pravin

195
1
6

I don't think this is the thing he is looking for this solution will change the truncation of the text not the starting position of the TextInput. "Beginning" should always be shown when the input is loaded and then you can swipe left to view the rest of the value. – Aidan Doherty Feb 06 '19 at 12:40
`ellipsizeMode` prop only support by `Text` component – Vasyl Nahuliak Jul 15 '21 at 06:37

How do I make a TextInput show the start of the entered text instead of the end in Android?

6 Answers6