Home

react-native-json-forms

Description

Tool to create forms in React Native from a JSON file containing the form description. This tool is compatible with forms created using SurveyJS but contains some extra features and also allows extensions. Information about the elements can be found in the Elements Page and information about extensions is in the Extensions Page.

Installation

$ npm install --save react-native-json-forms

Usage

Bellow there is an example of usage of the Form component imported from the package. The FormScreen can be any application screen used as a parent component.

// Import stuff from react and react-native
import React from 'react';
import { ScrollView } from 'react-native';
// Import the component from the package
import Form from 'react-native-json-forms';

// Import JSON file with the form
import data from './data.json';
// Import JS file with the extension
import FormExtension from './FormExtension';

// Parent component
const FormScreen = props => {
    // Handle form answer data
    const onSubmit = (data) => {
        console.log(data);
    };
    // Render component
    return (
        <ScrollView>
            <Form json={data} extension={FormExtension} onSubmit={onSubmit} />
        </ScrollView>
    );
};

export default FormScreen;

Props

json

Passes a JSON file containing the description of the form structure and details.

extension

Passes a JavaScript file containing the description of the extension elements that the user wants to implement.

onSubmit

Passes a function that receives an JavaScript object as argument containing the answer to the form.

JSON File

The JSON file is organized in pages, where each page is an object with a name and an elements array. Bellow there is a snipet with the json structure with only one page. Possible content for the elements array can be found in the Elements Page as mention above.

{
    "pages": [
        {
            "name": "page1",
            "elements": [
                ...
            ]
        },
        ...
    ]
}