Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native TextInput rendering text too high on iOS, cutting off the tops of some characters

$
0
0

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:

Android rendering properly

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:

iOS rendering improperly

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?


Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>