Nativebase: Floating label cut off

[Gerharddc]

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.

[sarahmarciano]

+1 I have the same issue, and it happened when I've upgraded react-native to 0.52.0

[tindery]

I'm having same issue, also after upgrading to 0.52

[carathorys]

Same issue here :(
Is there any way to solve it without downgrading the react-native version?

Thanks :)

[akhil-geekyants]

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

Gif

[ViktorAksionov]

I found out that Label has hard coded value for top.
In my case I did something like this to fix it:

    let top = 0;
    if ( active || input.value.length > 0) {
      top = 16;
    }

where active is meta field from redux-form

<Label style={{top}}>{labelText}</Label>

[ViktorAksionov]

Looks like it's an issue with Item component.
If you replace lineHeight from 30 to 50 here then it will not cut off Label.

Can somebody check why it has wrong value?

[SupriyaKalghatgi]

sure

[pennyandsean]

@akhil-geekyants I appreciate the tip however a fix would be better. Want a PR?

[SupriyaKalghatgi]

@pennyandsean There is a PR for this

[SupriyaKalghatgi]

Fixed with 2.3.8

[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;
};

[akhil-geekyants]

@raajnadar checked this with native-base : 2.4.1. Couldn't see this. Posting code.
Code

import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Label } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input />
            </Item>
            <Item floatingLabel last>
              <Label>Password</Label>
              <Input />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

Video

cutoff.mp4.zip

[SupriyaKalghatgi]

@raajnadar Probably you dd'nt eject theme after updating NativeBase version

[raajnadar]

@SupriyaKalghatgi will the existing changes be overwritten after ejecting??

[ViktorAksionov]

@raajnadar
Ejecting just doing a simple copying, it's not a merging process, so yeah, you will loose your data in case if you ejected before and modified them.

[SupriyaKalghatgi]

@raajnadar Yes, if there is any update in native-base/src/theme, then existing changes will be overwritten on ejecting theme
This is not merge process

[NaveenJayaram94]

I also faced same issue,

Remove
lineHeight: 18
property from component style , if you have given.
it worked for me

[SupriyaKalghatgi]

@NaveenJayaram94 You mean, modifying in ejected theme and not updating NativeBase version?

[NaveenJayaram94]

@SupriyaKalghatgi
Native base theme works fine, doesn't need modification,
remove it from custom styles you have given to Lable or Item Component, if any.

[SupriyaKalghatgi]

@NaveenJayaram94 Yes, no need of embedding inline styles here