Examples Needed

[SupriyaPKalghatgi]

Can you put up an example working with React-hook-form and its Controller?

[damian-balas]

It's simple:

1. Create a component and pass a name to it as props
2. Use 2 hooks like this:

const formContext = useFormContext();
  const { field } = useController({
    ...formContext,
    name,
  });

3. Important CodeField props:

<CodeField
    value={field.value}
    onChangeText={handleChange}
    cellCount={cellCount}
/>

4. handleChange function:

  const handleChange = text => {
      field.onChange(text);
  };

This are the basics. For custom separators you will need to create some logic to add it white text changes.

[TuvalZit18]

how do you handle the custom onChangeText in this example? onChangeText={e => { onChange(e); console.log("🚀", e); }} Every text change e is the value of text input. How can we add the (maskedText, unmaskedText, obfuscatedText) onChangeText handler in this case?

[sajorahasan]

Hi @TuvalZit18 you can use it like below:

<Controller
          control={control}
          name="workPhone"
          render={({ field: { onChange, onBlur, value, ref }, fieldState }) => (
            <TextField
              ref={ref}
              containerStyle={$textField}
              autoComplete="tel"
              keyboardType="phone-pad"
              placeholderTx="profile.workPhone"
              returnKeyType="next"
              status={fieldState.error?.message ? "error" : undefined}
              helper={fieldState.error?.message}
              onSubmitEditing={() => setFocus("practiceAreas")}
              onBlur={onBlur}
              {...useMaskedInputProps({
                value,
                onChangeText: (masked, unmasked, obfuscated) => {
                  onChange(unmasked)
                },
                mask: Masks.USA_PHONE,
                placeholderFillCharacter: "*",
              })}
            />
          )}
        />

more information here: https://react-hook-form.com/docs/usecontroller/controller