Nativebase: Input Floating Label Not Floating when updating state

Created on 9 Jun 2018 · 7Comments · Source: GeekyAnts/NativeBase

Environment:
OS: macOS 10.14
Node: 10.0.0
Yarn: Not Found
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4 Build version 9F1027a
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

NativeBase Version:
"native-base": "^2.5.1"

Expected behaviour

Floating Label would float when user is typing

Actual behaviour

Floating Label floats then unfloats

Steps to reproduce (code snippet or screenshot)

<Form marginRight={16}> <Item floatingLabel> <Label style={{ fontFamily: Fonts.RalewayRegular }}> Username </Label> <Input returnKeyType="next" clearButtonMode="always" autoCapitalize="none" autoCorrect={false} style={{ fontFamily: Fonts.RalewayRegular }} onChangeText={(text) => { this.handleUsernameInput(text) }} /> </Item> <Item floatingLabel> <Label style={{ fontFamily: Fonts.RalewayRegular }}> Email </Label> <Input returnKeyType="next" clearButtonMode="always" autoCapitalize="none" autoCorrect={false} style={{ fontFamily: Fonts.RalewayRegular }} onChangeText={(text) => { this.props.dispatch({ type: SIGNUP_EMAIL, email: text }) if (this.props.emailReducer.email != null) { this.validateEmail(this.props.emailReducer.email) } }} /> </Item> <Item floatingLabel> <Label style={{ fontFamily: Fonts.RalewayRegular }}> Password </Label> <Input returnKeyType="go" clearButtonMode="always" autoCapitalize="none" autoCorrect={false} secureTextEntry={true} style={{ fontFamily: Fonts.RalewayRegular }} onChangeText={(text) => { this.props.dispatch({ type: SIGNUP_PASSWORD, password: text }) }} /> </Item> </Form>

Screenshot of emulator/device

screen shot 2018-06-09 at 12 58 14 pm

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

Both

awaiting response

Source

qin-guan

Most helpful comment

@QinGuan2004 add value props with <Input/>.

Code

import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Label } from 'native-base';

export default class App extends Component {

  state = { username: "", email: "", password: "" }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input
                returnKeyType="next"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                value={this.state.username}
                onChangeText={(text) => this.setState({ username: text })} />
            </Item>
            <Item floatingLabel>
              <Label>Email</Label>
              <Input
                returnKeyType="next"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                value={this.state.email}
                onChangeText={(text) => this.setState({ email: text })} />
            </Item>
            <Item floatingLabel>
              <Label>Password</Label>
              <Input
                returnKeyType="go"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry={true}
                value={this.state.password}
                onChangeText={(text) => this.setState({ password: text })} />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

Gif

floatinglabel

akhil-geekyants on 11 Jun 2018

🎉2 👍2

All 7 comments

@QinGuan2004 add value props with <Input/>.

Code

import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Label } from 'native-base';

export default class App extends Component {

  state = { username: "", email: "", password: "" }

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input
                returnKeyType="next"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                value={this.state.username}
                onChangeText={(text) => this.setState({ username: text })} />
            </Item>
            <Item floatingLabel>
              <Label>Email</Label>
              <Input
                returnKeyType="next"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                value={this.state.email}
                onChangeText={(text) => this.setState({ email: text })} />
            </Item>
            <Item floatingLabel>
              <Label>Password</Label>
              <Input
                returnKeyType="go"
                clearButtonMode="always"
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry={true}
                value={this.state.password}
                onChangeText={(text) => this.setState({ password: text })} />
            </Item>
          </Form>
        </Content>
      </Container>
    );
  }
}

Gif

floatinglabel

akhil-geekyants on 11 Jun 2018

🎉2 👍2

Worked for me!