s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.87k stars 409 forks source link

Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`) React Native Expo #848

Open art3mHQ opened 3 months ago

art3mHQ commented 3 months ago

Got an error while running on ios React Native (Expo)

 ERROR  Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with a capital letter.

This error is located at:
    in input (created by NumberFormatBase)
    in NumberFormatBase (created by PatternFormat)
    in PatternFormat (created by PickUpForm)

after trying to use like that

<PatternFormat
    displayType="input"
    format="(###) ###-##-##"
    mask="_"
    onValueChange={(value) => setTel(value.formattedValue)}
    data-cy="phone"
    value={tel}
    placeholder="(099) 000-00-00"
/>

run into this issue only on ios

Chrome web version works fine

Mathitarazonad commented 3 months ago

I faced the same issue on mobile application, and I think it's because displayText="input" tries to render an <input /> element and React Native of course doesn't support this. So I fixed by changing displayText="text" and passed to the react-number-format component a renderText prop to handle an input component to change the value, like this:

  <PatternFormat
       displayType="text"
      format="(###) ###-##-##"
      mask="_"
      onValueChange={(value) => setTel(value.formattedValue)}
      data-cy="phone"
      value={tel}
      placeholder="(099) 000-00-00"
      renderText={(currentValue) => (<TextInput value={currentValue} />)}
  />
art3mHQ commented 3 months ago

Thank you for responce, but i cant manage to make it work like you show, it did not throw an error but did not accept any input and not showing place holder