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)}
/>

Answer 1

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.

Answer 2

添加selection={{start:0}}不带end属性

Answer 3

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}
/>

Answer 4

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 } })

Answer 5

ellipsizeMode="head"或者你可以试试ellipsizeMode="tail"