floatingLabel HOC issues

"react": "
"react-native": "0.50.3",
"native-base": "^2.3.7",

Hello there. I am using redux-form and styled-components, and I have to apply 2 HOCS (one for <Field> from redux-form, and the second one from styled-components). And seems that floating labels don’t like that.

Expected behaviour

Using HOC inside of <Item floatingLabel> (such as styled-components, or redux-form text input wrapper) should still work. This is the case only when using floatingLabel prop.

Currently I am unable to change TextInput’s color in any way. Label’s color changing works only with style attribute, however I would prefer to use styled-components (if I do that Label is invisible) ** Everything is working as expected without floatingLabel prop**

Actual behaviour

1. I am unable to change TextInput’s color by any way
2. The <Label> is invisible if styled-components are used

Steps to reproduce

1. Create a wrapper for redux-form ready Input

import React from 'react';
import { Input as BaseInput } from 'native-base';

export function Input(props) {
  const { input, ...rest } = props;
  console.log(props);

  return (
    <BaseInput
      {...rest}
      onChangeText={input.onChange}
      onBlur={input.onBlur}
      onFocus={input.onFocus}
      value={input.value}
    />
  );
}

1. Create another custom component which is the whole <Item>

import React from 'react';
import { Item, Label } from 'native-base';
import { Input } from '@common';
import styled from 'styled-components';

const fieldLabelColor = 'rgba(255, 255, 255, .85)';

const FieldItem = styled(Item)`
  margin-bottom: 12px;
  margin-left: 0;
  width: 100%;
`;

// This will render the label invisible
const FieldLabel = styled(Label)`
  color: fieldLabelColor;
`;

// This won't have any effect and the text input will still be white
// The same thing would occur on passing style attribute to the Input
const FieldInput = styled(Input)`
  color: #fff;
`;

// Using only styles on Label works fine, however Label as styled-component is invisible
// const labelStyles = {
//   color: fieldLabelColor,
// };

export default function LoginStackFieldFloating({ label, ...rest }) {
  return (
    <FieldItem floatingLabel>
      <FieldLabel>{label}</FieldLabel>
      <FieldInput {...rest} />
    </FieldItem>
  );
}

1. Use it in as component attribute of redux-form’s <Field> tag.

<Field component={LoginStackFieldFloating} name="something" />

Hopefully that makes sense. On Monday I’ll do more testing

Best regards.

[SupriyaKalghatgi]

@ppozniak true

[SupriyaKalghatgi]

@ppozniak Either keep the issue open if you need help Or close it, if you are planning to implement this sometime later