Nativebase: Input with floating label: label does not float up while input is non-empty

[slorber]

react-native, react and native-base version

iOS + Android

    "expo": "^18.0.1",
    "native-base": "2.2.0",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz",

Expected behaviour

I mount an empty input with a floating label, and just some milliseconds after mount, I populate it async with a value coming from AsyncStorage.

The label is supposed to float up when there's a value

Actual behaviour

In this case, the label does not float up when the value gets populated async, leading to the label being rendered on top of the input value. Afterward (on focus/type) the label floats up/down correctly

Reproduce

Here's the code I use for the input

import { Item, Input as NativeBaseInput, Label } from 'native-base';

export const Input = ({ placeholder, error, ...props }) => {
  const color = Colors.getColor(props);
  return (
    <View width="100%">
      <Item floatingLabel style={{ borderColor: color }}>
        <Label style={{ color: color }}>
          {placeholder}
        </Label>
        <NativeBaseInput style={{ color: color }} {...props} />
      </Item>
      <View height={Texts.FormError.fontSize}>
        {error &&
          <Texts.FormError>
            {error}
          </Texts.FormError>}
      </View>
    </View>
  );
};


// This retrieves value from AsyncStorage and put it in state async
  componentDidMount () {
    LastAuthEmail.get().then(email => this.setState({ email }));
  }


// This is how the input is used
          <Input
            marginTop={verticalSpacing}
            placeholder="Email"
            keyboardType="email-address"
            value={email}
            onChangeText={text => this.setState({ email: text })}
            error={errors.email}
          />

[akhil-geekyants]

checked the issue, it is working fine.

[Thram]

No is not, I have the same issue on Android on version 2.3.3 :(

[akhil-geekyants]

@Thram checked the floating label on Android device with native-base version 2.3.3. It is working fine.

Gif

[slorber]

@akhil-geekyants you are only testing label floating up in regular scenario, while this bug is about mounting an empty input, and setting some text in componentDidMount with a controlled input.

Your gif test is not relevant for this issue.

[akhil-geekyants]

@slorber @Thram checked after setting state in componentDidMount(). It is working fine.

Gif

[slorber]

I can confirm my initial problem does not happen anymore in 2.3.3, will reopen if this happens again

[slorber]

come back as this issue has actually not been fixed in 2.3.3 in my app, it has been reported to happen again

[SupriyaKalghatgi]

627

[victorwads]

I'm still having this problem, when the input layout starts with data, the floating label just "get up" after the first focus/blur
Ps.: This not happens on Emulator, just real devices

[suvenduchhatoi]

@slorber @victorwads and any others still having the issue :Please upgrade your "react-native" and "native-base" versions...and check...An example code for you below...should work perfectly fine both in Ios and Android... Label floats up perfectly-

import React, { Component } from "react";
import { StyleSheet, View, TextInput } from "react-native";
import {
  Container,
  Content,
  Form,
  Item,
  Input,
  Label,
  Text,
  Left,
  Right,
  Body,
  Card,
  CardItem,
  Button,
  Separator,
  Icon,
} from "native-base";

const styles = StyleSheet.create({
  label: {
    fontSize: 15,
    color: "#fff",
    lineHeight: 20,
  },
});
export default class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: { name: "", email: "", password: "" },
    };
  }
  updateValue(text, field) {
    const { data } = this.state;
    data[field] = text;
    this.setState({
      data,
    });
  }

  submit() {
    //Action
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Container
          style={{
            margin: 10,
            marginTop: 40,
          }}
        >
          <Content>
            <Card
              style={{
                backgroundColor: "green",
                margin: 20,
              }}
            >
              <Left />
              <Body>
                <CardItem
                  header
                  bordered
                  style={{
                    margin: 10,
                  }}
                >
                  <Text>
                    <Icon active name="home" />
                    REGISTRATION FORM
                  </Text>
                </CardItem>
              </Body>
              <Right />
              <Form
                style={{
                  margin: 20,
                }}
              >
                <Item floatingLabel>
                  <Label style={styles.label}>Username</Label>
                  <Input
                    style={styles.label}
                    onChangeText={text => this.updateValue(text, "name")}
                  />
                </Item>
                <Item floatingLabel>
                  <Label style={styles.label}>Email</Label>
                  <Input
                    autoCapitalize={"none"}
                    style={styles.label}
                    onChangeText={text => this.updateValue(text, "email")}
                  />
                </Item>
                <Item floatingLabel>
                  <Label style={styles.label}>Password</Label>
                  <Input
                    autoCapitalize={"none"}
                    style={styles.label}
                    onChangeText={text => this.updateValue(text, "password")}
                  />
                </Item>
              </Form>
            </Card>
            <Button full primary onPress={() => this.submit()}>
              <Text> REGISTER </Text>
            </Button>
          </Content>
        </Container>
      </View>
    );
  }
}