[](LICENSE) [](https://www.npmjs.com/package/react-native-json-forms)
npm install react-native-json-forms
$ 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. After importing the component from the previously installed npm package, the JSON with the form structure and the extension, the Form component can be rendered inside of a ScrollView to allow the user to scroll through the form questions, since most form will probably be bigger than a single screen.
`javascript
// 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 (
);
};
export default FormScreen;
`
$3
#### - 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.
#### - showSubmitButton:
Boolean that when false hides the submit button, useful when extension elements do not require/cannot have submit button. If any of the core elements is used the button automatically appear even when showSubmitButton is set to false.
#### - submitText:
String that allows to customize the submit button text.
$3
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.
`json
{
"pages": [
{
"name": "page1",
"elements": [
...
]
},
...
]
}
`
Question's ID
The questions ID is a feature introduced by version 1.1.0. Because the only way to correlate an answer with its question was through the type and name this could be limiting in terms of answer processing and analysis. So in order to associate an answer with its respective question an optional id field can be added to each element in the survey json. By using the ID feature in the json as shown below the answer to a specific question will also contain an id field with the same value as the question's id.
`json
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "text",
"name": "Is this the best forms tool in the world?",
"id": "QUESTION_ID"
}
]
},
...
]
}
`
Required Elements
The required elements is a feature introduced by version 1.1.8. By adding the required field to any of the form's elements impossibilitates its submission until those element's questions are answered. This field defaults to false should receive a boolean as value in the configuration JSON. Elements such as expression, image, html or any custom elements where the final answer may be an empty string may not be compatible with this feature.
`json
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "text",
"name": "Is this the best forms tool in the world?",
"required": {true, false},
"id": "QUESTION_ID"
}
]
},
...
]
}
``