Unusable 8dp space in the bottom

[murtraja]

Hello,

While trying to align TextField with my other components, I found that TextField uses and extra 8dp space. So I had to give a negative margin of 8dp to get the alignment right.

I played a lot with the component to find that this might be caused by:

let helperContainerStyle = {
      flexDirection: 'row',
      height: (title || limit)?
        titleFontSize * 2 * titleFontSizeMultiplier:
        focus.interpolate({
          inputRange:  [-1, 0, 1],
          outputRange: [titleFontSize * 2 * titleFontSizeMultiplier, 8, 8],
        }),
    };

Please note: I am not setting any title nor I am setting any limit (characterRestriction)

Although, this issue is easily fixable, is there a long term solution that can be derived? Like if there isn't any helper to be shown, simply don't have any height?

Code containing workaround:

<TextField
    label={'Enter mobile number'}
    labelHeight={16}
    inputContainerPadding={10}
    tintColor={this.state.validation? colorresource.darkred : colorresource.liteblue}
    containerStyle={{marginBottom: -8}}  <---- WORKAROUND
    {...testId("Mobile","Input")}
    keyboardType="number-pad"
    maxLength={10}
    onSubmitEditing={this.validateLogin}
    value={this.state.mobileNumber}
    onChangeText={this.onChangeText}
    labelTextStyle={this.state.validation? 'red' : undefined}
    baseColor={this.state.validation? 'red' : undefined}
    fontSize={13}
    inputContainerStyle={{marginLeft: 5}}
    autoFocus={true}
/>

[mkhoussid]

I took the same approach. I'm implementing a search functionality in the header, and this textfield adds an unnecessary margin at the bottom (and top) of the main container component.

Anyway, I had to add containerStyle={{ marginBottom: -23, marginTop: -23 }}. Not sure how this will look on other devices though, I'll look into it later.