custom input react hook form for react native


import React, {useState, useEffect} from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import DropDownPicker from 'react-native-dropdown-picker';
import Icon from 'react-native-vector-icons/Feather'

export default () => {
    const [country, setCountry] = useState()
  const { register, setValue, handleSubmit, control, reset, errors } = useForm({
    defaultValues: {}
  });
  const onSubmit = data => {
    console.log(data);
  };

  const onChange = arg => {
    return {
      value: arg.nativeEvent.text,
    };
  };

  // const onChangeItem =(item) => {
  //   setValue("reactSelect", item);
  //   setCountry(item.value)
  // }

  //   useEffect(() => {
  //   register({ name: "reactSelect" });
  // }, [register]);

  console.log(errors);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>First name</Text>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={styles.input}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
            value={value}
          />
        )}
        name="firstName"
        rules={{ required: true }}
      />
      <Text style={{color: 'white'}}>{errors?.firstName?.type}</Text>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <DropDownPicker
          items={[
            { label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
            { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
            { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
          ]}
          defaultValue={country}
          containerStyle={{ height: 40, }}
          style={{ backgroundColor: '#FFF', borderBottomWidth: 1, borderBottomColor: 'grey', borderColor: 'transparent' }}
          itemStyle={{
            justifyContent: 'flex-start'
          }}
          dropDownStyle={{ backgroundColor: '#FFF' }}
          onChangeItem={onChange}
        />
        )}
        // items={[
        //     { label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
        //     { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
        //     { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
        //   ]}
        //   defaultValue={country}
        //   containerStyle={{ height: 40, }}
        //   style={{ backgroundColor: '#FFF', borderBottomWidth: 1, borderBottomColor: 'grey', borderColor: 'transparent' }}
        //   itemStyle={{
        //     justifyContent: 'flex-start'
        //   }}
        //   dropDownStyle={{ backgroundColor: '#FFF' }}
        //   onChangeItem={onChangeItem}
        // as={DropDownPicker}
        name="filters"
        rules={{ 
          required: true,
        validate: (value) => {
          console.log('ccccc', value)
          if (!value) {
            return "Please provide input name";
            }
        }
         }}
      />
      <Text style={{color: 'white'}}>{errors?.filters?.type}</Text>


      <View style={styles.button}>
        <Button
          style={styles.buttonInner}
          color
          title="Button"
          onPress={handleSubmit(onSubmit)}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  label: {
    color: 'white',
    margin: 20,
    marginLeft: 0,
  },
  button: {
    marginTop: 40,
    color: 'white',
    height: 40,
    backgroundColor: '#ec5990',
    borderRadius: 4,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
    backgroundColor: '#0e101c',
  },
  input: {
    backgroundColor: 'white',
    borderColor: 'none',
    height: 40,
    padding: 10,
    borderRadius: 4,
  },
});
hungdev/custom input react hook form for react native.md
