Using a HOC input breaks the proper use of the "Item" component with a floatingLabel

[gvarandas]

This issue appeared when I tried to insert a mask on the "Input" component, which was accomplished by the use of a Higher Order Component. This, on the other hand, changed the type of the Input to the "MaskedInput", which was the HOC type and by doing so, the floating label item stopped to recognize the "inputProps" and to pass them through to the Input child.

react-native, react and native-base version

React 16.0.0, React-Native 0.51.0, Native-Base 2.5.1

Expected behaviour

Higher Order Components wrapping "Input" components should work inside the "Item" component using the "floatinglabel" prop (or whatever other props, tbh).

Actual behaviour

The "Item" component does not recognize the input props because the type of the component is no more "Input", but the HOC type.

Steps to reproduce (code snippet or screenshot)

HOC Snippet (just adding a console.log to the "onChangeText" method)

const withLog = (BaseInputComponent) => {
  class LoggingInput extends Component {
    onChangeText = (value) => {
      console.log('### LoggingInput onChangeText ###', value);
      if (this.props.onChangeText) {
        this.props.onChangeText(value);
      }
      return value;
    }

    render() {
      const props = {
        ...this.props,
        onChangeText: this.onChangeText,
      };

      return (
        <BaseInputComponent {...props} />
      );
    }
  }

  LoggingInput.propTypes = {
    ...BaseInputComponent.propTypes,
  };

  LoggingInput.displayName = 'Styled(Input)';

  return LoggingInput;
};

Example Page Snippet (using the HOC inside an Item Component)

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

import withLog from './_withLog'; // The aforementioned HOC

const LoggingInput = withLog(Input);

export default class ExamplePage extends Component {
  static navigationOptions = {
    title: 'Input Test Page',
  };

  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  onChangeText = (value) => {
    this.setState({
      text: value,
    });
  };

  render() {
    return (
      <Container>
        <Content>
          <Form>
            <Item fixedLabel>
              <Label>FixedLabel</Label>
              <LoggingInput onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
            <Item floatingLabel>
              <Label>Floating HOC 1</Label>
              <LoggingInput onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
            <Item fixedLabel>
              <Label>FixedLabel</Label>
              <LoggingInput onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
            <Item floatingLabel>
              <Label>Floating HOC 2</Label>
              <LoggingInput onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
            <Item stackedLabel>
              <Label>Stacked Label</Label>
              <LoggingInput onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
            <Item floatingLabel>
              <Label>Floating Input</Label>
              <Input onChangeText={this.onChangeText} value={this.state.text} />
            </Item>
          </Form>
          <Text>State Text: {this.state.text}</Text>
        </Content>
      </Container>
    );
  }
}

Screenshot of emulator/device

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

Any of the platforms.

Any other additional info which would help us debug the issue quicker.

I filed a PR detailing the issue and proposing a solution (basically changing the assertion method to use the "displayName" prop instead of type.

[SupriyaKalghatgi]

Fixed with 2.7.2

[gvarandas]

@SupriyaKalghatgi is this really fixed? The PR is not merged yet on the 2.7.2 release.

[SupriyaKalghatgi]

Added with 2.8.0