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)}
/>
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.
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.
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.
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.
Add selection={{start:0}}
without the end
attribute
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}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With