Menu
I have a TextInput with the following style:
amountInput: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: 'rgba(255, 255, 255, 0.9)',
},
On iOS it correctly looks like it doesn't have enough padding:
On Android is has enormous padding by default:
Not a problem - I'll set a right and left padding, and a height:
amountInput: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
height: 30,
paddingRight: 5,
paddingLeft: 5,
color: 'rgba(255, 255, 255, 0.9)',
}
Looks good on iOS:
But Android messes up:
How can I make an Android input box like the penultimate iOS screenshot? Thanks.
643
Firstly Let's import React Native default TextInput to our code. Inside our component state we will define two properties value & height. value to hold our TextInput value & height to control our TextInput height.
Add the method submitAndClear to our class and set the <button /> component's onPress prop to this. submitAndClear. Change the <button /> component's title prop to the string 'Submit' Add the prop clearButtonMode='always' to the <TextInput /> component — this will give us an option to clear the text at any time.
TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.
Use caretHidden={true} if you want to disable all operation like Cut Paste Copy. It will also hide your cursor as well.
Android adds some default padding on top and bottom, you can reset them by adding paddingVertical: 0 to your element' style.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
