Skip to content

Releases: PADAS/react-native-jsonforms-formatter

v1.0.2

17 May 16:15
Compare
Choose a tag to compare

Fixes and Improvements

  • #15 (Event types with duplicate required fields throwing errors)

v1.0.1

22 Apr 20:02
Compare
Choose a tag to compare

Fixes and Improvements

  • Fixed module entry point

v1.0.0

22 Apr 17:48
Compare
Choose a tag to compare

Initial Release

Usage

The library provides two main functions: validateJSONSchema and generateUISchema.

Validating JSONSchema

You can use the validateJSONSchema function to validate a JSONSchema string:

import { validateJSONSchema } from "react-native-jsonforms-formatter";

const stringSchema = `
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    }
  }
}
`;

const jsonSchema = validateJSONSchema(stringSchema);

The validateJSONSchema function returns a valid JSONSchema object if the input string is a valid JSONSchema. If the input is not valid, it will throw an error.

Generating UISchema

You can use the generateUISchema function to generate a UISchema object from a valid JSONSchema:

import { generateUISchema } from "react-native-jsonforms-formatter";

const uiSchema = generateUISchema(jsonSchema);

The generateUISchema function returns a UISchema object that can be used with the ReactNative JSONForms library.

Putting it all together

Here's an example of how you can use the library in a ReactNative application:

import { JsonForms } from "@jsonforms/react-native";
import { RNCells, RNRenderers } from "@jsonforms/react-native-renderers";
import React from "react";
import {
  generateUISchema,
  validateJSONSchema,
} from "react-native-jsonforms-formatter";

const stringSchema = `
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name"
    },
    "age": {
      "type": "integer",
      "title": "Age"
    }
  }
}
`;

const jsonSchema = validateJSONSchema(stringSchema);
const uiSchema = generateUISchema(jsonSchema);

const App = () => {
  const [data, setData] = React.useState({ name: "John Doe", age: 30 });

  return (
    <JsonForms
      schema={jsonSchema}
      uischema={uiSchema}
      data={data}
      renderers={RNRenderers}
      cells={RNCells}
      onChange={(event) => setData(event.data)}
    />
  );
};

export default App;