Examples¶

import { View, TextInput, Text } from 'react-native';
import { useValidateForm } from 'medhira-rn-typescript-hooks';

const EmailForm = () => {
  const form = useValidateForm({
    type: 'string',
    label: 'Email Address',
    isRequired: true,
    keyboard: 'email-address',
    validationPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    validError: 'Please enter a valid email address',
  });

  return (
    <View>
      <TextInput
        value={form.value ?? ''}
        onChangeText={form.valueChangeHandler}
        onFocus={form.valueFocusHandler}
        onBlur={form.valueBlurHandler}
      />
      {form.hasError && <Text>{form.customError}</Text>}
    </View>
  );
};

import { TextInput } from 'react-native';
import { useValidateForm } from 'medhira-rn-typescript-hooks';

const PhoneForm = () => {
  const form = useValidateForm({
    type: 'string',
    label: 'Phone Number',
    isRequired: true,
    keyboard: 'phone-pad',
    minLength: 10,
    maxLength: 10,
    minLengthError: 'Phone number must be 10 digits',
    maxLengthError: 'Phone number must be 10 digits',
  });

  return (
    <TextInput
      value={form.value ?? ''}
      onChangeText={form.valueChangeHandler}
      onFocus={form.valueFocusHandler}
    />
  );
};

import { TextInput } from 'react-native';
import { useValidateForm } from 'medhira-rn-typescript-hooks';

const AgeForm = () => {
  const form = useValidateForm({
    type: 'number',
    label: 'Age',
    isRequired: true,
    minValue: 18,
    maxValue: 100,
    minValueError: 'Minimum age is 18',
    maxValueError: 'Maximum age is 100',
  });

  return (
    <TextInput
      value={form.value ?? ''}
      onChangeText={form.valueChangeHandler}
      onFocus={form.valueFocusHandler}
      keyboardType="numeric"
    />
  );
};

import { Picker } from '@react-native-picker/picker';
import { useValidateSelect } from 'medhira-rn-typescript-hooks';

const CountrySelect = () => {
  const select = useValidateSelect({
    itemsList: [
      { label: 'United States', value: 'us' },
      { label: 'United Kingdom', value: 'uk' },
      { label: 'Canada', value: 'ca' },
    ],
    isRequired: true,
    multiple: false,
  });

  return (
    <Picker
      selectedValue={select.value}
      onValueChange={(itemValue) => select.onChangeValueCallBack(itemValue)}
    >
      {select.itemsList.map((item) => (
        <Picker.Item key={item.value} label={item.label} value={item.value} />
      ))}
    </Picker>
  );
};

import { View, Pressable, Text } from 'react-native';
import { useValidateSelect } from 'medhira-rn-typescript-hooks';

const TagsSelect = () => {
  const select = useValidateSelect({
    itemsList: [
      { label: 'React', value: 'react' },
      { label: 'TypeScript', value: 'ts' },
      { label: 'Node', value: 'node' },
    ],
    isRequired: true,
    multiple: true,
    min: 1,
    max: 3,
  });

  const selected = Array.isArray(select.value) ? select.value : [];

  return (
    <View>
      {select.itemsList.map((item) => {
        const isSelected = selected.includes(item.value);
        return (
          <Pressable
            key={item.value}
            onPress={() => {
              const next = isSelected
                ? selected.filter((value) => value !== item.value)
                : [...selected, item.value];
              select.onChangeValueCallBack(next);
            }}
          >
            <Text>{item.label}</Text>
          </Pressable>
        );
      })}
      {select.hasError && <Text>{select.customError}</Text>}
    </View>
  );
};

import { View, Pressable, Text } from 'react-native';
import { useValidateCheckBox } from 'medhira-rn-typescript-hooks';

const TermsCheckbox = () => {
  const checkbox = useValidateCheckBox({
    isRequired: true,
    value: false,
    validError: 'You must accept the terms and conditions',
    checkedColor: '#4CAF50',
    uncheckedColor: '#9E9E9E',
  });

  return (
    <View>
      <Pressable onPress={checkbox.onValueChangeHandler}>
        <Text style={{ color: checkbox.color ?? '#9E9E9E' }}>
          {checkbox.value ? '☑' : '☐'} I accept the terms
        </Text>
      </Pressable>
      {checkbox.hasError && <Text>{checkbox.customError}</Text>}
    </View>
  );
};

import { View, TextInput, Text, Button } from 'react-native';
import {
  useValidateForm,
  useValidateSelect,
  useValidateCheckBox,
} from 'medhira-rn-typescript-hooks';

const CompleteForm = () => {
  const email = useValidateForm({
    type: 'string',
    label: 'Email',
    isRequired: true,
    keyboard: 'email-address',
    validationPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
  });

  const country = useValidateSelect({
    itemsList: [
      { label: 'USA', value: 'us' },
      { label: 'UK', value: 'uk' },
    ],
    isRequired: true,
  });

  const terms = useValidateCheckBox({
    isRequired: true,
    value: false,
  });

  const canSubmit = email.isValid && country.isValid && terms.isValid;

  return (
    <View>
      <TextInput
        value={email.value ?? ''}
        onChangeText={email.valueChangeHandler}
        onBlur={email.valueBlurHandler}
      />
      {email.hasError && <Text>{email.customError}</Text>}

      {/* Wire country to your picker UI */}
      {country.hasError && <Text>{country.customError}</Text>}

      <Pressable onPress={terms.onValueChangeHandler}>
        <Text>{terms.value ? 'Accepted' : 'Accept terms'}</Text>
      </Pressable>
      {terms.hasError && <Text>{terms.customError}</Text>}

      <Button title="Submit" disabled={!canSubmit} onPress={() => {}} />
    </View>
  );
};