TextInput placeHolder Alignment

Question

What is the best way to align the placeholder text for TextInput component? I have already attempted to use the styles component as described below. There doesn't seem to be a property for this.

render() {
    return (
        <View style={styles.container}>
             <TextInput
                style={styles.textInput}
                onChangeText={(text) => this.setState({
                    username: text
                })}
                placeholder='Add Username'
             />
      </View>
    );
}

}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
 },
 textInput: {
    height: 40,
    width: 200,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    borderColor: 'gray',
    borderWidth: 1,
 }

});

Answer 1

set TextInput style padding:0 and adjust spacing accordingly

Answer 2

if you doesnt give multiline property of textinput 'true'

place holder is always center of text input

you can give padding for example paddingTop

to style of textInput

to make distance between place holder and textinput

Answer 3

Add textAlign={'center'} as a property to the TextInput component

Answer 4

Add textAlign: 'center' to your textInput style.