Installations

npm install @velocitycareerlabs/react-native-jsonschema-web-form

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.18.2

NPM Version

9.8.1 Pull Requests

Open

14

Total

162

Closed

31

Merged

117

Issues

Open

2

Total

2

Closed

0

Releases

Unable to fetch releases

Languages

1

JavaScript

JavaScript (100%)

Developer

velocitycareerlabs

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

12 Stars

209 Commits

1 Watchers

27 Branches

10 Contributors

Updated on Jul 02, 2025

Maintainers

1

View All 10 Contributors

Package Meta Information

Latest Version

0.3.96

Package Id

@velocitycareerlabs/react-native-jsonschema-web-form@0.3.96

Unpacked Size

143.45 kB

Size

37.59 kB

File Count

60

NPM Version

9.8.1

Node Version

18.18.2

Published on

Mar 05, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

10

deprecated-react-native-prop-types lodash moment prop-types react-native-image-picker react-native-modal react-native-modal-dropdown react-native-picker react-native-raw-bottom-sheet underscore.string

Dev Dependencies

16

@babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-react-jsx @babel/register @svgr/cli babel-eslint babel-plugin-lodash cloc eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-json eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

React Native Web JSONSchema Form

Render customizable forms using JSON schema for responsive websites and Expo apps (both iOS and Android). This library was inpired on react-jsonschema-form but was built with React Native and React Native Web in mind.

See this library in production at https://www.carelulu.com
Skeleton project using React Native Web Jsonschema Form at https://www.carelulu.com/react-native-web-example/login and https://github.com/CareLuLu/react-native-web-skeleton

Documentation

Coming soon!

Setup

React Native Web JSONSchema Form was created to facilitate the development of write once, run anywhere web and mobile apps. In order to accomplish that, this library is heavily based on React Native and React Native Web.

Requirements

First you need to install react ^16.8.3 (this library uses react-hooks).

1yarn add react

If you're using Expo, they use a custom version of react-native and therefore you need to check what is the React Native repository for the Expo version you're using. For Expo v33.x.x you'd run:

1yarn add https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz

If your project is also being used for web, please install React Native Web. Make sure your babel/webpack build replace all react-native imports with react-native-web (details here). If you used React Create App, aliasing is already taken care off for you.

1yarn add react-dom react-native-web

This library is backed by react-native-elements. Please make sure you have installed react-native-elements and its dependencies.

1yarn add react-native-elements

Please make sure you have installed react-native-community/datetimepicker and its dependencies.

1yarn add @react-native-community/datetimepicker

Please make sure you have installed react-native-image-picker and its dependencies.

1yarn add react-native-image-picker

Installation

Install the library using yarn or npm.

1yarn add react-native-web-jsonschema-form

Examples

Basic Form

1import React from 'react';
2import { useHistory } from 'react-router';
3import { Alert } from 'react-native';
4import { UIProvider, Form } from 'react-native-web-jsonschema-form';
5import { Router, Switch } from 'react-router-dom';
6// import { Router, Switch } from 'react-router-native';
7
8const theme = {
9  input: {
10    focused: StyleSheet.create({
11      border: {
12        borderColor: 'yellow',
13      },
14    }),
15  },
16};
17
18const schema = {
19  type: 'object',
20  properties: {
21    username: { type: 'string' },
22    password: { type: 'string' },
23  },
24};
25
26const BasicForm = ({ formData, onChange }) => (
27  <Form
28    formData={formData}
29    schema={schema}
30    onChange={onChange}
31  />
32);
33
34const ThemeWrapper = ({ children }) => {
35  const history = useHistory();
36
37  return (
38    <UIProvider theme={theme} history={history}>
39      {children}
40    </UIProvider>
41  );
42};
43
44const App = () => {
45  const [formData, setFormData] = useState({});
46  
47  const onChange = (event) => setFormData({
48    ...formData,
49    [event.params.name]: event.params.value,
50  });
51
52  return (
53    <Router>
54      <Switch>
55        <ThemeWrapper>
56          <BasicForm
57            formData={formData}
58            onChange={onChange}
59          />
60        </ThemeWrapper>
61      </Switch>
62    </Router>
63  );
64};

Event Handlers

