React Native TextInput: placeholder and detx padding

Question

I have a TextInput with rounded corners :

<TextInput
    style={{
        backgroundColor : '#FFFFFF',
        borderRadius : 30,
        marginLeft : 8,
        marginRight : 8,
        marginTop : 10
    }}
    placeholder = 'A placeholder'
/>

but i would like to give some left padding to placeholder (and text that will be contained inside TextInput), because now text is too near to left TextInput border. How can i do it?

What’s wrong with the `paddingLeft` attribute? – remeus Jul 09 '19 at 09:26 — remeus, Jul 09 '19 at 09:26

score 7 · Accepted Answer · answered Jul 09 '19 at 12:43

Instead of marginLeft use paddingLeft

<TextInput
    style={{
          backgroundColor: '#ffffff',
          borderRadius: 30,
          paddingLeft: 8,
          paddingRight: 8,
          marginTop: 10
        }}
        placeholder='A placeholder'
      />

I hope this will help

score 4 · Answer 2 · answered Feb 17 '21 at 19:23

4

You can use it

paddingHorizontal: 10

answered Feb 17 '21 at 19:23

Siddhartha Mukherjee

2,703
2
24
29

React Native TextInput: placeholder and detx padding

2 Answers2