I am using TextInput in my React Native app and the placeholder text does not align with the border underneath it. The placeholder text appears about 10 pixels indented away from the left side. Our UX does not like this and wants it to align exactly with the border underneath it. Basically, to start at the left without any indentation. I have researched this but have not being able to find anything out. Does anyone know how to fix this??
<View style={styles.emailInputBar}>
{this.state.showUsernameLabel &&
<Text style={styles.formLabel}>username</Text>
}
<TextInput
underlineColorAndroid="transparent"
style={styles.textInput}
placeholder="username"
placeholderTextColor="rgba(255,255,255,0.7)"
autoCorrect={false}
autoFocus={autoFocus}
returnKeyType={'next'}
autoCaptialize={'none'}
keyboardType={'email-address'}
enablesReturnKeyAutomatically={true}
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(text) => this.handleUsernameChange(text)}
value={email}
/>
</View>
Here is the css:
passInputBar: {
display: 'flex',
flex: 1,
backgroundColor: 'transparent'
},
textInput: {
fontSize: 16,
color: 'white',
textAlign: 'left',
width: '100%',
flexDirection: 'row',
paddingHorizontal: 10,
borderBottomWidth: 2,
borderBottomColor: '#FCE443',
flex: 1,
paddingTop:Platform.OS === 'ios' ? 7 : 0,
paddingBottom:Platform.OS === 'ios' ? 7 : 0,
marginTop:Platform.OS === 'ios' ? 6 : 0,
marginBottom:Platform.OS === 'ios' ? 6 : 0
}
Remove
paddingHorizontal: 10,
from
textInput: {
[...]
}
Try this bro..
paddingVertical: 0
Some times there are default parameters, to delete "paddingHorizontal" can't be enough. You should set it to 0.
paddingHorizontal: 0
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