react-hook-form: React Native: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`.

Describe the bug Any input in either form field first throws the warning Warning: Failed prop type: Invalid prop valueof typenumbersupplied toTextInput, expected string in TextInput (at Login.js:21)

Then, if the input is submitted, the app crashes with the following error:

JSON value '{
    firstName = 7;
    lastName = 15;
}' of type NSMutableDictionary cannot be converted to NSString

To Reproduce Steps to reproduce the behavior:

Copy the react-native form example into an empty project.
Launch the app in an ios simulator (iPhone 11, ios 13.0 used). I haven’t tested in android, yet.
Input text into the First Name field. Notice the simulator Yellowbox warning.
Press button to submit the form.

Expected behavior Expected the input to throw no warning. Then, on submit, the app pops an alert box that displays “Form Data” and the data output of the form.

Screenshots form-submit-error

Desktop (please complete the following information):

OS: Mac OS 10.15.1 (19B88)
Version [e.g. 22]

Smartphone (please complete the following information):

Simulator: iPhone 11
OS: ios 13.0

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (9 by maintainers)

Most upvoted comments

Hello, @stephenfjohnson I resolve it using String() to wrap the value <TexInput value={String(value)} keyboardType={‘numeric’} … />. Maybe this article can help you https://aboutreact.com/warning-invalid-prop-value-of-type-number-supplied-to-textinput-expected-string/

Screenshot_20200622-220954_Expo

+12

JuantonLab on Jun 23, 2020

I tried to make it work like this:

<TextInput
            keyboardType={'numeric'}
            value={result.toString()}     //this
            onChangeText={(text) => setResult(text)}
          />

and it works fine.

amit13091992 on Oct 1, 2020

If you have any text input check the type. In my case I had this:

keyboardType={'phone-pad'}

Then I changed to

keyboardType={'numeric'}

zooboole on Apr 27, 2020

I noticed that the warning appears when there is no onChange property with “args [0] .nativeEvent.text”. I solved the problem added this prop. Example:

<Controller
    as={<TextInput />}
    control={control}
    rules={{ required: true }}
    name="name"
    onChange={args => {
        return {
             value: args[0].nativeEvent.text,
        };
    }}
    defaultValue=""
/>

fxamauri on Feb 6, 2020

Here is a screenshot of the warning.

I have this warning after upgrade expo to ^37.0.0. The other project with expo ^36.0.0 have no issue. Please advice for expo 37. Thanks a lot!

johnlai1011 on May 8, 2020