Icon problem when using Redux Form with NativeBase

Environment :

• react-native 0.55.3
• react 16.3.1
• native-base 2.4.4
• redux-form 7.3.0

I am using NativeBase in a Redux Form field and I want to use Icon component to display a red cross when the field has a validation error.

But I have a strange behaviour you can see on this screenshot (tested on iOS simulator) :

It tries to display two icons, one OK, one wrong.

I also have warnings like this one in the console :

Warning: Failed prop type: Invalid prop `name` of value `caption` supplied to `Icon`, expected one of ["ios-add",...

So it looks like it tries to display a second Icon with the Redux Field name as name.

Here is the code of my form component :

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button,  Content,  Form,  Icon,  Input,  Item,  Label,  Text } from 'native-base'
import { reduxForm, Field } from 'redux-form'

class CompetitionForm extends Component {

  static propTypes = {
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
  }

  _renderInput = ({  input, label, keyboardType, meta: { touched, error, warning } }) => {

    let hasError = false
    if (touched && error !== undefined) {
      hasError = true
    }

    return (
      <Content>
        <Item floatingLabel error={hasError}>
          <Label>{label}</Label>
          <Input {...input} keyboardType={keyboardType} />
          {
            hasError && <Icon name="close-circle" />
          }
        </Item>
        {
          hasError && <Text style={{ color: 'red' }}>{error}</Text>
        }
      </Content>
    )
  }

  render() {
    return (
      <Form>
        <Field
          name="id"
          component={this._renderInput}
          label="id"
          keyboardType="numeric"
        />
        <Field
          name="caption"
          component={this._renderInput}
          label="nom"
        />
        <Field
          name="numberOfTeams"
          component={this._renderInput}
          label="nombre d'équipes"
          keyboardType="numeric"
        />
        <Content padder>
          <Button block onPress={this.props.handleSubmit(this.props.onSubmit)}>
            <Text>Valider</Text>
          </Button>
        </Content>
        <Content padder>
          <Button block light onPress={this.props.onCancel}>
            <Text>Annuler</Text>
          </Button>
        </Content>
      </Form>
    )
  }
}

const validate = (values) => {
  const errors = {}
  if (!values.id) {
    errors.id = 'veuillez saisir un id'
  }
  if (!values.caption) {
    errors.caption = 'veuillez saisir un nom'
  }
  if (!values.numberOfTeams) {
    errors.numberOfTeams = 'veuillez saisir un nombre d\'équipes'
  }
  return errors
}

export default reduxForm({
  form: 'competition',
  validate,
})(CompetitionForm)

Is there something I do wrong ? Or is there a bug with either Redux Form or NativeBase Icon component ?

[vanskins]

Hi this bug is still existing today. As I try to create an APK for my app this bug happens.

[SupriyaKalghatgi]

Fixed with v2.5.2