Unable to Type in Field

Question

interface FormValues {
  friendEmail: string;
}

  const initialValues: FormValues = {
    friendEmail: \'\',
  };

export const Page: React.FunctionComponent

        

Answer 1

Formik's Field component doesn't support React native yet. Check this github issue for more details

However you can make use of TextInput in place of field and use it with onChangeText handler

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmitForm}
    validationSchema={validationSchema}>
    {({
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      values,
    }) => (
      <View>
        <View>
          <Item style={scaledAddFriendEmailStyles.searchField}>
            <TextInput
              placeholder="Email"
              onChangeText={handleChange('friendEmail')}
              onBlur={handleBlur('friendEmail')}
              value={values.friendEmail}
            />
          </Item>
        </View>
        <View >
          <Button 
          onPress={handleSubmit}
          >
            <Text >
              Add Friend{' '}
            </Text>
          </Button>
        </View>
      </View>
    )}
  </Formik>

you can read more about Formik's usage with react-native in its documentation here

Answer 2

try this:

<Input
  placeholder="Email"
  onChange={e => setFieldValue('friendEmail', e.currentTarget.value)}
  onBlur={handleBlur}
  value={values.friendEmail}
  autoCapitalize="none"
/>

Answer 3

I think there are a couple of issues in your codebase.

1. onChangeText={handleChange('friendEmail')}. It will trigger the handleChange while rendering the component not when you are actualy typing in the input box.
2. handleChange function of Formik takes React.ChangeEvent instead of value. Check here . While onChangeText of react-native provides changed text of the input not event. Check here

You can use setFieldValue function for this case:

<Formik
    initialValues={initialValues}
    onSubmit={handleSubmitForm}
    validationSchema={validationSchema}>
    {({
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
      values,
      setFieldValue
    }) => {
    const setEmail = (email) => {
      setFieldValue('friendEmail', email)
    }
    return (
      <View>
        <View>
          <Item style={scaledAddFriendEmailStyles.searchField}>
            <TextInput
              placeholder="Email"
              onChangeText={setEmail}
              value={values.friendEmail}
            />
          </Item>
        </View>
      </View>
    )
    }}
  </Formik>

Please Note: I've never used formik with react-native. Just trying to connect the dots.