# react-native-chocoforms > A package that aims to speed up form creation in react native Latest version **1.1.65** (published 2025-06-25) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-chocoforms pnpm add react-native-chocoforms yarn add react-native-chocoforms bun add react-native-chocoforms ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.65 | | Published | 2025-06-25 | | First published | 2022-06-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 75.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | chocostack | | Maintainers | chocostack | | Keywords | custom forms, form, form generator | ## Links - npm: https://www.npmjs.com/package/react-native-chocoforms - Repository: https://github.com/chocostack/react-native-chocoforms - Homepage: https://github.com/chocostack/react-native-chocoforms#readme - Issues: https://github.com/chocostack/react-native-chocoforms/issues - npm.io page: https://npm.io/package/react-native-chocoforms ## Dependencies (5) - [react-native-modal](https://npm.io/package/react-native-modal.md) ^13.0.1 - [@chocostack/maskifier](https://npm.io/package/@chocostack/maskifier.md) ^1.0.0 - [react-native-select-dropdown](https://npm.io/package/react-native-select-dropdown.md) ^3.3.4 - [@chocostack/react-native-options-modal](https://npm.io/package/@chocostack/react-native-options-modal.md) ^1.0.4 - [@react-native-community/datetimepicker](https://npm.io/package/@react-native-community/datetimepicker.md) ^6.1.3 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.65 (latest) — 2025-06-25 - 1.1.64 — 2025-06-25 - 1.1.63 — 2025-05-02 - 1.1.62 — 2025-05-02 - 1.1.61 — 2025-04-29 - 1.1.60 — 2025-02-24 - 1.1.59 — 2025-02-21 - 1.1.58 — 2025-01-24 - 1.1.57 — 2025-01-24 - 1.1.56 — 2025-01-24 - 1.1.55 — 2024-12-17 - 1.1.54 — 2024-12-17 - 1.1.53 — 2024-09-08 - 1.1.52 — 2024-09-08 - 1.1.51 — 2024-09-06 - … 53 more at https://npm.io/package/react-native-chocoforms/versions ## README # react-native-chocoforms A package that aims to automate form generation in react native. Doing so by passing a single configuration object to the component. ## Example App This package includes an example Expo app that demonstrates all the input types and validation options available in ChocoFormTS. To run the example app: 1. Install the package: `npm install react-native-chocoforms` 2. Navigate to the example directory: `cd node_modules/react-native-chocoforms/example` 3. Install dependencies: `npm install` 4. Start the Expo server: `npm start` For more details, see the [Example App README](./example/README.md). ## props #### Component props | Parameter | Type | Description | | :-------- | :------- | :------------------------- | | `form` | `object` | **Required**. Your form configuration object, details below | | `onFormChange` | `function` | **Required**. Callback function that receives the updated form as a parameter | | `lang` | `enUS/esMX` | **Required**. Language in which the validation messages will be shown | | `inputStyle` | `object` | Optional. Style applied to each input in the form before interacted | | `inputStyleTouched` | `object` | Optional. Style applied to each input in the form when it is touched | | `inputStyleBlured` | `object` | Optional. Style applied to each input in the form when it is blurred | ## Example of the configuration object ```javascript this.state= { form: { controls: { UserName: { elementType: 'input', // what kind of input should it render (input, currency, time, date, select) elementConfig: { // Everything here will be copied to the input directly placeholder: 'Username', autoCapitalize: 'words' }, label: 'Username*', // Label descriptive of the input value: '', errorMessage: '', // Error message of this specific input, managed by the component validation: { // All validations required: true, isEmail: true, //Basic validation for an email format aaaa@bbb.cc isPhone: false, // 10 digit number validation isEmailOrPhone: false, // If it's either an email or a phone it's valid limitAllowedCharacters: true, // Characters used must be one of these: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.1234567890 isPassword: false, // Checks for a min length of 6 characters, an uppercase and a number minLength: false, // Minimun length of characters for the input to be valid maxLength: false, // Max length of characters for the input to be valid equalsTo: 'NameOfSomeOtherControlInTheConfiguration', // Validates that this input has the same value as another input in the controls part of the configuration isUrl: false // Regex validation for an url }, }, RoleID: { elementType: 'select', elementConfig: { placeholder: 'Role', }, label: 'Role*', value: '', text: '', // For 'select' only options: [{ // For 'select' only id: 1, text: 'example' },{ id: 2, text: 'example 2' }], errorMessage: '', validation: { required: true }, }, Password: { elementType: 'input', elementConfig: { placeholder: 'Password', autoCapitalize: 'none' }, label: 'Password*', value: '', errorMessage: '', validation: { required: true, isPassword: true }, }, }, isValidForm: false, // Will determine if the form is inline with the validations in the config object. generalError:{ show: true, text: 'Some custom error you want to show' } } } ``` ## Badges [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs) --- _Source: https://npm.io/package/react-native-chocoforms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._