rn-vs-lb 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
@@ -16,8 +16,7 @@
   "author": "",
   "license": "ISC",
   "files": [
-    "dist",
-    "src/form"
+    "dist"
   ],
   "exports": {
     ".": {

package/src/form/AutoComplete.tsx

@@ -1,137 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import axios from 'axios';
-import Autocomplete from 'react-native-autocomplete-input';
-import { debounce } from 'lodash';
-import { Controller } from 'react-hook-form';
-
-import { commonStyles } from './commonFormStyles';
-
-export type AddressFieldProps = {
-    name: string;
-    control: any;
-    label?: string;
-    placeholder?: string;
-    rules?: object;
-    defaultValue?: string;
-    setMarkerFromAddress?: (coords: [number, number]) => void;
-    required?: boolean;
-};
-
-interface AddressResult {
-    display_name: string;
-    lat?: string;
-    lon?: string;
-}
-
-const AddressField: React.FC<AddressFieldProps> = ({
-    name,
-    control,
-    label,
-    placeholder = "Search for an address",
-    rules = {},
-    defaultValue = "",
-    setMarkerFromAddress,
-    required,
-}) => {
-    const [addresses, setAddresses] = useState<AddressResult[]>([]);
-    const [query, setQuery] = useState<string>(defaultValue);
-
-    const searchAddresses = useRef(
-        debounce(async (value: string) => {
-            if (value.trim() === "") {
-                setAddresses([]);
-                return;
-            }
-            try {
-                const response = await axios.get(
-                    `https://nominatim.openstreetmap.org/search?format=json&q=${value}`
-                );
-                if (response.data.length > 0) {
-                    setAddresses(response.data);
-                } else {
-                    setAddresses([{ display_name: value }]); // Если адрес не найден, сохраняем введенное значение
-                }
-            } catch (error) {
-                console.error("Error fetching addresses:", error);
-            }
-        }, 2000)
-    ).current;
-
-    const handleSearch = (value: string) => {
-        setQuery(value);
-        searchAddresses(value);
-    };
-
-    const handleSelectAddress = (address: AddressResult, onChange: any) => {
-        // Устанавливаем введенный адрес в поле
-        setQuery(address.display_name);
-        setAddresses([]);
-        onChange(address.display_name);
-
-        if (address.lat && address.lon && setMarkerFromAddress) {
-            setMarkerFromAddress([Number(address.lat), Number(address.lon)]);
-        }
-    };
-
-    return (
-        <View style={styles.container}>
-            {label && <Text style={commonStyles.label}>
-                {required && <Text style={commonStyles.required}>* </Text>}
-                {label}
-            </Text>}
-            <Controller
-                control={control}
-                name={name}
-                rules={rules}
-                defaultValue={defaultValue}
-                render={({ field: { onChange, value }, fieldState: { error } }) => (
-                    <>
-                        <Autocomplete
-                            data={addresses}
-                            value={query} // Привязываем значение поля к состоянию query
-                            onChangeText={handleSearch}
-                            placeholder={placeholder}
-                            flatListProps={{
-                                keyExtractor: (item) => item.display_name,
-                                renderItem: ({ item }) => (
-                                    <TouchableOpacity onPress={() => handleSelectAddress(item, onChange)}>
-                                        <Text style={styles.itemText}>{item.display_name}</Text>
-                                    </TouchableOpacity>
-                                ),
-                            }}
-                            inputContainerStyle={[commonStyles.inputBorder, commonStyles.inputContainer]}
-                            listContainerStyle={styles.listContainer}
-                        // listStyle={styles.list}
-                        />
-                        {error && <Text style={commonStyles.errorText}>{error.message}</Text>}
-                    </>
-                )}
-            />
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        margin: 0,
-        zIndex: 1, // ensures the container stays above other elements
-    },
-    listContainer: {
-        borderWidth: 0,
-        borderColor: '#ccc',
-        borderRadius: 5,
-        backgroundColor: '#fff',
-        maxHeight: 200,
-        zIndex: 10,
-    },
-    list: {
-        borderWidth: 0,
-    },
-    itemText: {
-        padding: 10,
-        fontSize: 16,
-    },
-});
-
-export default AddressField;

package/src/form/DatePicker.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
-import { Controller } from 'react-hook-form';
-import DateTimePicker from '@react-native-community/datetimepicker';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface DatePickerProps {
-  name: string;
-  control: any;
-  label?: string;
-  style?: object;
-  containerStyle?: object;
-  rules?: object;
-  defaultValue?: Date;
-  errorTextStyle?: object;
-  required?: boolean;
-}
-
-const DatePicker: React.FC<DatePickerProps> = ({
-  name,
-  control,
-  label,
-  style,
-  containerStyle,
-  rules = {},
-  defaultValue = new Date(), // Значение по умолчанию - текущая дата
-  errorTextStyle,
-  required,
-}) => {
-  const [showDatePicker, setShowDatePicker] = React.useState(false);
-  const [showTimePicker, setShowTimePicker] = React.useState(false);
-
-  const handleDateChange = (event: any, selectedDate: Date | undefined, onChange: any, currentValue: Date) => {
-    const currentDate = selectedDate || currentValue || defaultValue;
-    
-    // Сохраняем выбранное время при изменении даты
-    if (currentValue) {
-      currentDate.setHours(currentValue.getHours());
-      currentDate.setMinutes(currentValue.getMinutes());
-    }
-
-    setShowDatePicker(false);
-    onChange(currentDate); // Обновляем значение в форме
-  };
-
-  const handleTimeChange = (event: any, selectedTime: Date | undefined, onChange: any, currentValue: Date) => {
-    setShowTimePicker(false);
-    
-    if (selectedTime) {
-      const currentDate = currentValue || defaultValue;
-      
-      // Сохраняем выбранную дату при изменении времени
-      currentDate.setHours(selectedTime.getHours());
-      currentDate.setMinutes(selectedTime.getMinutes());
-      
-      onChange(currentDate); // Обновляем значение в форме
-    }
-  };
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {label && <Text style={commonStyles.label}>
-        {required && <Text style={commonStyles.required}>* </Text>}
-        {label}
-      </Text>}
-      <Controller
-        control={control}
-        name={name}
-        rules={rules}
-        defaultValue={defaultValue}
-        render={({ field: { onChange, value }, fieldState: { error } }) => (
-          <>
-            <View style={[commonStyles.inputBorder, commonStyles.inputContainer, styles.row]}>
-              <TouchableOpacity
-                style={[styles.buttonContainer, styles.dateButtonContainer]}
-                onPress={() => setShowDatePicker(true)}
-              >
-                <Text style={styles.buttonText}>
-                  {value ? value.toDateString() : 'Select a date'}
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.buttonContainer, styles.timeButtonContainer]}
-                onPress={() => setShowTimePicker(true)}
-              >
-                <Text style={styles.buttonText}>
-                  {value ? value.toTimeString().slice(0, 5) : 'Select time'}
-                </Text>
-              </TouchableOpacity>
-            </View>
-            {showDatePicker && (
-              <DateTimePicker
-                value={value || defaultValue}
-                mode="date"
-                display="default"
-                onChange={(event, selectedDate) =>
-                  handleDateChange(event, selectedDate, onChange, value)
-                }
-              />
-            )}
-            {showTimePicker && (
-              <DateTimePicker
-                value={value || defaultValue}
-                mode="time"
-                display="default"
-                onChange={(event, selectedTime) =>
-                  handleTimeChange(event, selectedTime, onChange, value)
-                }
-              />
-            )}
-            {error && <Text style={[commonStyles.errorText, errorTextStyle]}>{error.message}</Text>}
-          </>
-        )}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 0,
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  buttonContainer: {
-    justifyContent: 'center',
-    backgroundColor: '#fff',
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: 16,
-  },
-  dateButtonContainer: {
-    flex: 0.6, // 60% ширины
-  },
-  timeButtonContainer: {
-    flex: 0.4, // 40% ширины
-    alignItems: "center",
-  },
-});
-
-export default DatePicker;

