![\"NPM](\"https://img.shields.io/npm/dm/@mobeye/react-native-form-fields.svg?style=flat-square\")
\n ![\"NPM](\"https://img.shields.io/npm/v/@mobeye/react-native-form-fields.svg?style=flat-square\")
\n ![\"License\"](\"https://img.shields.io/github/license/Mobeye/react-native-form.svg?style=flat-square\")
\n\n \n \n \n
\n ![\"Commit](\"https://img.shields.io/github/commit-activity/m/Mobeye/react-native-form.svg?style=flat-square\")
\n ![\"Last](\"https://img.shields.io/github/last-commit/Mobeye/react-native-form.svg?style=flat-square\")
\n
bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `onChangeText` | `(text: string) => void` | (Optional) `TextInput` `onChangeText` callback |\n| `onFocus` | `() => void` | (Optional) Triggered on input focus |\n| `onBlur` | `() => void` | (Optional) Triggered on input blur |\n| `leftIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the left part of the field. isExpanded is true when the field contain a value |\n| `rightIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the right part of the field. isExpanded is true when the field contain a value |\n| `minFontSize` | `number` | (Optional) the min size for the font |\n| `maxFontSize` | `number` | (Optional) the max size for the font |\n| `textInputProps` | `TextInputProps` | (Optional) Props that will be directly passed down to the `TextInput` |\n| `inputContainerStyle` | `ViewStyle` | (Optional) input container style |\n| `inputStyle` | `TextStyle` | (Optional) Style to pass down to the `TextInput` |\n| `disabled` | `boolean` | (Optional) To make it not editable |\n\n### `MultiLineTextField`\n\nA multi line TextInput with a nice animation on focus/blur\n\n| Property | Type | Description |\n| ---------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label` | `string` | (Required) Label to display and animate |\n| `value` | `string` | (Required) Value to display in the input. Can be empty |\n| `isValid` | bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `placeholder` | `string` | (Optional) Placeholder to display is no value |\n| `onChangeText` | `(text: string) => void` | (Optional) `TextInput` `onChangeText` callback |\n| `onFocus` | `() => void` | (Optional) Triggered on input focus |\n| `onBlur` | `() => void` | (Optional) Triggered on input blur |\n| `textInputProps` | `TextInputProps` | (Optional) Props that will be directly passed down to the `TextInput` |\n| `inputStyle` | `TextStyle` | (Optional) Style to pass down to the `TextInput` |\n| `disabled` | `boolean` | (Optional) To make it not editable |\n\n### `MCQField`\n\nA MCQ field that can be foldable.\n\n| Property | Type | Description |\n| ------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label` | `string` | (Required) Label to display and animate |\n| `possibleAnswers` | `string[]` | (Required) List of possible answers to display |\n| `selectedAnswersIndices` | `number[]` | (Required) List of indices of the selected answers |\n| `onSelectAnswer` | `(answerIndex: number) => void` | (Required) Callback fired when user selects an answer |\n| `isValid` | bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `foldable` | `boolean` | (Optional) Should the MCQField be foldable (useful when there are a lot of possible answers) |\n| `openFoldableLabel` | `string` | (Optional) Opening button label for foldable MCQ |\n| `closeFoldableLabel` | `string` | (Optional) Closing button label for foldable MCQ |\n| `activeAnswerIcon` | `React.ReactNode` | (Optional) Icon to display next to the answer when it is selected |\n| `inactiveAnswerIcon` | `React.ReactNode` | (Optional) Icon to display next to the answer when it is not selected |\n| `activeOpenFoldableIcon` | `React.ReactNode` | (Optional) Icon to display in the open button for foldable MCQ when it is closed |\n| `inactiveOpenFoldableIcon` | `React.ReactNode` | (Optional) Icon to display in the open button for foldable MCQ when it is opened |\n| `activeCloseFoldableIcon` | `React.ReactNode` | (Optional) Icon to display in the close button for foldable MCQ when it is closed |\n| `inactiveCloseFoldableIcon` | `React.ReactNode` | (Optional) Icon to display in the close button for foldable MCQ when it is opened |\n| `shouldAnimateOpenFoldableIcon` | `boolean` | (Optional) Should the openFoldableIcon be animated (90° rotation) on opening |\n| `answerContainerStyle` | `ViewStyle` | (Optional) Answer container style |\n| `answerTextStyle` | `TextStyle` | (Optional) Answer text style |\n| `openFoldableBoxStyle` | `ViewStyle` | (Optional) Open foldable button style |\n| `openFoldableLabelStyle` | `TextStyle` | (Optional) Open foldable button label style |\n| `closeFoldableBoxStyle` | `ViewStyle` | (Optional) Close foldable button style |\n| `closeFoldableLabelStyle` | `TextStyle` | (Optional) Close foldable button label style |\n| `validLabel` | `string` | (Optional) Text to put inside tablet |\n| `validLabelStyle` | `ViewStyle` | (Optional) Style for tablet text |\n| `disabled` | `boolean` | (Optional) To make it not editable |\n\n### `PickerField`\n\nA simple presentational picker field with an `openPicker` prop to work with an input picker component like [DatePicker](#datepicker).\n\n| Property | Type | Description |\n| --------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label` | `string` | (Required) Label to display and animate |\n| `value` | `string` | (Required) Value to display in the input. Can be empty |\n| `openPicker` | `() => void` | (Required) Callback fired when user presses the field to open the picker |\n| `isValid` | bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `leftIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the left part of the field. isExpanded is true when the field contain a value |\n| `rightIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the right part of the field. isExpanded is true when the field contain a value |\n| `inputContainerStyle` | `ViewStyle` | (Optional) input container style |\n| `inputStyle` | `TextStyle` | (Optional) Style to pass down to the `TextInput` |\n| `disabled` | `boolean` | (Optional) To make it not editable |\n\n### `DatePickerField`\n\nA date picker field which use the [DatePicker](#datepicker) component.\n\n| Property | Type | Description |\n| ----------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label` | `string` | (Required) Label to display and animate |\n| `value` | `Date` | (Optional) date value to display in the input. |\n| `isValid` | bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `onChange` | `(date?: Date) => void` | (Required) Callback fired when user selects a date |\n| `leftIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the left part of the field. isExpanded is true when the field contain a value |\n| `rightIcon` | `(isExpanded: boolean) => React.ReactNode` | (Optional) Func that return icon to display on the right part of the field. isExpanded is true when the field contain a value |\n| `dateStringFormat` | `string` | (Optional) the format of the value. default is 'DD/MM/YYYY' |\n| `minimumDate` | `Date` | (Optional) The min date selectable in the picker |\n| `maximumDate` | `Date` | (Optional) The max date selectable in the picker |\n| `iosClearButtonText` | `string` | (Optional) The label for the clear button on iOS. Default: 'CLEAR' |\n| `iosValidateButtonText` | `string` | (Optional) The label for the validate button on iOS. Default: 'OK' |\n| `inputContainerStyle` | `ViewStyle` | (Optional) Style to pass down to the input container |\n| `inputStyle` | `TextStyle` | (Optional) Style to pass down to the input text |\n| `modalStyle` | `ViewStyle` | (Optional) Style to pass down to the modal wrapping the date picker |\n| `overlayStyle` | `ViewStyle` | (Optional) Style to pass to the overlay containing the date picker on iOS only |\n| `datePickerIOSContainerStyle` | `ViewStyle` | (Optional) Style to pass to the date picker container on iOS only |\n| `datePickerIOSHeaderStyle` | `ViewStyle` | (Optional) Style to pass to the date picker header on iOS only |\n| `disabled` | `boolean` | (Optional) To make it not editable |\n\n### `PhotoField`\n\nA field that display photos.\nTo take photo with it, you need to implement yourself a camera.\n\n| Property | Type | Description |\n| ---------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label` | `string` | (Required) Label to display and animate |\n| `pictureUris` | `string[]` | (Required) List of picture uris to display |\n| `openCameraButton` | `React.ReactNode` | (Required) Open Camera button to be pressed by the user to open the camera |\n| `isValid` | bool | null | (Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid |\n| `onPressPicture` | `(index: number) => void` | (Optional) Callback fired when user presses a picture |\n| `openCameraButton` | `React.ReactNode` | (Required) The open camera button component |\n| `imageComponent` | `(uri: string, style?: StyleProp\n \n ![](\"https://u4s4z4j6.stackpathcdn.com/wp-content/uploads/2018/10/logo-noir-e1568971859438.png\"){kind=logo}
\n \n
\n Built and maintained by Mobeye.\n
\n\n","readmeFilename":"README.md"}