Natively Pronounced Mandarin

    react-native-gravityform

    1.0.15 • Public • Published

    ✨ React Native Gravityform ✨

    Version

    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:

    • Single Line Text
    • Paragraph Text
    • Drop Down
    • Multi Select
    • Number
    • Checkboxes
    • Radio Buttons
    • Hidden
    • HTML
    • Section Break
    • Page Break

    Advanced:

    • Name
    • Date
    • Time
    • Phone
    • Address
    • Website
    • 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

    Contributing

    Pull requests are very welcome.

    Install

    npm i react-native-gravityform

    DownloadsWeekly Downloads

    7

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    4.8 MB

    Total Files

    18

    Last publish

    Collaborators

    • avatar