CODEWITHSUNDEEP
iosreact-nativetextinput
crestinglight
crestinglight

Reputation: 331

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

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?

Upvotes: 3

Views: 2996

Answers (1)

Charlotte_Anne
Charlotte_Anne

Reputation: 382

I think you have something overriding normal behavior for height and lineHeight on IOS. Either setting lineHeight or setting height for a textInput in react native works for me on IOS. I suggest setting one of those to a size at least as big as your fontSize and then commenting out lines in your styling to figure out which one is causing it by process of elimination. Here's an example of styling that works in one of my projects:

         <TextInput style={styles.inputsTwo}
                accessible={this.state.access}
    placeholder="Email"
    clearButtonMode="always"
            onChangeText={text => this.setState({email: text})}
            value={this.state.email}
    />
    <TextInput style={styles.inputs}
                accessible={this.state.access}
    placeholder="Password"
    secureTextEntry={true}
    clearButtonMode="always"
            onChangeText={text => this.setState({password: text})}
            value={this.state.password}
    />

and then in styles I have:

   inputs: {
     textDecorationLine: 'underline',
     marginBottom: 5,
     textAlign: 'left',
     marginLeft: 30,
     marginRight: 30,
     borderBottomColor: '#808080',
     borderBottomWidth: 2,
     height: 48,
     fontSize: 48
 },
   inputsTwo: {
    textDecorationLine: 'underline',
    marginBottom: 10,
    textAlign: 'left',
    marginLeft: 30,
    marginRight: 30,
    borderBottomColor: '#808080', 
    borderBottomWidth: 2,
    height: 48,
    fontSize: 48
},

Upvotes: 2

Related Questions