package/src/form/ImageUploader.tsx

@@ -1,157 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
-import { Controller } from 'react-hook-form';
-import * as ImagePicker from 'expo-image-picker';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface ImageUploaderProps {
-  name: string;
-  control: any;
-  label?: string;
-  style?: object;
-  containerStyle?: object;
-  rules?: object;
-  defaultValue?: string[];
-  errorTextStyle?: object;
-  required?: boolean;
-}
-
-const ImageUploader: React.FC<ImageUploaderProps> = ({
-  name,
-  control,
-  label,
-  style,
-  containerStyle,
-  rules = {},
-  defaultValue = [],
-  errorTextStyle,
-  required,
-}) => {
-  const [imageUris, setImageUris] = useState<string[]>(defaultValue);
-
-  const handleImagePick = async (onChange: any) => {
-    if (imageUris.length >= 3) {
-      alert('You can upload a maximum of 3 images');
-      return;
-    }
-
-    // Запрашиваем разрешение на доступ к медиатеке
-    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (status !== 'granted') {
-      alert('Sorry, we need camera roll permissions to make this work!');
-      return;
-    }
-
-    let result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [4, 3],
-      quality: 1,
-    });
-
-    if (!result.canceled && result.assets.length > 0) {
-      const selectedImageUri = result.assets[0].uri;
-      const updatedUris = [...imageUris, selectedImageUri];
-      setImageUris(updatedUris);
-      onChange(updatedUris);
-    }
-  };
-
-  const handleRemoveImage = (uri: string, onChange: any) => {
-    const updatedUris = imageUris.filter(imageUri => imageUri !== uri);
-    setImageUris(updatedUris);
-    onChange(updatedUris);
-  };
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {label && <Text style={commonStyles.label}>
-        {required && <Text style={commonStyles.required}>* </Text>}
-        {label}
-      </Text>}
-      <Controller
-        control={control}
-        name={name}
-        rules={rules}
-        defaultValue={defaultValue}
-        render={({ field: { onChange, value }, fieldState: { error } }) => (
-          <>
-            <TouchableOpacity
-              style={[commonStyles.inputBorder, styles.uploadButton, style]}
-              onPress={() => handleImagePick(onChange)}
-            >
-              <Text style={styles.uploadButtonText}>
-                {imageUris.length < 3 ? 'Upload Image' : 'Maximum 3 images'}
-              </Text>
-            </TouchableOpacity>
-            <View style={styles.imageContainer}>
-              {imageUris.map((uri) => (
-                <View key={uri} style={styles.imageWrapper}>
-                  <Image source={{ uri: uri }} style={styles.imagePreview} />
-                  <TouchableOpacity
-                    style={styles.removeButton}
-                    onPress={() => handleRemoveImage(uri, onChange)}
-                  >
-                    <Text style={styles.removeButtonText}>X</Text>
-                  </TouchableOpacity>
-                </View>
-              ))}
-            </View>
-            {error && <Text style={[commonStyles.errorText, errorTextStyle]}>{error.message}</Text>}
-          </>
-        )}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 10,
-  },
-  uploadButton: {
-    backgroundColor: '#fff',
-    padding: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  uploadButtonText: {
-    color: 'black',
-    fontSize: 16,
-  },
-  imageContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginTop: 10,
-  },
-  imageWrapper: {
-    position: 'relative',
-    marginRight: 10,
-    marginBottom: 10,
-  },
-  imagePreview: {
-    width: 100,
-    height: 100,
-    borderColor: '#ccc',
-    borderWidth: 1,
-    borderRadius: 5,
-  },
-  removeButton: {
-    position: 'absolute',
-    top: 2,
-    right: 2,
-    backgroundColor: '#ccc',
-    borderRadius: 15,
-    width: 25,
-    height: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  removeButtonText: {
-    color: 'white',
-    fontSize: 14,
-  },
-});
-
-export default ImageUploader;

