I have a simple TextInput in my react native app. Here is the relevant code:
<View style={styles.AmountWrapper}>
<TextInput
multiline={true}
placeholder="$0"
placeholderTextColor={colors.black38}
style={styles.NumberInput}
keyboardType={"numeric"}
/>
</View>
let styles = StyleSheet.create({
AmountWrapper: {
flexDirection: "column",
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.white
},
NumberInput: {
flexDirection: "row",
alignItems: "center",
flex: 0,
fontFamily: styleHelper.fontFamily("medium"),
fontSize: 48,
paddingHorizontal: 16,
paddingTop: 0,
paddingBottom: 0,
color: colors.blue,
textAlign: "center",
borderWidth: 0,
textAlignVertical: "center"
},
});
I am emulating on both Android Studio Pixel 3 with Android 9.0, and with Xcode's simulator, simulating iOS 12.4 iPhone X.
On Android, this is rendering exactly how I want it:
The issue is with iOS. It's rendering the text far too high up, cutting off the top of the dollar sign, and a few pixels of the number. It does this both with the placeholder, and when the user enters text:
I have tried changing margin, padding, textAlign, lineHeight, flexDirection, alignItems, and justifyContent. I have also tried multiline={false}
within the TextInput.
How do I get iOS rendering the text further down and displaying properly within the TextInput?