Datepicker with Item floatingLabel not working

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

Software versions:

node v8.11.1, npm 5.6.0, react-native 0.57.1, react 16.5.0 and native-base 2.8.0

What is happening?

Expected to open Datepicker when click an Item floating label. But, when the Item has “floatingLabel” flag, Datepicker do not open anyway. I searched a lot here, in the docs and in StackOverflow, but seems that anyone experienced this before. When Item has no flag, it works pretty normal. I tried to call the showDatePicker() programatically, but the Datepicker seems do not accept “ref” or “getRef” props.

I tried to put an Input component too, to handle the Datepicker inside it, but no success. Is it a bug or I making something wrong?

What I really want is a form Input that is a Datepicker.

The code that I using:

import React, { Component } from 'react';
import { View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Creators as SignupActions } from 'store/ducks/signup';

import { Form, Item, Button, DatePicker, Label, Text, Icon } from 'native-base';

import PropTypes from 'prop-types';
import moment from 'moment';
import { Wrapper } from 'components';

import styles from './styles';

class Signup extends Component {
  static navigationOptions = {
    title: 'Cadastrar',
  };
  static propTypes = {
    signupRequest: PropTypes.func.isRequired,
  };
  state = {
    birthDate: new Date(),
  };

  handleSignup = () => {
    console.log(this.state);
  };

  handleBirthDate = (date) => {
    this.setState({ birthDate: moment(date).toDate() });
  };

  render() {
    return (
      <Wrapper>
        <Form style={styles.formContainer}>
          <Item floatingLabel>
            <Label>
              <Text>Data de aniversário</Text>
            </Label>
            <DatePicker
              defaultDate={new Date()}
              maximumDate={new Date()}
              locale="pt"
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={false}
              animationType="fade"
              androidMode="default"
              placeHolderText="Data"
              placeHolderTextStyle={{ color: '#d3d3d3' }}
              onDateChange={this.handleBirthDate}
            />
            <Icon name="ios-calendar" style={{ color: '#fff' }} />
          </Item>
          <Button onPress={this.handleSignup}>
            <Text>Cadastrar</Text>
          </Button>
        </Form>
      </Wrapper>
    );
  }
}

const mapDispatchToProps = dispatch => bindActionCreators(SignupActions, dispatch);

export default connect(null, mapDispatchToProps)(Signup);

• The Wrapper component is a NativeBase Container with black backgroundColor and padding of 5px.

I tested only in Android, because I can’t test in iOS with my computer, and don’t have an Iphone. But I believe that it occurs in iOS too.

[italomlp]

Any updates here? I can help, if needed.

[HugoLiconV]

I’m trying to use DatePicker inside Item too. Tested all label types. Here’s what I found out:

• floatingLabel: DatePicker doesn’t show
• stackedLabel: DatePicker shows aligned center.
• fixedLabel: DatePicker shows aligned right.
• inlineLabel: DatePicker aligned left but not one with each other

Seems to me that, apart from floatingLabel, everyghing else works. Would be nice if we could specify the input alignment for DatePicker.

Thanks! inlineLabel worked perfectly for me!