How to move text right in Text Input

Question

I wanted to style up my app by adding border radius to a text input, I observed that the text in the input is going outside from the corners how can I move it to the right.

This is the Text Input code

<TextInput
    placeholder="Username"
    placeholderTextColor="rgba(0,0,0,0.6)"
    maxLength={35}
    style={styles.input}
/>

This is the Style code

input: {
    backgroundColor: '#ccc',
    height: 50,
    width: 320,
    alignSelf: 'center',
    borderRadius: 50,
    textAlign: 'left',
    marginTop: 35,

    fontSize: 18,
    fontFamily: 'oswald',
    fontStyle: 'bold',
    color: 'black',
  }

score 1 · Accepted Answer · answered Dec 18 '21 at 12:38

You can add a padding to the input and that will give you the space you need.

input: {
    paddingHorizontal: 5px,
    backgroundColor: '#ccc',
    height: 50,
    width: 320,
    alignSelf: 'center',
    borderRadius: 50,
    textAlign: 'left',
    marginTop: 35,

    fontSize: 18,
    fontFamily: 'oswald',
    fontStyle: 'bold',
    color: 'black',
  }

You can also just have padding instead of paddingHorizontal, but that will increase the height of your input

My pleasure! If this helped you please accept the answer. – Thales Kenne Dec 28 '21 at 15:40 — Thales Kenne, Dec 28 '21 at 15:40

How to move text right in Text Input

1 Answers1