Nativebase: floatingLabel set default value?

[fbacker]

react-native, react and native-base version

react: 15.4.2
react-native: 0.42.3
native-base: 2.1.0

Expected behaviour

When setting "value" on

Actual behaviour

The floating label is above the

Steps to reproduce

    <Item floatingLabel>
              <Label>Förnamn</Label>
              <Input keyboardType='default'
              returnKeyType='next'
              autoFocus={false}
              autoCorrect={false}
              multiline={false}
              onChange={(event) => {
                let text1 = event.nativeEvent.text;
                self.setState({textFirst:text1});
              }}
              value={this.state.textFirst} />
            </Item>

Screenshot of emulator/device

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

Only tested ios

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

Create a view with a floatingLabel and set a default value.

[iambanh2]

I got problems

[GeekRishabh]

@iambanh2 @fbacker seems to work fine .

[fbacker]

@GeekRishabh if you add this to the Input

value={this.state.selected1}

now when running it should have moved 'Förnamn' up and written 'key1' in the input. This does not happen :(

[cristian-milea]

i have the same problem. pre-filled inputs with floatingLabel doesn't floatUp the label

[sarahmarciano]

+1 I have the same problem

[redwind]

same problem, too

[jlcrow]

+1 fields falling with value populated when form renders

[jlcrow]

I'm also using redux-form for managing state. A bit of a pain, looks like NB is managing the state of the label in the Item component and don't check in the constructor if there are values in the component. When you submit and come back to the view with errors or pre-populate the view with input text you lose the internal component state that's holding the text value. I just switched the type on the Item component from using a "floatingLabel" to a "stackedLabel", they look the same when there's text present in the Input.

A little hackish, but needed a fix:
Add a constructor on your component so it's only run on component creation.

constructor(props) {
      super(props);
      const { input } = props;
      this.hasValue = false;
      if (input.value !== undefined && input.value.length > 0) {
        this.hasValue = true;
      }
  }

In your render use the hasValue variable to determine which label to render:

    render() {
          const { input, secureTextEntry, label, meta: { touched, error }, ...custom } = this.props;
          <Item
             error={hasError}
             stackedLabel={this.hasValue}
             floatingLabel={!this.hasValue}
            >
              <Label>{label}</Label>
                <Input {...input} {...custom} />
            </Item>
          }

        ...

[Gary-Li]

+1 have same problem too.

[shivrajkumar]

627

[ital0]

Same problem here. Works fine on iOS emulator, but when I go to device, doesn't work. :(

[prionkor]

I am having the same issue for the version 2.12.1

[suhail135]

I am having the same issue for the version 2.13.13