2

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.

1

1 Answer 1

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} />
);

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for you reply, I just checked but couldn't make <Form /> work in react native with custom widget. I guess it's specific to react js.
Indeed, you need to you the `react-native-jsonschema-form' fork to be compatible with react-native. I updated the answer to reflect this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.