1import React from 'React';
2import PropTypes from 'prop-types';
3import { Loading, Alert } from 'react-native-web-ui-components';
4import { Form } from 'react-native-web-jsonschema-form';
5
6class MyForm extends React.Component {
7  static propTypes = {
8    controller: PropTypes.string.isRequired,
9    action: PropTypes.string.isRequired,
10  };
11
12  constructor(props) {
13    super(props);
14    this.state = {
15      schema: null,
16      message: null,
17      posting: null,
18    };
19  }
20
21  onSubmit = async (event) => {
22    const { action, controller } = this.props;
23    const { values } = event.params;
24    this.setState({ posting: true });
25    return fetch(`/${controller}/${action}`, {
26      method: 'POST',
27      body: JSON.stringify(values),
28    });
29  };
30
31  onSuccess = async (event) => {
32    const { response } = event.params;
33    this.setState({
34      posting: false,
35      message: response.message,
36    });
37  };
38
39  onError = async (event) => {
40    // These are errors for fields that are not included in the schema
41    const { exceptions } = event.params;
42    const warning = Object.keys(exceptions).map(k => exceptions[k].join('\n'));
43    this.setState({
44      posting: false,
45      message: warning.length ? warning.join('\n') : null,
46    });
47  };
48
49  render() {
50    const { schema, posting, message } = this.state;
51    if (!schema) {
52      const self = this;
53      fetch(`/get-schema/${controller}/${action}`)
54        .then((schema) => self.setState({ schema }));
55
56      return <Loading />;
57    }
58
59    return (
60      <React.Fragment>
61        {posting ? <Loading /> : null}
62        {message ? (
63          <Alert>
64            Message
65          </Alert>
66        ) : null}
67        <Form
68          schema={schema}
69          onSubmit={this.onSubmit}
70          onSuccess={this.onSuccess}
71          onError={this.onError}
72        />
73      </React.Fragment>
74    );
75  }
76}

Custom Theme

There are 5 input states: regular, focused, disabled, readonly and error. On which one of them you can define styles for background, border, text, placeholder, opacity, selected and unselected. These properties will be used accordingly by the widgets provided in this library. For example, selected and unselected will be used checkboxes and radioboxes to represent checked and unchecked.

1const theme = {
2  input: {
3    focused: StyleSheet.create({
4      border: {
5        borderColor: 'yellow',
6        borderWidth: 2,
7        borderStyle: 'solid',
8      },
9      background: {
10        backgroundColor: 'white',
11      },
12      text: {
13        fontSize: 14,
14        color: '#545454',
15      },
16      placeholder: {
17        color: '#FAFAFA',
18      },
19      opacity: {
20        opacity: 1,
21      },
22      selected: {
23        color: 'blue',
24      },
25      unselected: {
26        color: '#FAFAFA',
27      },
28    }),
29    regular: {...},
30    disabled: {...},
31    readonly: {...},
32    error: {...},
33  },
34};
35
36const ThemeWrapper = ({ children }) => {
37  const history = useHistory();
38
39  return (
40    <UIProvider theme={theme} history={history}>
41      {children}
42    </UIProvider>
43  );
44};

Form Validation

See https://github.com/CareLuLu/react-native-web-jsonschema-form/issues/139#issuecomment-654377982.

Array Fields

See https://github.com/CareLuLu/react-native-web-jsonschema-form/issues/113#issuecomment-621375353.

Props

The Form has the following props:

1import React from 'react';
2import Form from 'react-native-web-jsonschema-form';
3
4const Example = ({
5  // Misc
6  name, // String to be used as id, if empty a hash will be used instead.
7  onRef, // Function to be called with the form instance. This is NOT a DOM/Native element.
8  scroller, // If provided, this will be passed to the widgets to allow disabling ScrollView during a gesture.
9  wigdets, // Object with a list of custom widgets.
10
11  
12  // Data
13  formData, // Initial data to populate the form. If this attribute changes, the form will update the data.
14  filterEmptyValues, // If true, all empty and non-required fields will be omitted from the submitted values.
15
16  // Schema
17  schema, // JSON schema
18  uiSchema, // JSON schema modifying UI defaults for schema
19  errorSchema, // JSON schema with errors
20  
21  // Events
22  // * All events can be synchronous or asynchronous functions.
23  // * All events receive one parameter `event` with `name`, `preventDefault()` and `params`.
24  onFocus,
25  onChange,
26  onSubmit,
27  onCancel,
28  onSuccess,
29  onError,
30
31  // Layout
32  buttonPosition, // left, right, center
33  submitButton, // If false, it will not be rendered. If it is a string, it will be used as the default button text.
34  cancelButton, // If false, it will not be rendered. If it is a string, it will be used as the default button text.
35  SubmitButton, // Component to render the submit button
36  CancelButton, // Component to render the cancel button
37}) => (
38  <Form />
39)

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@velocitycareerlabs/react-native-jsonschema-web-form

Installations

Developer Guide

No

CommonJS

18.18.2

9.8.1

Pull Requests

14

162

31

117

Issues

2

2

0

Releases

Unable to fetch releases

Languages

Developer

velocitycareerlabs

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

React Native Web JSONSchema Form

Table of Contents

Documentation

Setup

Requirements

Installation

Examples

Basic Form

Event Handlers

Custom Theme

Form Validation

Array Fields

Props

10

6

0

0

0

0

0

0

2.8

/10