{"id":4499,"url":"https://github.com/peter4k/react-native-fm-form","last_synced_at":"2025-08-04T01:32:34.742Z","repository":{"id":57337089,"uuid":"45590405","full_name":"peter4k/react-native-fm-form","owner":"peter4k","description":null,"archived":false,"fork":false,"pushed_at":"2015-11-05T07:31:45.000Z","size":280,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T09:46:21.699Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peter4k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-05T05:41:21.000Z","updated_at":"2021-12-09T15:58:08.000Z","dependencies_parsed_at":"2022-09-12T13:12:33.031Z","dependency_job_id":null,"html_url":"https://github.com/peter4k/react-native-fm-form","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/peter4k/react-native-fm-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-fm-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-fm-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-fm-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-fm-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peter4k","download_url":"https://codeload.github.com/peter4k/react-native-fm-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter4k%2Freact-native-fm-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268232710,"owners_count":24217310,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-01-05T20:17:14.448Z","updated_at":"2025-08-04T01:32:34.344Z","avatar_url":"https://github.com/peter4k.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Forms","UI"],"readme":"# react-native-fm-form\nFM Form is a module for React Native to fast generate pages with a form. It works like Backbone forms. Using this module you can generate a page in 5 minutes!\n\nCurrently only support iOS!!!\n\nI build this module because I am lazy... The original purpose of this project is for me to develop an app faster. I believe there are many bugs and design issue. If you are interesting in this project please help me improve it!\n\ngenerate a page like this in 5 mins:\n\n![screenshot](https://raw.githubusercontent.com/peter4k/react-native-fm-form/master/screenshot.png)\n\n### set up\n`npm install react-native-fm-form`\nor add `\"react-native-fm-form\" : \"^0.0.1\"` to your package.json and run `npm install`.\n\n`var FMForm = require('react-native-fm-form')` to start using it.\n\n### generate a page using FM Form:\n1. right a schema for the FM Form:\n_genSchema : function(){\n\treturn [\n\t\t{\n\t\t\ttype: 'textInput',\n\t\t\tlable: 'Text Input',\n\t\t\treference: 'textInput'\n\t\t}\n\t]\n}\n\n2. Use FMForm as a React component:\nrender: function(){\n\treturn (\n\t\t\u003cView\u003e\n\t\t\t\u003cText\u003eThis is a FM Form example\u003c/Text\u003e\n\t\t\t\u003cFMForm\n                schema={this._genSchema}\n                delegate={this}\n                ref={'form'}\n                style={{marginTop: 50}}\n                initData={{\n                    custom: 0,\n                }}\n\t\t\u003c/View\u003e\n\t)\n}\n\n### Form properties:\n1. delegate: the component that owns FM Form instance. All the form value will be storing in this component.\n2. initData: the initial data of different form field.\n3. onFormRender: a function that will be called just after the form is rendered\n\n### accessing form data:\nThe form data will be stored in this.FMFormData object of its delegate.\nFor example:\n```\nvar Example = React.creatClass({\n\trender: function(){\n\t\treturn (\n\t\t\t\u003cView\u003e\n\t\t\t\t\u003cText\u003eThis is a FM Form example\u003c/Text\u003e\n\t\t\t\t\u003cFMForm\n\t                schema={this._genSchema}\n\t                delegate={this}\n\t                ref={'form'}\n\t                style={{marginTop: 50}}\n\t                initData={{\n\t                    custom: 0,\n\t                }}\n\t             \u003cText onPress={this._onSubmit}\u003eOn submit\u003c/Text\u003e\n\t\t\t\u003c/View\u003e\n\t\t)\n\t},\n\t_onSubmit: function(){\n\t\t//accessing form data\n\t\tconsole.log(this.FMFormData);\n\t}\n})\n```\n\n### editors: \neach editor will have a corresponding form field, which is specified by the 'reference' property.\nFor example, if a text input has 'name' as the reference, the input value of this field will be stored in FMFormData.name.\n\n\n#### Text Input:\n```\n{\n    type: 'textInput',\n    label: 'Text Input',\n    placeholder: 'I am a Text Input',\n    reference: 'textInput',\n    autoFocus: false,\n    secureTextEntry: false,\n    keyboardType: 'default',\n    onChangeText: function(text){\n    \tconsole.log('input: ' + text);\n\t},\n\tonFocus: function(text){\n    \tconsole.log('text input focused');\n\t},\n\tonSubmitEditing: function(){\n    \tconsole.log('text input submitted');\n\t},\n\tonBlur: function(){\n\t\tconsole.log('text input blurred');\n\t},\n},\n```\n\n#### Button:\n```\n{\n    type: 'button',\n    label: 'Button',\n    buttonLabel: function(){\n        return \"I am a button, click me!\"\n    },\n    onClick: function(){\n        AlertIOS.alert('Button clicked');\n    }\n},\n```\n\n#### Switch:\n```\n{\n    type: 'switch',\n    label: 'Switch',\n    onLabel: 'I am a switch, I am on',\n    offLabel: 'I am a switch, I am off',\n    reference: 'switch',\n},\n```\n\n#### Select:\n```\n{\n    type: 'select',\n    label: 'Select',\n    reference: 'minLimit',\n    options: [\n        '1', '2'\n    ],\n    labels:\n    [\n        'option 1', 'option 2'\n    ],\n    defaultButtonLabel: 'I am a select, click me!'\n},\n```\n\n#### Spacer:\n```\n{\n    type: 'spacer'\n},\n```\n\n#### picture:\n```\n{\n    type: 'picture',\n    labelWithNoPicture: 'I am an image picker',\n    reference: 'image',\n}\n```\nTo use picture selector, you have to prepare the project with module: \n\n\n#### custom\n```\n{\n    type: 'custom',\n    reference: 'custom',\n    renderRow:function(rowData:object, sectionID:number, rowID:number, fieldValue){\n        return (\n            \u003cText\n                style={{color: 'red'}}\n                onPress={()=\u003e{\n                    self.FMFormData['custom'] ++;\n                    self.refs.form.formShouldReload();\n                }}\n                \u003eI am a custom row, my value is: {fieldValue}, click me!\u003c/Text\u003e\n        )\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter4k%2Freact-native-fm-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeter4k%2Freact-native-fm-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter4k%2Freact-native-fm-form/lists"}