rn-validation

Supporting component helping validating values

Features

• Provide validation rules
• Able to create custom validation rules
• Easy to use

Installation

npm install rn-validation

or

yarn add rn-validation

Usage

import { createRef } from 'react';
import { ValidationGroup, Validator, ValidationRules } from 'rn-validation';

const validation = createRef();

<ValidationGroup
  ref={validation}
  onValidated={({ validated, validatedErrors }) => {
    if (validated) {
      alert('Validated successfully!');
    } else {
      alert(validatedErrors[0].firstValidatedErrorMessage);
    }
  }}
>
  <Validator
    getValidatedValue={() => value}
    validations={[
      ValidationRules.isNotEmpty,
      ValidationRules.isLengthLessThanOrEqualTo(20),
    ]}
    errorMessages={['Cannot be empty', 'Value length cannot exceed 20']}
  >
    {({ validated, firstValidatedErrorMessage }) => {
      return (
        <View>
          <TextInput
            value={value}
            style={{ borderWidth: 1, borderColor: validated ? 'grey' : 'red' }}
          />
          {validated ? null : <Text>{firstValidatedErrorMessage}</Text>}
        </View>
      );
    }}
  </Validator>
</ValidationGroup>;

// Call the method to start validating all validators inside the group
validation.current.validate();

ValidationGroup

Props

| Name | Type | Required | Default | Description | | ----------- | -------- | :------: | :-----: | ------------------------------------------- | | onValidated | function | ❌ | null | Callback invoked after validating completed |

Methods

| Name | Description | | -------- | -------------------------- | | validate | Invoke to start validating |

Validator

Props

| Name | Type | Required | Default | Description | | --------------------------- | ---------- | :------: | :-----: | ----------------------------------------------------------------------------------------- | | validations | function[] | ✔️ | [] | Array of validating functions to be used for validating | | errorMessages | string[] | ❌ | [] | Array of error messages corresponding the validation function array | | getValidatedValue | function | ✔️ | | Function returning the value to be validated | | getExtraDataAfterValidating | function | ❌ | | Function returning the extra data to be passed as argument to callback of ValidationGroup | | children | function | ✔️ | | Children must be function return an element |

Methods

| Name | Description | | -------- | -------------------------- | | validate | Invoke to start validating |

ValidationRules

• isNotEmpty
• isLengthLessThan
• isLengthLessThanOrEqualTo
• isLengthBetween
• isEqual
• isExactlyEqual
• matchRegExp
• isBetween
• isLessThan
• isLessThanOrEqualTo
• isGreaterThan
• isGreaterThanOrEqualTo
• requireNumericDigits
• isEmail
• isNotEmptyTrim

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT