@agilegravity/rhfa-react-native v1.2.1
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).