Nativebase: Datepicker with Item floatingLabel not working

[italomlp]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [x] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] 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.

[n-sviridenko]

I assume <Item /> was implemented only for <Input /> (based on examples). But it would be nice to be able to put anything inside.

[italomlp]

Hmm, really... But makes sense to put a Datepicker inside it if we want it in a form, or one component that is a Datepicker form input. Maybe so, it could be a good feature to be implemented in NativeBase.

[copleykj]

Would be super nice to have all the elements that are traditionally form elements be able to be treated as such. While I understand that mobile UI tends the checkbox/radio button towards being in a list, it would be nice to be able to have a checkbox also be able to have a label and be part of a form.

[anish-adm]

FYI, showDatePicker() worked very well for me @italomlp .
I simply gave reference to my DOB DatePicker as ref={component => this.dobPicker = component} and called this.dobPicker.showDatePicker(), and it worked.

[ninnemannk]

I am seeing this as well.

After debugging for quite some time, it seems that the DatePicker component is never even rendered when used with floatingLabel. As you can see, in the Item component, the children are always re-rendered as Input when using stackedLabel and floatingLabel.

https://github.com/GeekyAnts/NativeBase/blob/2e4d41483dd15e3f3e871b2c1a995c8d3a466fcb/src/basic/Item.js#L114

It would be nice if this component was capable of more than just Input. Otherwise, keeping styling consistent is not easy.

[italomlp]

@anish-adm This is not the way that I want to use it. I would like to treat the Datepicker as an Input.

@ninnemannk Exactly. This is the point.

[italomlp]

Any updates here? I can help, if needed.

[prionkor]

Any update on this issue?

[iranmarcius]

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.

[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!

[hanykumar]

Hi @italomlp , Feature FloatingLabel is limited for now. You can use inlineLabel. Closing this for now.