{"id":4491,"url":"https://github.com/esbenp/react-native-clean-form","last_synced_at":"2025-04-04T11:16:44.797Z","repository":{"id":57336060,"uuid":"78021549","full_name":"esbenp/react-native-clean-form","owner":"esbenp","description":"Easy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components","archived":false,"fork":false,"pushed_at":"2019-09-29T05:07:21.000Z","size":761,"stargazers_count":477,"open_issues_count":42,"forks_count":76,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-28T10:07:35.005Z","etag":null,"topics":["react-native","redux","redux-form","styled-components"],"latest_commit_sha":null,"homepage":"http://esbenp.github.io/2017/01/06/react-native-redux-form-immutable-styled-components/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/esbenp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-04T14:14:23.000Z","updated_at":"2025-01-04T22:09:51.000Z","dependencies_parsed_at":"2022-09-11T05:41:38.367Z","dependency_job_id":null,"html_url":"https://github.com/esbenp/react-native-clean-form","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esbenp%2Freact-native-clean-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esbenp%2Freact-native-clean-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esbenp%2Freact-native-clean-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esbenp%2Freact-native-clean-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esbenp","download_url":"https://codeload.github.com/esbenp/react-native-clean-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166171,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","redux","redux-form","styled-components"],"created_at":"2024-01-05T20:17:14.208Z","updated_at":"2025-04-04T11:16:44.781Z","avatar_url":"https://github.com/esbenp.png","language":"JavaScript","readme":"# react-native-clean-form\n\n[![npm](https://img.shields.io/npm/dy/react-native-clean-form.svg)](https://www.npmjs.com/package/react-native-clean-form)\n[![Dependency Status](https://david-dm.org/esbenp/react-native-clean-form.svg)](https://david-dm.org/esbenp/react-native-clean-form)\n[![devDependency Status](https://david-dm.org/esbenp/react-native-clean-form/dev-status.svg)](https://david-dm.org/esbenp/react-native-clean-form#info=devDependencies\u0026view=table)\n\nEasy react-native forms using bootstrap-like syntax with redux-form+immutablejs integration. Styled using styled-components\n\n## Big kudos to Artyom Khamitov\n\n**The look of the form was [inspired by this shot by Artyom Khamitov](https://dribbble.com/shots/3151351-Checkout-form).\n[Check out his profile on Dribbble](https://dribbble.com/gmax).**\n\n---\n\n\u003cimg align=\"right\" src=\"docs/stacked.jpg\" width=\"275\"\u003e\n\u003cimg align=\"right\" src=\"docs/normal.jpg\" width=\"275\"\u003e\n\n* Form elements with syntax inspired by Bootstrap\n* Styled using [styled-components](https://github.com/styled-components/styled-components). Easily extendible.\n* Integrated with [redux-form](https://github.com/erikras/redux-form)\n* Supports [immutable.js](https://github.com/facebook/immutable-js) state\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n---\n\n## Installation\n\nRun `npm install --save react-native-clean-form`\n\nThe form uses `react-native-vector-icons` so it is important the fonts are linked by using `react-native link` \n[or one of the other options available](https://github.com/oblador/react-native-vector-icons#ios).\n\n## Example\n\n[I have written an article on my blog about React Native and redux-form](http://esbenp.github.io/2017/01/06/react-native-redux-form-immutable-styled-components/)\n\n**[For a complete example check out the example folder](https://github.com/esbenp/react-native-clean-form/tree/master/example)**\n\n## Usage\n\n```javascript\nimport {\n  ActionsContainer,\n  Button,\n  FieldsContainer,\n  Fieldset,\n  Form,\n  FormGroup,\n  Input,\n  Label,\n  Switch\n} from 'react-native-clean-form'\n\nconst FormView = props =\u003e (\n  \u003cForm\u003e\n    \u003cFieldsContainer\u003e\n      \u003cFieldset label=\"Contact details\"\u003e\n        \u003cFormGroup\u003e\n          \u003cLabel\u003eFirst name\u003c/Label\u003e\n          \u003cInput placeholder=\"Esben\" onChangeText={this.onFirstNameChange} /\u003e\n        \u003c/FormGroup\u003e\n        \u003cFormGroup\u003e\n          \u003cLabel\u003eEmail\u003c/Label\u003e\n          \u003cInput placeholder=\"esbenspetersen@gmail.com\" onChangeText={this.onEmailChange} /\u003e\n        \u003c/FormGroup\u003e\n      \u003c/Fieldset\u003e\n      \u003cFieldset label=\"Password\" last\u003e\n        \u003cFormGroup\u003e\n          \u003cLabel\u003ePassword\u003c/Label\u003e\n          \u003cInput placeholder=\"Enter a password\" onChangeText={this.onPasswordChange} /\u003e\n        \u003c/FormGroup\u003e\n        \u003cFormGroup\u003e\n          \u003cLabel\u003eRepeat password\u003c/Label\u003e\n          \u003cInput placeholder=\"Repeat your password\" onChangeText={this.onRepeatPasswordChange} /\u003e\n        \u003c/FormGroup\u003e\n        \u003cFormGroup border={false}\u003e\n          \u003cLabel\u003eSave my password\u003c/Label\u003e\n          \u003cSwitch onValueChange={this.toggleSaveMyPassword} /\u003e\n        \u003c/FormGroup\u003e     \n      \u003c/Fieldset\u003e\n    \u003c/FieldsContainer\u003e\n    \u003cActionsContainer\u003e\n      \u003cButton icon=\"md-checkmark\" iconPlacement=\"right\" onPress={this.save}\u003eSave\u003c/Button\u003e\n    \u003c/ActionsContainer\u003e\n  \u003c/Form\u003e\n)\n```\n\n## Usage with redux-form\n\n```javascript\nimport React from 'react'\nimport { reduxForm } from 'redux-form'\nimport {\n  ActionsContainer,\n  Button,\n  FieldsContainer,\n  Fieldset,\n  Form,\n  FormGroup,\n  Label,\n} from 'react-native-clean-form'\nimport {\n  Input,\n  Switch\n} from 'react-native-clean-form/redux-form'\nimport { View,Text } from 'react-native'\n\nconst onSubmit = (values, dispatch) =\u003e {\n  return new Promise((resolve) =\u003e {\n    setTimeout(() =\u003e {\n      console.log(values)\n      resolve()\n    }, 1500)\n  })\n}\n\nconst FormView = props =\u003e {\n  const { handleSubmit, submitting } = this.props\n\n  return (\n    \u003cForm\u003e\n      \u003cFieldsContainer\u003e\n        \u003cFieldset label=\"Contact details\"\u003e\n          \u003cInput name=\"first_name\" label=\"First name\" placeholder=\"John\" /\u003e\n          \u003cInput name=\"email\" label=\"Email\" placeholder=\"something@domain.com\" /\u003e\n        \u003c/Fieldset\u003e\n        \u003cFieldset label=\"Shipping details\" last\u003e\n          \u003cInput name=\"password\" label=\"Address\" placeholder=\"Hejrevej 33\" /\u003e\n          \u003cInput name=\"password_repeat\" label=\"City\" placeholder=\"Copenhagen\" /\u003e\n          \u003cSwitch label=\"Save my details\" border={false} name=\"save_details\" /\u003e\n        \u003c/Fieldset\u003e\n      \u003c/FieldsContainer\u003e\n      \u003cActionsContainer\u003e\n        \u003cButton icon=\"md-checkmark\" iconPlacement=\"right\" onPress={handleSubmit(onSubmit)} submitting={submitting}\u003eSave\u003c/Button\u003e\n      \u003c/ActionsContainer\u003e\n    \u003c/Form\u003e\n  )\n}\n\nexport default reduxForm({\n  form: 'Form'\n})(FormView)\n```\n\n## Usage with redux-form and Immutable.js\n\nTo make it work with Immutable.js import `Input`, `Select`, and `Switch` from `react-native-clean-form/redux-form-immutable` \ninstead of `react-native-clean-form/redux-form`. \n[Also, check out the included example](https://github.com/esbenp/react-native-clean-form/tree/master/example)\n\n## Validation\n\n\u003cimg align=\"right\" src=\"docs/validation.jpg\" width=\"375\"\u003e\n\nIf integrating with `redux-form` validation is supported right out of the box. Just add a `validation` key to `reduxForm` \nyour normally would.\n\nIf not using `redux-form`, there is an `error` prop on `FormGroup` which will display the error if used.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Async feedback\n\n\u003cimg align=\"right\" src=\"docs/async_feedback.jpg\" width=\"375\"\u003e\n\nThe `Button` component has a `submitting` prop. If true, a spinner will be displayed.\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Run the example\n\nClone the repo first.\n\n```\ngit clone https://github.com/esbenp/react-native-clean-form \u0026\u0026 cd react-native-clean-form\n```\n\nInstall dependencies.\n\n```\ncd example\nnpm install\n```\n\nRun the simulator.\n\n```\nreact-native run-ios\n```\n","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["Forms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesbenp%2Freact-native-clean-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesbenp%2Freact-native-clean-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesbenp%2Freact-native-clean-form/lists"}