React Native
Learn how to render your first form using the Joyfill React Native SDK.
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.
Prerequisites
To get the most out of this guide, you’ll need the following:
- Complete the Setup Guide
- A User Access Token (see setup guide)
- A Template Identifier (see setup guide)
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);
}}
/>
);
}
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 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.
Updated 8 months ago