{"id":15739681,"url":"https://github.com/sethcwhiting/react-native-gravityform","last_synced_at":"2025-04-01T14:32:06.343Z","repository":{"id":57337372,"uuid":"169308878","full_name":"sethcwhiting/react-native-gravityform","owner":"sethcwhiting","description":"A component for displaying Gravity Forms on React Native apps via the Wordpress API","archived":false,"fork":false,"pushed_at":"2019-04-05T17:50:57.000Z","size":40110,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-15T13:34:39.133Z","etag":null,"topics":["android","cms","component","form","forms","gravity","gravity-forms","gravityforms","headless","headless-cms","ios","react","react-native","reactjs","rest","rest-api","wordpress"],"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/sethcwhiting.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":"2019-02-05T20:36:45.000Z","updated_at":"2024-04-26T12:57:10.000Z","dependencies_parsed_at":"2022-09-13T02:31:34.785Z","dependency_job_id":null,"html_url":"https://github.com/sethcwhiting/react-native-gravityform","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethcwhiting%2Freact-native-gravityform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethcwhiting%2Freact-native-gravityform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethcwhiting%2Freact-native-gravityform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sethcwhiting%2Freact-native-gravityform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sethcwhiting","download_url":"https://codeload.github.com/sethcwhiting/react-native-gravityform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246604612,"owners_count":20804100,"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":["android","cms","component","form","forms","gravity","gravity-forms","gravityforms","headless","headless-cms","ios","react","react-native","reactjs","rest","rest-api","wordpress"],"created_at":"2024-10-04T02:05:59.584Z","updated_at":"2025-04-01T14:32:05.714Z","avatar_url":"https://github.com/sethcwhiting.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ React Native Gravityform ✨\n\n[![Version](https://img.shields.io/npm/v/react-native-gravityform.svg)](https://www.npmjs.com/package/react-native-gravityform)\n\nThis module includes a react native component for dropping Gravity Forms from your Wordpress site into your native applications.\n\nThe package is both **Android** and **iOS** compatible.\n\nThis project is compatible with Expo/CRNA without ejecting.\n\n## Installation\n\n```\n$ npm install --save react-native-gravityform\n```\n\nThe solution is implemented in JavaScript so no native module linking is required.\n\n## Usage\n\n### Authentication\n\nGravity Forms requires that API requests be authenticated. In order to get this working, install Wordpress's [JSON Basic Authentication](https://github.com/WP-API/Basic-Auth) plugin.\n\nOnce you've done this, make a file named something to the effect of `credentials.js` and add it anywhere in your project. The entire contents of this file should look something like this:\n\n```javascript\nexport default {\n    userName: 'your-wp-username',\n    password: 'your-wp-password',\n};\n```\n\nIt may be a good idea to make a new Wordpress user with read/write permissions for the sole purpose of posting to your Gravity Forms and include that new user's information to the file above. Also, **make sure to include this file in your `.gitignore` so no one ever sees this information.**\n\nOnce your `credentials.js` file is all set, you can import it into any file:\n\n```javascript\nimport credentials from '...path_to/credentials';\n```\n\n### ✨ The GravityForm Component ✨\n\nImport the GravityForm component:\n\n```javascript\nimport GravityForm from 'react-native-gravityform';\n```\n\nInclude the component anywhere inside your own components:\n\n```javascript\n\u003cGravityForm\n    siteURL=\"https://www.your-wordpress-site.com\"\n    formID=\"1\"\n    credentials={credentials}\n    style={gformStyles} // optional\n    hideFormTitle={true} // optional\n/\u003e\n```\n\n## Props\n\n### siteURL\n\nThe base URL for your Wordpress site where your Gravity Forms are hosted.\n\n### formID\n\nThe ID of the specific Gravity Form you want to display/post to.\n\n### credentials\n\nThe credentials you imported from the file you created in the [Authentication](#authentication) step above.\n\n### style\n\nOut of the box, the GravityForm component is almost entirely unstyled, so you'll probably want to write your own styles for your fields.\n\nThis can be done by including a new StyleSheet and referencing the _built-in element names_ ([see full list](https://github.com/sethcwhiting/react-native-gravityform/blob/master/elementNames.md)), like so:\n\n```javascript\nconst gformStyles = StyleSheet.create({\n    fieldInput: {\n        color: '#224',\n        backgroundColor: '#eee',\n        padding: 15,\n        marginBottom: 15,\n        fontSize: 18,\n    },\n});\n```\n\n### hideFormTitle\n\nChoose wether you want your form title to be hidden or not.\n\n## All Together Now\n\nHere is a basic example of how you would use the GravityForm component within one of your components:\n\n```javascript\nimport React, { Component } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport GravityForm from 'react-native-gravityform';\nimport credentials from '../Credentials';\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#fff',\n    },\n});\n\nconst gformStyles = StyleSheet.create({\n    fieldLabel: {\n        fontWeight: 'bold',\n        fontSize: 16,\n        color: '#224',\n    },\n    fieldInput: {\n        color: '#224',\n        backgroundColor: '#eee',\n        padding: 15,\n        marginBottom: 15,\n        fontSize: 18,\n    },\n    button: {\n        backgroundColor: '#1c9',\n        padding: 15,\n        borderRadius: 15,\n    },\n    buttonText: {\n        color: '#fff',\n        fontSize: 20,\n        textAlign: 'center',\n        fontWeight: 'bold',\n    },\n});\n\nexport default class ContactScreen extends Component {\n    render() {\n        return (\n            \u003cView style={styles.container}\u003e\n                \u003cGravityForm\n                    siteURL=\"https://www.your-wordpress-site.com\"\n                    formID=\"3\"\n                    credentials={credentials}\n                    style={gformStyles}\n                    hideFormTitle={true}\n                /\u003e\n            \u003c/View\u003e\n        );\n    }\n}\n```\n\n## Supported Fields\n\nThe goal for this component is to support all [Standard](https://docs.gravityforms.com/form-fields/#standard-fields) and [Advanced](https://docs.gravityforms.com/form-fields/#advanced-fields) fields offered by Gravity Forms.\n\nThe list of the fields currently supported by the GravityForm component are marked with a check mark below:\n\n**Standard:**\n\n-   [x] Single Line Text\n-   [ ] Paragraph Text\n-   [x] Drop Down\n-   [ ] Multi Select\n-   [x] Number\n-   [x] Checkboxes\n-   [x] Radio Buttons\n-   [x] Hidden\n-   [x] HTML\n-   [x] Section Break\n-   [ ] Page Break\n\n**Advanced:**\n\n-   [x] Name\n-   [ ] Date\n-   [ ] Time\n-   [x] Phone\n-   [x] Address\n-   [ ] Website\n-   [x] Email\n-   [ ] File Upload\n-   [ ] CAPTCHA\n-   [ ] Password\n-   [ ] List\n\n## Conditional Logic\n\nConditional Logic is included and should work right out of the box!\n\n## Validation\n\nThere is currently no form validation included with the GravityForm component. This is a major priority for the team and will be coming as soon as we can possibly get to it.\n\n## Authors\n\n-   [Seth C Whiting](https://github.com/sethcwhiting/) - Initial code - [@sethcwhiting](https://twitter.com/sethcwhiting)\n\n## Contributing\n\nPull requests are very welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethcwhiting%2Freact-native-gravityform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsethcwhiting%2Freact-native-gravityform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsethcwhiting%2Freact-native-gravityform/lists"}