@joyfill/components-react-native v0.6.1
@joyfill/components-react-native
We recommend visiting our official react-native setup guide https://docs.joyfill.io/docs/react-native.
Project Requirements
Note userAccessTokens & identifiers will need to be stored on your end (usually on a user and set of existing form field-based data) in order to interact with our API and UI Components effectively
- React and React DOM v17+
- React-Native v0.70.0+
Install Dependency
React-Native CLI (bare)
$ npm install @joyfill/components-react-native@latest react-native-webview react-native-svg @react-native-community/datetimepicker --save
$ cd ios && pod install
$ yarn add @joyfill/components-react-native@latest react-native-webview react-native-svg @react-native-community/datetimepicker
$ cd ios && pod install
Expo (managed)
$ npx expo install @joyfill/components-react-native@latest react-native-webview react-native-svg @react-native-community/datetimepicker
Implement your code
For full examples please see https://docs.joyfill.io/docs/react-native.
Below is a usable example of our react-native document native embedded. This will show a readonly or fillable depending on the mode
form to your users. The document (form) shown is based on your documentId
.
Make sure to replace the userAccessToken
and documentId
. Note that documentId
is just for this example, you can call our List all documents endpoint and grab an ID from there.
import React, { useState, useEffect } from 'react';
import { Dimensions, View } from 'react-native';
import { joyfillRetrieve } from './api.js';
import { JoyDoc, getDefaultDocument } from '@joyfill/components-react-native';
const screenWidth = Dimensions.get('window').width;
const userAccessToken = '<REPLACE_ME>';
const documentId = '<REPLACE_ME>';
function Document() {
const [doc, setDoc] = useState(getDefaultDocument());
// retrieve the document from our api (you can also pass an initial documentId into JoyDoc)
useEffect(() => {
const response = await joyfillRetrieve(documentId, userAccessToken).then(doc => {
setDoc(response);
});
}, []);
return (
<View style={{flex: 1}}>
<JoyDoc
mode="fill"
doc={doc}
width={screenWidth}
onChange={(changelogs, doc) => {
console.log('onChange doc: ', doc);
setDoc(doc);
}}
onUploadAsync={async (params, fileUploads) => {
// to see a full utilization of upload see api.js -> examples
console.log('onUploadAsync: ', fileUploads);
}}
/>
</View>
);
}
export default Document;
JoyDoc Params
mode: 'fill' | 'readonly'
- Required*
- Enables and disables certain JoyDoc functionality and features.
- Options
fill
is the mode where you simply input the field data into the formreadonly
is the mode where everything in the form is set to read-only.
doc: object
- The default JoyDoc JSON starting object to load into the component view. Must be in the JoyDoc JSON data structure.
initialPageId: string
- Specify the initial page to display in the form.
- Utilize the
_id
property of a Page object. For instance,page._id
. - If page is not found within the
doc
it will fallback to displaying the first page in thepages
array.
navigation: object
- Display/hide page navigation.
- Set the
pages
property to true (display) or false (hide). For instance,{pages: false}
hides the page navigation.
onChange: (changelogs: object_array, doc: object) => {}
- Used to listen to any changes to the style, layout, values, etc. across all modes.
changelogs: object_array
- Can contain one ore more of the changelog object types supported.
doc: object
- Fully updated JoyDoc JSON structure with changes applied.
theme: object
- Specify custom theme properties.
- Sample theme object
{ fontFamily: "Arial", button: { primary: { fontWeight: "bold", borderRadius: "10px", ... } }
- The button
primary
,secondary
, anddanger
support the React Native Supported Styles fontFamily: String
- Apply custom font family to display text.
- IMPORTANT: If you're using a custom font, you are responsible to ensure the fonts are loaded before rendering the component. Could result in an error if font is not loaded properly before render.
button.primary: object
- Specifies styles for primary field buttons.
button.secondary: object
- Specifies styles for secondary internal field buttons.
button.danger: object
:- Specifies styles for delete buttons.
Components Helper Methods
getDefaultDocument
- Get a default Joyfill Document object
getDefaultTemplate
- Get a default Joyfill Template object
getDocumentFromTemplate: ( template: object )
- Generate a Joyfill Document object from a Joyfill Template object
duplicate: ( original: object, defaults: object )
- Duplicate a Joyfill Document or Template object.
duplicatePage: ( original: object, fileId: string, pageId: string )
- Duplicate a Joyfill Document or Template Page object.
- Returns:
{ doc: object, changelogs: array }
doc
fully updated Document or Template with the page addedchangelogs
array of changelogs for new duplicate page.
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
2 months ago
3 months ago
4 months ago
4 months ago
5 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago