@agilegravity/rhfa-react-native

rhfa-react-native

This library allows your React application to automatically generate forms using ReactHookForm that are redered by React Native. The form and validations are generated following a schema inspired by SimpleSchema.

It uses some react-native-community packages to help with checkbox, slider and picker.

Upgrade to 1.2.0

You must change your package.json entry from @react-native-community/picker to @react-native-picker/picker. It will look like this:

    "dependencies": {
      "@react-native-picker/picker": "^2.0.0",
      ...
    }

Installation

$ npm install react-hook-form rhfa-react-native @react-native-community/checkbox @react-native-community/slider @react-native-picker/picker --save

Usage

    import { createSchema, Autoform } from 'rhfa-react-native'
    import { createStyles } from 'rhfa-react-native/dist/emergencyStyles'

    const style = createStyles()

    export const client = createSchema('client', {
      name: {
        type: 'string',
        required: true,
        max: 32
      },
      age: {
        type: 'number'
      }
    })

    const MyForm = ({ onSubmit }) =>
      <Autoform
        schema={client}
        onSubmit={onSubmit}
        styles={styles}
      />

Styling

The emergency styles are separated in its own bundle. The function createStyles will generate some styles for the components. It gereates some styles proceduraly and you can set some better defaults:

  createStyles({
    backgroundColor = '#e0e0e0',
    height = 32,
    headerColor = '#a0a0a0',
    panelBorderColor = '#a0a0a0',
    inputBorderColor = '#c0c0c0',
    inputBackgroundColor = '#ffffff',
    radioRadio = 8,
    radioColor = '#808080',
    radioSelectedColor = '#404040',
    buttonColor = '#909090',
    addColor = '#70a070',
    addTextColor = '#104010',
    removeColor = '#a07070',
    removeTextColor = '#ffe0e0',
    errorColor = '#601010',
    errorBackgroundColor = '#ffe0e0',
    miniHeight = 24,
    fontSize = 16
  } = {})

Specific schema attributes for React Native

type = 'range'

Appart from min and max, you should setup step. It will coerce to nearest step:

  something: {
    type: 'range',
    min: 10,
    max: 90,
    step: 5,
    defaultValue: 50
  }

Helper text

You can specify helperText in the schema.

    import { createSchema } from 'rhfa-react-native'

    const smt = createSchema('something', {
      name: {
        type: 'string',
        helperText: tr('models.name.helper')
      }
    })

You can set the text directly too, without using tr().

Also you can set model translation string attribute _helper to any value:

    setTranslations({
      name: {
        _field: 'Name',
        _helper: 'Please, enter your name'
      }
    })

Label info

Labels can have a field that appears in a less prominent color adding some clarification. This label info will come from translations:

    setTranslations({
      name: {
        _field: 'Name',
        _labelInfo: '(given name)'
      }
    })

The label tr('requiredLabel') will be added automatically for required fields (unless you override with translations).

Documentation