Redux-form, Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

Question

I am using a custom component in a redux-form field as follows.

<Field name="height" parse={value => Number(value)} component={NumberInput} />

The custom component uses React Native's TextInput component and it looks like this:

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, TextInput, StyleSheet } from 'react-native';
import { COLOR_PRIMARY } from '../constants';

const styles = StyleSheet.create({
  inputStyle: {
    height: 30,
    width: 50,
    marginBottom: 10,
    borderColor: COLOR_PRIMARY,
    borderWidth: 2,
    textAlign: 'center',
  },
  errorStyle: {
    color: COLOR_PRIMARY,
  },
});

const NumberInput = (props) => {
  const { input: { value, onChange }, meta: { touched, error } } = props;
  return (
    <View>
      <TextInput
        keyboardType="numeric"
        returnKeyType="go"
        maxLength={3}
        style={styles.inputStyle}
        value={value}
        onChangeText={onChange}
      />
      {touched &&
        (error && (
          <View>
            <Text style={styles.errorStyle}>{error}</Text>
          </View>
        ))}
    </View>
  );
};

NumberInput.propTypes = {
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.string,
  }).isRequired,
  input: PropTypes.shape({
    // value: PropTypes.any.isRequired,
    onChange: PropTypes.func.isRequired,
  }).isRequired,
};

export default NumberInput;

I want to store the the value entered for the height field as a Number and not a String type. Hence I am using parse to convert String to a Number as you can see in the Field.

I am able to do this but keep getting the Yellow Box warning of:

 Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

Have tried setting the value PropType to any, string, number, or oneOfType string or number, nothing seems to work. Have also tried setting type="number" in the Field and TextInput, as well as type="text".

Any help appreciated...

Answer 1

Basically, in your props you are passing numerical value of value.You have to passed it in the form of string.You can edit your code like this:

<TextInput
  keyboardType="numeric"
  returnKeyType="go"
  maxLength={3}
  style={styles.inputStyle}
  value={`${value}`} //here
  onChangeText={onChange}
/>