Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sethcwhiting/react-native-gravityform
A component for displaying Gravity Forms on React Native apps via the Wordpress API
https://github.com/sethcwhiting/react-native-gravityform
android cms component form forms gravity gravity-forms gravityforms headless headless-cms ios react react-native reactjs rest rest-api wordpress
Last synced: 13 days ago
JSON representation
A component for displaying Gravity Forms on React Native apps via the Wordpress API
- Host: GitHub
- URL: https://github.com/sethcwhiting/react-native-gravityform
- Owner: sethcwhiting
- Created: 2019-02-05T20:36:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-05T17:50:57.000Z (over 5 years ago)
- Last Synced: 2024-10-26T02:30:08.810Z (20 days ago)
- Topics: android, cms, component, form, forms, gravity, gravity-forms, gravityforms, headless, headless-cms, ios, react, react-native, reactjs, rest, rest-api, wordpress
- Language: JavaScript
- Size: 38.3 MB
- Stars: 15
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# ✨ React Native Gravityform ✨
[](https://www.npmjs.com/package/react-native-gravityform)
This module includes a react native component for dropping Gravity Forms from your Wordpress site into your native applications.
The package is both **Android** and **iOS** compatible.
This project is compatible with Expo/CRNA without ejecting.
## Installation
```
$ npm install --save react-native-gravityform
```
The solution is implemented in JavaScript so no native module linking is required.
## Usage
### Authentication
Gravity 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.
Once 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:
```javascript
export default {
userName: 'your-wp-username',
password: 'your-wp-password',
};
```
It 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.**
Once your `credentials.js` file is all set, you can import it into any file:
```javascript
import credentials from '...path_to/credentials';
```
### ✨ The GravityForm Component ✨
Import the GravityForm component:
```javascript
import GravityForm from 'react-native-gravityform';
```
Include the component anywhere inside your own components:
```javascript
```
## Props
### siteURL
The base URL for your Wordpress site where your Gravity Forms are hosted.
### formID
The ID of the specific Gravity Form you want to display/post to.
### credentials
The credentials you imported from the file you created in the [Authentication](#authentication) step above.
### style
Out of the box, the GravityForm component is almost entirely unstyled, so you'll probably want to write your own styles for your fields.
This 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:
```javascript
const gformStyles = StyleSheet.create({
fieldInput: {
color: '#224',
backgroundColor: '#eee',
padding: 15,
marginBottom: 15,
fontSize: 18,
},
});
```
### hideFormTitle
Choose wether you want your form title to be hidden or not.
## All Together Now
Here is a basic example of how you would use the GravityForm component within one of your components:
```javascript
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import GravityForm from 'react-native-gravityform';
import credentials from '../Credentials';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
const gformStyles = StyleSheet.create({
fieldLabel: {
fontWeight: 'bold',
fontSize: 16,
color: '#224',
},
fieldInput: {
color: '#224',
backgroundColor: '#eee',
padding: 15,
marginBottom: 15,
fontSize: 18,
},
button: {
backgroundColor: '#1c9',
padding: 15,
borderRadius: 15,
},
buttonText: {
color: '#fff',
fontSize: 20,
textAlign: 'center',
fontWeight: 'bold',
},
});
export default class ContactScreen extends Component {
render() {
return (
);
}
}
```
## Supported Fields
The 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.
The list of the fields currently supported by the GravityForm component are marked with a check mark below:
**Standard:**
- [x] Single Line Text
- [ ] Paragraph Text
- [x] Drop Down
- [ ] Multi Select
- [x] Number
- [x] Checkboxes
- [x] Radio Buttons
- [x] Hidden
- [x] HTML
- [x] Section Break
- [ ] Page Break
**Advanced:**
- [x] Name
- [ ] Date
- [ ] Time
- [x] Phone
- [x] Address
- [ ] Website
- [x] Email
- [ ] File Upload
- [ ] CAPTCHA
- [ ] Password
- [ ] List
## Conditional Logic
Conditional Logic is included and should work right out of the box!
## Validation
There 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.
## Authors
- [Seth C Whiting](https://github.com/sethcwhiting/) - Initial code - [@sethcwhiting](https://twitter.com/sethcwhiting)
## Contributing
Pull requests are very welcome.