Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input Floating Label Not Floating when updating state

See original GitHub issue

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)

                    <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

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

Both

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

akhil-gacommented, Oct 15, 2019

@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

0reactions

ekenedurucommented, Sep 13, 2018

I am having the same issue

Top Results From Across the Web

reactjs - React and CSS-IN-JS - float labels not detecting the ...

In order to decide if the label should be moved up I use the state of the input and if its length >...

How to transition placeholder text into a label in React ...

Floating label inputs are input fields whose placeholder text animates into a label when you start typing. You might recognize this pattern ...

Floating labels · Bootstrap v5.0

Create beautifully simple form labels that float over your input fields.

React Labels Library & Floating Label Component - Overview

The FloatingLabel component enables you to provide a floating label functionality to React components. It supports labelling both form elements (e.g.: input ......

react-native-floating-label-input - npm

Start using react-native-floating-label-input in your project by ... use the new react-native-reanimated v2, do not upgrade to this version, ...