Reputation: 2373

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
}