Documentation Index
Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
Use this file to discover all available pages before exploring further.
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);
}}
/>
);
}
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.
