React Hook Form with Select component on React Native

[lyqht]

Hello react-hook-form folks, I have used React Hook form on my React Native app for quite a while without any issues until recently I tried to implement a Select component.

Demo

Here's an expo snack on the example.

Context

This select component comes from a component library called UI Kittens, and its Select component doesn't come with a onChange method like the other usual components.

It takes in props selectedIndex and onSelect, both of which is a type of IndexPath.
Since react-hook-form doesn't have an onSelect method exposed through the Controller, I tried to retrofit the callback that I pass to the onSelect method that I pass to the component itself. (refer to the comments in the code in Form.js)

I assumed the selectedIndex.row should follow the actual index of the option given in the options array. However, if you try clicking on the same option in the list, the row value is actually not static, so what I'm doing in the example is incorrect.

Questions

• How do I pass the onChange from react-hook-form's controller as part of the callback to the Select component's onSelect correctly?
• Or is there a better way to do this?

[bluebill1049]

https://snack.expo.dev/@bluebill1049/react-hook-form-with-ui-kitten-select

import { IndexPath, Select, SelectItem, Text } from '@ui-kitten/components';
import React from 'react';
import { Controller, useForm } from 'react-hook-form';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

const timeUnitOptions = ['days', 'hours', 'weeks'];

const ReminderForm = ({ onSubmit }) => {
  const [selectedIndex, setSelectedIndex] = React.useState(new IndexPath(2));
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    mode: 'onBlur',
    defaultValues: {
      timeUnit: 'weeks',
    },
  });

  return (
    <View style={styles.container}>
      <Text category={'label'}>Add a reminder</Text>
      <View style={styles.row}>
        <View style={styles.formField}>
          <Controller
            name="timeUnit"
            control={control}
            rules={{
              required: true,
            }}
            render={({ field: { onChange, value } }) => {
              console.log(value)
              return (
                <Select
                  accessibilityLabel="time unit"
                  value={value}
                  onSelect={(index) => {
                    onChange(timeUnitOptions[index.row]);
                  }}>
                  {timeUnitOptions.map((timeUnit) => (
                    <SelectItem
                      key={`select-option-${timeUnit}`}
                      title={timeUnit}
                    />
                  ))}
                </Select>
              );
            }}
          />
        </View>
        <TouchableOpacity onPress={handleSubmit(onSubmit)}>
          Submit
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
  },
  formField: {
    width: 130,
    marginEnd: 8,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingVertical: 16,
  },
});

export default ReminderForm;

are the above works for you?

[lyqht]

it worked! thank you! could you explain why this works?

[bluebill1049]

I think the complexity is due to the select component API design, which allows both index and value. So you should pick your "horse", either index or value.

[JaissonB]

Olá! Estou com o mesmo problema, porém utilizo um componente select diferente -> https://www.npmjs.com/package/react-native-dropdown-select-list
Tentei corrigir vendo a sugestão do @bluebill1049 mas não tive sucesso.
Alguém poderia me ajudar?