Extensions

Extensions

Extensibility mechanisms allow users to add custom form elements.

Usage

1 - Add the element to the element's array in the JSON file containing the form description. The type of the element must start with "ext:" followed by the element's name. The element can have as much props as wanted/necessary.

{
    "type": "ext:elementxyz",
    "prop1": "foo",
    "prop2": "bar",
     ...
}

2 - Create the JavaScript file imported as FormExtension in the parent component (as shown in Home Page example). This file must contain an array (ext) with all the new elements that the user want to introduce with the extension. The components with the element logic must be imported (ElementXYZ). Each array position must contain a type field with the element's identifier used in the JSON file and a component field that the points to the actual component.

import ElementXYZ from './ElementXYZ';

const ext = [
    {
        type: 'ext:elementxyz',
        component: ElementXYZ
    }
];

export default ext;

3 - Build the components that are going to be used by the extension to render the new form elements. These components: - Receive all their JSON fields in a prop called props. - Must call a prop called onChange in order to pass the element answer data (user input) to the Form component. THis prop must be called once when the component first renders, so a default value is store in case the user does not fill the form element and then it must be called every time the user input changes.

import React from 'react';
import { View, Text } from 'react-native';

const ElementXYZ = props => {

    return (
        <View>
            <Text>{prop.props.prop1}</Text>
            <Text>{prop.props.prop1}</Text>
            ...
        </View>
    );
};

export default ElementXYZ;