Валидация сложных форм React. Часть 1

Клиентская валидация хорошо работает в JSON Schema — Forms
github.com/mozilla-services/react-jsonschema-form

Чем вам Formik + Yup не угодил? В вашем кейсе не вижу решения для стилизации и кастомизации. Например мне нужно React-Select упаковать в вашу форму, как мне это сделать?

Форма логина на связке Formik + Yup выглядит куда более читаемой

import React from 'react';
import { View, Dimensions } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { TextInput, Button } from '../components';

const validationSchema = Yup.object().shape({
  username: Yup.string()
    .min(4, 'Too Short!')
    .max(24, 'Too Long!')
    .required('Required'),
  password: Yup.string()
    .min(6, 'Too short password')
    .max(30, 'Too long')
    .required('Required'),
  securityCode: Yup.number()
    .min(99999, 'Too Short!')
    .max(999999, 'Too Long!')
    .required('Required'),
});
const { width } = Dimensions.get('window');

const LoginForm = componentProps => (
  <Formik
    validationSchema={validationSchema}
    initialValues={componentProps.initialValues}
    onSubmit={componentProps.onSubmit}
    validateOnChange={false}
    validateOnBlur={false}
  >
    {props => (
      <View style={{ width, padding: 10 }}>
        <TextInput
          placeholder="Username"
          returnKeyType="done"
          onChangeText={props.handleChange('username')}
          error={props.errors.username}
          onBlue={props.handleBlur('username')}
          value={props.values.username}
        />
        <TextInput
          secureTextEntry
          placeholder="Password"
          returnKeyType="done"
          onChangeText={props.handleChange('password')}
          error={props.errors.password}
          onBlue={props.handleBlur('password')}
          value={props.values.password}
        />
        <TextInput
          error={props.errors.securityCode}
          keyboardType="number-pad"
          returnKeyType="done"
          placeholder="Google Authentication code"
          onChangeText={props.handleChange('securityCode')}
          onBlue={props.handleBlur('securityCode')}
          value={props.values.securityCode}
        />
        <Button
          secondary
          rounded
          style={{ alignSelf: 'stretch', marginTop: 35 }}
          caption="Login"
          onPress={props.handleSubmit}
        />
      </View>
    )}
  </Formik>
);

export default LoginForm;

Здесь описаны пока простейшие случае, ответ будет в следующей статье.

www.npmjs.com/package/react-validation-boo
Зачем эта копипаста в описание пакета? Где нормальная документация? Где ссылка на github репозиторий?

Я так понял это ваша велосипед библиотека. Гораздо интересней вместо примера реализации прочитать какие у нее преимущество перед существующими решениями, и что побудило на создание еще одного. Например есть замечательный Final-Form с кучей примеров и отличной документацией

для валидации форм любой сложности.

Смело. А как же проблема зависимых друг от друга полей? А как же асинхронные сценарии? Кстати, свой DSL (я про «сценарии») — это очень неудобное решение, в современном приложении и так куча DSL.

А как же тот факт, что в случае сложных форм проще вынести валидацию в, например, саги, а обёртки компонентов будут просто уметь рисовать ошибки.

Про код-стайл уже сказали выше, но имена классов с маленькой буквы — это за гранью добра и зла.
А где можно глянуть исходники, не устанавливая пакет?

Мне куда более интересней, как валидировать табличную форму, где помимо допустим имени и фамилии есть поля, которые могут добавляться и удаляться.
Как валидировать составную форму. Когда есть одна страница и там несколько форм подключается, есть табличные, форма разбита на страницы, а кнопка сохранить одна в конце.