package/src/form/MultiSelect.tsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { Controller } from 'react-hook-form';
-import { Picker } from '@react-native-picker/picker';
-import { Ionicons } from '@expo/vector-icons';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface MultiSelectProps {
-    name: string;
-    control: any;
-    options: { label: string; value: string }[];
-    label?: string;
-    style?: object;
-    containerStyle?: object;
-    rules?: object;
-    placeholder?: string;
-    errorTextStyle?: object;
-    required?: boolean;
-}
-
-const MultiSelect: React.FC<MultiSelectProps> = ({
-    name,
-    control,
-    options,
-    label,
-    style,
-    containerStyle,
-    rules = {},
-    placeholder = "Select...",
-    errorTextStyle,
-    required
-}) => {
-    return (
-        <View style={[styles.container, containerStyle]}>
-            {label && <Text style={commonStyles.label}>
-                {required && <Text style={commonStyles.required}>* </Text>}
-                {label}
-            </Text>}
-            <View style={[style]}>
-                <Controller
-                    control={control}
-                    name={name}
-                    rules={rules}
-                    render={({ field: { onChange, value }, fieldState: { error } }) => (
-                        <>  
-                        <View style={[commonStyles.inputBorder, commonStyles.inputContainer, styles.inputContainer]}>
-                            <Picker
-                                selectedValue=""
-                                onValueChange={(itemValue) => {
-                                    if (itemValue && !value.includes(itemValue)) {
-                                        onChange([...value, itemValue]);
-                                    }
-                                }}
-                                style={[pickerStyles.picker]}
-                            >
-                                <Picker.Item label={placeholder} value="" />
-                                {options.map(option => (
-                                    <Picker.Item label={option.label} value={option.value} key={option.value} />
-                                ))}
-                            </Picker>
-                            </View>
-
-                            <View style={styles.selectedContainer}>
-                                {value?.map((item: string) => (
-                                    <View key={item} style={styles.selectedItem}>
-                                        <Text style={styles.selectedItemText}>{item}</Text>
-                                        <TouchableOpacity
-                                            onPress={() => onChange(value.filter((selectedItem: string) => selectedItem !== item))}
-                                        >
-                                            <Ionicons name="close" size={18} color="black" />
-                                        </TouchableOpacity>
-                                    </View>
-                                ))}
-                            </View>
-
-                            {error && <Text style={[commonStyles.errorText, errorTextStyle]}>{error.message}</Text>}
-                        </>
-                    )}
-                    defaultValue={[]}
-                />
-            </View>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        margin: 0,
-    },
-    inputContainer: {
-        overflow: 'hidden',
-        justifyContent: 'center',
-        paddingHorizontal: 0,
-    }, 
-    selectedContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        marginTop: 10,
-    },
-    selectedItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: '#e0e0e0',
-        borderRadius: 15,
-        paddingVertical: 5,
-        paddingHorizontal: 10,
-        marginRight: 5,
-        marginBottom: 5,
-    },
-    selectedItemText: {
-        marginRight: 5,
-    },
-});
-
-const pickerStyles = StyleSheet.create({
-    picker: {
-        height: "100%",
-        borderWidth: 0,
-    },
-});
-
-export default MultiSelect;

package/src/form/PasswordInput.tsx

@@ -1,63 +0,0 @@
-import React, { useState } from 'react';
-import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
-
-import { commonStyles } from './commonFormStyles';
-
-interface PasswordInputProps {
-  value: string;
-  onChange: (text: string) => void;
-  onBlur?: () => void;
-  placeholder?: string;
-  error?: boolean;
-}
-
-const PasswordInput: React.FC<PasswordInputProps> = ({ value, onChange, onBlur, placeholder, error }) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
-
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-
-  return (
-    <View style={[styles.inputContainer, commonStyles.inputBorder, commonStyles.inputContainer]}>
-      <TextInput
-        style={[styles.input, error && styles.inputError]}
-        onBlur={onBlur}
-        onChangeText={onChange}
-        value={value}
-        placeholder={placeholder}
-        placeholderTextColor="#ccc"
-        secureTextEntry={!isPasswordVisible}
-      />
-      <TouchableOpacity style={styles.icon} onPress={togglePasswordVisibility}>
-        <Icon
-          name={isPasswordVisible ? "eye-off" : "eye"}
-          size={24}
-          color="gray"
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  inputContainer: {
-    position: 'relative',
-    display: "flex",
-    flexDirection: 'row',
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  input: {
-    flex: 1,
-    paddingRight: 50, // Место для иконки
-  },
-  icon: {
-  },
-  inputError: {
-    borderColor: 'red',
-  },
-});
-
-export default PasswordInput;

