Json form schema use in react native

Question

Is there any way I can use json form schema with custom renderer (using json schema to render react native UI elements) in react native. I have seen couple of react native specific package which are inspired by json form but couldn't get those working as per the requirement.

I am also looking to use it with yup form validation package

Thanks.

Answer 1

Yes, it is possible to use a JSON form schema with a custom renderer to render React Native UI elements in a React Native app. There are several packages available that can help you achieve this, such as react-jsonschema-form and json-schema-form-generator.

To use a JSON form schema with a custom renderer in React Native, you will need to first install one of the above packages (or a similar one) using npm or yarn. Then, you can use the Form component provided by the package to define your form schema and specify the custom renderer that you want to use.

For example, to use the react-jsonschema-form package, you could do the following:

import { Form } from 'react-native-jsonschema-form';

const schema = {
  // your JSON form schema here
};

const uiSchema = {
  // your custom renderer here
};

const MyForm = () => (
  <Form schema={schema} uiSchema={uiSchema} />
);

Once you have defined your form, you can use the yup form validation package to validate the form values when the user submits the form. To do this, you can use the validate option of the Form component, passing in a yup validation schema to validate the form values against.

For example:

import * as yup from 'yup';


const schema = yup.object().shape({
  // your yup validation schema here
});

const MyForm = () => (
  <Form schema={schema} uiSchema={uiSchema} validate={validate} />
);