Unusable 8dp space in the bottom
Opened this issue · 1 comments
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}
/>
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.