package/src/form/Select.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { Controller } from 'react-hook-form';
-import { Picker } from '@react-native-picker/picker';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface SelectProps {
-    name: string;
-    control: any;
-    label?: string;
-    options: { label: string; value: string | number }[];
-    placeholder?: string;
-    style?: object;
-    containerStyle?: object;
-    rules?: object;
-    defaultValue?: string | number;
-    required?: boolean;
-    errorTextStyle?: object;
-}
-
-const Select: React.FC<SelectProps> = ({
-    name,
-    control,
-    label,
-    options,
-    placeholder = 'Select an option...',
-    style,
-    containerStyle,
-    rules = {},
-    required,
-    defaultValue = '',
-    errorTextStyle,
-}) => {
-    return (
-        <View style={[styles.container, containerStyle]}>
-            {label && <Text style={commonStyles.label}>
-                {required && <Text style={commonStyles.required}>* </Text>}
-                {label}
-            </Text>}
-            <View style={[style]}>
-                <Controller
-                    control={control}
-                    name={name}
-                    rules={rules}
-                    defaultValue={defaultValue}
-                    render={({ field: { onChange, value }, fieldState: { error } }) => (
-                        <>
-                        <View style={[commonStyles.inputBorder, commonStyles.inputContainer, styles.inputContainer]}>
-                            <Picker
-                                selectedValue={value}
-                                onValueChange={(itemValue) => onChange(itemValue)}
-                                style={styles.picker}
-                            >
-                                {placeholder && (
-                                    <Picker.Item label={placeholder} value="" />
-                                )}
-                                {options.map((option) => (
-                                    <Picker.Item
-                                        key={option.value}
-                                        label={option.label}
-                                        value={option.value}
-                                    />
-                                ))}
-                            </Picker>
-                            </View>
-                            {error && <Text style={[commonStyles.errorText, errorTextStyle]}>{error.message}</Text>}
-                        </>
-                    )}
-                />
-            </View>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        margin: 0,
-    },
-    inputContainer: {
-        overflow: 'hidden',
-        justifyContent: 'center',
-        paddingHorizontal: 0,
-    }, 
-    picker: {
-        height: "100%",
-        borderWidth: 0,
-        paddingHorizontal: 0,
-        padding: 0,
-    }
-});
-
-export default Select;

package/src/form/TextArea.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { TextInput, StyleSheet, View, Text, TextInputProps } from 'react-native';
-import { Controller } from 'react-hook-form';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface TextAreaProps extends TextInputProps {
-    name: string;
-    control: any;
-    label?: string;
-    placeholder?: string;
-    numberOfLines?: number;
-    style?: object;
-    containerStyle?: object;
-    rules?: object;
-    defaultValue?: string;
-    required?: boolean;
-    errorTextStyle?: object;
-}
-
-const TextArea: React.FC<TextAreaProps> = ({
-    name,
-    control,
-    label,
-    placeholder = 'Enter text...',
-    numberOfLines = 4,
-    style,
-    containerStyle,
-    rules = {},
-    defaultValue = '',
-    required,
-    errorTextStyle,
-    ...rest
-}) => {
-    return (
-        <View style={[styles.container, containerStyle]}>
-            {label && <Text style={commonStyles.label}>
-                {required && <Text style={commonStyles.required}>* </Text>}
-                {label}
-            </Text>}
-            <Controller
-                control={control}
-                name={name}
-                rules={rules}
-                defaultValue={defaultValue}
-                render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
-                    <>
-                        <TextInput
-                            style={[commonStyles.inputBorder, commonStyles.inputContainer, styles.textArea, style]}
-                            value={value}
-                            onChangeText={onChange}
-                            onBlur={onBlur}
-                            placeholder={placeholder}
-                            multiline={true}
-                            numberOfLines={numberOfLines}
-                            {...rest}
-                        />
-                        {error && <Text style={[commonStyles.errorText, errorTextStyle]}>{error.message}</Text>}
-                    </>
-                )}
-            />
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        margin: 0,
-    },
-    textArea: {
-        height: 150,
-        padding: 12,
-        textAlignVertical: 'top',
-    },
-});
-
-export default TextArea;

