Floating label cut off

react-native, react and native-base version

• React-Native 0.52.0

• React: 16.2.0

• Native-Base: 2.3.7

Expected behaviour

When using an input with a floating label, the entire label should be visible when floating.

Actual behaviour

Once the label starts floating, the top half of the label is cut off.

Steps to reproduce (code snippet or screenshot)

Something as simple as the following basic case causes it:

<Form>
  <Item floatingLabel>
    <Label>Test</Label>
    <Input />
  </Item>
  <Item floatingLabel>
    <Label>Test</Label>
    <Input />
  </Item>
  ...
</Form>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

I am not able to test it on iOS at the moment.

Any other additional info which would help us debug the issue quicker.

It used to work a while ago but I only noticed it is broken now, not sure on which version it broke.

[akhil-ga]

@carathorys you can add some padding to the top for <Label/>.

Gif

[raajnadar]

This is still in Native base 2.4.1 This will be very helpful instead of hard coding in each form.

Put a padding in the theme/components/Label.js file the path may be different for you

import variable from "./../variables/platform";

export default (variables = variable) => {
	const labelTheme = {
		".focused": {
			width: 0
		},
		fontSize: 17,
		paddingTop: 2 // This much is enough to fix
	};
	return labelTheme;
};