Formik: React Native with Typescript - void has no call signature

Created on 23 Sep 2019 · 4Comments · Source: formium/formik

🐛 Bug report

Current Behavior

I cannot chain the handleChange function and call it again because the types say that it may return void, this is also giving me that error when trying to put that function in my input's onChangeText method

Expected behavior

handleChange is always returning a function so it shouldn't have void in its return types

Reproducible example

I got this error while using the useFormik hook with React Native and using the handleChange method provided by the useFormik hook

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.1-rc.13
| React | 16.9.0
| React Native | 0.60.5
| TypeScript | 3.6.3
| Browser | Chrome
| npm/Yarn | Yarn 1.17.3
| Operating System | Mac OS

TypeScript stale

Source

idanlo

👍14 🚀1

Most helpful comment

the workaround suggested by @PawelJ-PL works and you can use it to make your own useFormik hook like this:

import { useFormik, FormikConfig } from "formik"

export default <V>(config: FormikConfig<V>) => {
  const value = useFormik(config)

  type UsableType = {
    handleChange: (name: string) => (text: string) => void
    handleBlur: (name: string) => (event: any) => void
  } & typeof value

  return value as UsableType
}

mbaroukh on 29 Feb 2020

🚀2 👍1

All 4 comments

I've the same issue. Temporary workaround for me is:

onChangeText={formik.handleChange('email') as (text: string) => void}
onBlur={formik.handleBlur('email') as (event: any) => void}

PawelJ-PL on 15 Jan 2020

For a while, you are able to use render props approach instead of useFormik. Unlike useFormik it has correct typings.

If it fits your needs.

enheit on 17 Feb 2020

the workaround suggested by @PawelJ-PL works and you can use it to make your own useFormik hook like this:

import { useFormik, FormikConfig } from "formik"

export default <V>(config: FormikConfig<V>) => {
  const value = useFormik(config)

  type UsableType = {
    handleChange: (name: string) => (text: string) => void
    handleBlur: (name: string) => (event: any) => void
  } & typeof value

  return value as UsableType
}

mbaroukh on 29 Feb 2020

🚀2 👍1

Up ! Is there any news on this ?