Nativebase: Icon problem when using Redux Form with NativeBase

Created on 21 May 2018 · 13Comments · Source: GeekyAnts/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 ?

bug

Source

chawax

All 13 comments

@chawax NativeBase Icon should not have issues when used with redux form

I could not find the icon names that you tried to render

Can you share the icon names?

SupriyaKalghatgi on 21 May 2018

I use close-circle icon and it displays well actually.
But there's a second icon that is rendered, the one with the question point on the screenshot. And it looks like it has the Redux Form field name as name. If you have a look on the warnings, it tries to set icons with id and caption name, which are the names of my fields. Very strange. It looks like Field redux form component looks for all name properties in children and set them with the field name.

chawax on 21 May 2018

I can find just this line where you are trying to display icon

<Icon name="close-circle" />

No where else

SupriyaKalghatgi on 21 May 2018

you can check https://reactnativeseed.com/

SupriyaKalghatgi on 21 May 2018

@SupriyaKalghatgi Yes, I just add one Icon component in my code, that's why I don't understand why I have twice.

I just noticed that it works well if I remove floatingLabel property on my Item component ! So it looks like a problem with floating labels ?

EDIT : An other problem if I use stackedLabel : the icon is not aligned on the right as you can see on this screenshot

chawax on 21 May 2018

lpongetti on 7 Jun 2018

Fixed with v2.5.2

SupriyaKalghatgi on 15 Jun 2018

👍1

Hi @SupriyaKalghatgi

I see this icon bug is fixed but I'm using custom icons( images ) right next to a floating label and they're not showing up . They do show up when using stackedLabels

It might be a minor fix. Can you please look into this?
Thanks!