CODEWITHSUNDEEP
react-nativestylingreact-native-textinput
Shubham Deswal
Shubham Deswal

Reputation: 55

How to move text right in Text Input

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',
  }

Upvotes: 1

Views: 1648

Answers (1)

Thales Kenne
Thales Kenne

Reputation: 2932

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

Upvotes: 1

Related Questions