Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get rid of textInput indentation (padding) in React Native?

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
}

enter image description here

like image 648
FairyQueen Avatar asked Jun 07 '18 13:06

FairyQueen


3 Answers

Remove

paddingHorizontal: 10,

from

textInput: {

[...]

}
like image 141
Rounin - Glory to UKRAINE Avatar answered Oct 18 '22 18:10

Rounin - Glory to UKRAINE


Try this bro..

paddingVertical: 0

like image 21
Sathish Swaminathan Avatar answered Oct 18 '22 18:10

Sathish Swaminathan


Some times there are default parameters, to delete "paddingHorizontal" can't be enough. You should set it to 0.

paddingHorizontal: 0
like image 2
mscmnc Avatar answered Oct 18 '22 19:10

mscmnc