Skip to main content
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.

​
Requirements

​
1. Install

​
2. 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.
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);

      }}
    />
  );

}

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

​
3. 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.