package/src/form/TextInput.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { View, Text, TextInput, StyleSheet } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import PasswordInput from './PasswordInput';
-
-import { commonStyles } from './commonFormStyles';
-
-export interface InputWithValidationProps {
-  name: string;
-  control: any;
-  label?: string;
-  placeholder: string;
-  keyboardType?: 'default' | 'email-address' | 'phone-pad' | 'numeric' | 'decimal-pad' | 'number-pad' | 'url' | 'web-search';
-  secureTextEntry?: boolean;
-  required?: boolean;
-  rules?: { required?: boolean | string; [key: string]: any };
-  defaultValue?: string;
-}
-
-const InputWithValidation: React.FC<InputWithValidationProps> = ({
-  name,
-  control,
-  label = '',
-  placeholder,
-  keyboardType = 'default',
-  secureTextEntry = false,
-  required = false,
-  rules = {},
-  defaultValue = ''
-}) => {
-  const { formState: { errors } } = useForm<{ [key: string]: string }>();
-
-  return (
-    <View style={styles.container}>
-      {label && (
-        <Text style={commonStyles.label}>
-          {required && <Text style={commonStyles.required}>* </Text>}
-          {label}
-        </Text>
-      )}
-      <Controller
-        control={control}
-        rules={rules}
-        name={name}
-        defaultValue={defaultValue}
-        render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
-          secureTextEntry ? (
-            <>
-            <PasswordInput
-              value={value}
-              onChange={onChange}
-              onBlur={onBlur}
-              placeholder={placeholder}
-              error={!!errors[name]}
-            />
-            {error && <Text style={[commonStyles.errorText]}>{error.message}</Text>}
-            </>
-          ) : (
-            <>
-            <TextInput
-              style={[commonStyles.inputBorder, commonStyles.inputContainer, errors[name] && styles.inputError]}
-              onBlur={onBlur}
-              onChangeText={onChange}
-              value={value || defaultValue}
-              placeholder={placeholder}
-              placeholderTextColor="#ccc"
-              keyboardType={keyboardType}
-            />
-            {error && <Text style={[commonStyles.errorText]}>{error.message}</Text>}
-            </>
-          )
-        )}
-      />
-      {errors[name] && <Text style={commonStyles.errorText}>{(errors[name] as any)?.message}</Text>}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 0,
-  },
-  inputError: {
-    borderColor: 'red',
-  },
-});
-
-export default InputWithValidation;

package/src/form/commonFormStyles.ts

@@ -1,28 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export const commonStyles = StyleSheet.create({
-    required: {
-        color: 'red',
-    },
-    label: {
-        fontSize: 16,
-        fontWeight: '300',
-        marginBottom: 5,
-    },
-    inputBorder: {
-        borderColor: '#ccc',
-        borderWidth: 1,
-        borderRadius: 5,
-    },
-    inputContainer: {
-        height: 50,
-        paddingHorizontal: 16,
-        backgroundColor: '#fff',
-        justifyContent: "center",
-    },
-    errorText: {
-        color: 'red',
-        marginTop: 5,
-        fontSize: 12,
-    },
-});

package/src/form/index.ts

@@ -1,23 +0,0 @@
-import TextInput from "./TextInput"
-import TextArea, { TextAreaProps } from "./TextArea"
-import Select, { SelectProps } from "./Select"
-import DatePicker, { DatePickerProps } from "./DatePicker"
-import ImageUploader, { ImageUploaderProps } from "./ImageUploader"
-import MultiSelect, { MultiSelectProps } from "./MultiSelect"
-import AutoComplete, { AddressFieldProps as AutoCompleteProps } from "./AutoComplete"
-
-export {
-    TextInput,
-    TextArea,
-    TextAreaProps,
-    Select,
-    SelectProps,
-    DatePicker,
-    DatePickerProps,
-    ImageUploader,
-    ImageUploaderProps,
-    MultiSelect,
-    MultiSelectProps,
-    AutoComplete,
-    AutoCompleteProps
-}