Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

This is what I want:

enter image description here

Here's my code

<TextInput
defaultValue={address}
ref="searchInput"
autoCorrect={false}
style={searchStyles.searchInputField}
placeholderTextColor={'#ddd'}
placeholder="Location"
onChangeText={query => this.search(query)}
/>
like image 399
Wellington Avatar asked Feb 15 '18 09:02

Wellington


People also ask

How do I change the TextInput placeholder style React Native?

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop. to set the placeholderTextColor to 'red' to set the placeholder color of the input to red.

How do you focus TextInput React Native?

focus textinput in class component examplecreateRef(); let's understand with the example of create ref of textinput in class component. export default ReactNativeComponents; The above example also added auto navigate the second textinput when the first input fired submit an event.

How do I change TextInput value in React Native?

TextInput needs value that it is the value that is gonna be shown inside the TextInput. And to update that value you use onChangeText that is gonna call whatever function you specify every time the text into the TextInput change.


3 Answers

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.

like image 191
Aidan Doherty Avatar answered Sep 28 '22 10:09

Aidan Doherty


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

like image 43
Yossi Saadi Avatar answered Sep 28 '22 08:09

Yossi Saadi


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}
/>
like image 44
Surender Kumar Avatar answered Sep 28 '22 08:09

Surender Kumar