Embed a form builder with React Native

In this guide, we'll show how to embed a form builder with React Native using the Joyfill React Native forms SDK, and learn how to render your first form in minutes.

You can think of Joyfill as a sort of Stripe or Twilio, but for forms.

How to embed a form builder with React Native + Joyfill

Step 1: Create Joyfill Account
Step 2: Generate Your userAccessToken
Step 3: Create Your First Template
Step 4: Get your template identifier
Step 5: Install

If you don't need a tutorial and just want to get started, please consider reading the quickstart docs instead.

Why Joyfill’s embeddable form builder?

Forms require a lot more engineering time, resources, and ongoing maintenance than you would first expect. Building a flexible, reliable, and scalable form solution is hard, time-consuming, and comes with a lot of unknown features. Conditional logic, revision management, multi-device compatibility, user collaboration, field validation, export engine, template library, just to name a few.

This is where we come in. With Joyfill you can deploy a form builder in under 15 minutes, and we take care of all of the above and more.

Joyfill's React Native SDK supports raw react native and expo projects. The SDK is NOT a wrapped web-view. The SDK uses all pure react native components in order to provide the best possible performance and support across your react native and expo apps.

The Prerequisites

Just follow the steps below and you'll be up and running shortly.

Step 1: Create Joyfill Account

To begin working with Joyfill, go to Joyfill's Platform and create an account (jump to step 2 if you already have an account). By creating an account you will add yourself as the first user to your newly created Joyfill Organization and be placed inside the Joyfill Manager.

Step 2: Generate Your userAccessToken

Once you're inside the Joyfill Manager you will want to select from the top navigation bar “Settings & Users” > “Manager Users” > and click the "Access Tokens" button next to your user. Once the modal appears select "Add Access Token". Copy and securely store your access token for later use.

Step 3: Create Your First Template

Create your first template within the Joyfill Manager by going to the Template Library tab in the top navigation and click the "Add Template".

We recommend following this guide Create Your First Template when creating your first template. This makes it easy to experiment with the different parts of the Joyfill Platform easily.

Step 4: Get your template identifier

Inside the Joyfill Manager you will want to select from the top navigation bar Template Library and under your Templates table list within the column ID copy that for pasting into our example React/JS guides.

Embed the form builder

By now you should have the following items:

• Completed the Setup Guide
• A User Access Token (see setup guide)
• A Template Identifier (see setup guide)

Requirements

• Review SDK README

Step 5: Install the form builder

• Review SDK Installation

Step 6: Usage

• Add the Template identifier from the previous setup step to the App.js file.
• Add the User Access Token from the preview setup step to the api.js file.

App.js:

import React, { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';
import { retrieveTemplate } from '../api.js';

import { JoyDoc } from '@joyfill/components-react-native';

const screenWidth = Dimensions.get('window').width;

function App() {

  const [ template, setTemplate ] = useState(null);

  /**
   * Add your template identifier
   */
  const identifier = '<REPLACE_WITH_TEMPLATE_IDENIFIER>';

  /**
   * Retrieve template via the Joyfill API 
   */
  useEffect(() => {

    const handleRetrieveTemplate = async () => {
      const response = await retrieveTemplate(identifier);
      setTemplate(response);
    };

    handleRetrieveTemplate();

  }, []);

  return (
    <JoyDoc
      mode="fill"
      doc={template}
      width={screenWidth}
      onChange={(changelogs, doc) => {

        /**
         * Changelogs represent the individual change that was made
         * Data represents the entire data structure with all new changes applied.
         */
        console.log('>>>>>>>>: ', changelogs, doc);

      }}
    />
  );

}

api.js:

const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";

export const retrieveTemplate = async (identifier) => {

  //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
  const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
    method: 'GET',
    mode: 'cors',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
  });

  const data = await response.json();
  return data;
}

Do not wrap JoyDoc component inside of a ScrollView. JoyDoc rendering optimizations will not working properly inside of ScrollView and will introduce unintended bugs.

React Native form builder guide summary

This guide has provided a comprehensive walkthrough on embedding a form builder with React Native using Joyfill's React Native SDK. By following the outlined steps, you can efficiently render your first form with the assurance of optimal performance and support across both raw React Native and Expo projects. The guide emphasizes the importance of completing the setup guide, obtaining a User Access Token, and securing a Template Identifier to ensure a seamless integration process.

The SDK, distinguished by its use of pure React Native components, distinguishes itself from wrapped web-views, promising superior performance. The provided code snippets in the App.js and api.js files facilitate easy integration of the form builder into your React Native project. However, a crucial reminder is issued not to wrap the JoyDoc component inside a ScrollView, as doing so may compromise rendering optimizations and introduce unintended bugs.

For those seeking to explore the full range of Joyfill SDK capabilities and workflows, an invitation is extended to try the provided full example project. This additional resource promises to showcase a more extensive array of features, allowing users to further leverage the potential of the Joyfill SDK in their React Native applications.

Try it yourself

If you’re looking for a full example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.

• Joyfill React Native Example
• SDK NPM Package