react-nativestylingreact-native-textinput

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

Solution

  • 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