✨ 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 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:

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:

import credentials from '...path_to/credentials';

✨ The GravityForm Component ✨

Import the GravityForm component:

import GravityForm from 'react-native-gravityform';

Include the component anywhere inside your own components:

<GravityForm
    siteURL="https://www.your-wordpress-site.com"
    formID="1"
    credentials={credentials}
    style={gformStyles} // optional
    hideFormTitle={true} // optional
/>

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 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), like so:

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:

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 (
            <View style={styles.container}>
                <GravityForm
                    siteURL="https://www.your-wordpress-site.com"
                    formID="3"
                    credentials={credentials}
                    style={gformStyles}
                    hideFormTitle={true}
                />
            </View>
        );
    }
}

Supported Fields

The goal for this component is to support all Standard and Advanced 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 - Initial code - @sethcwhiting

Contributing

Pull requests are very welcome.