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