JSONForms + React Native

General
1

Hi,

I want to know if JSONForms working with react-native?

I’m using expo to create my mobile App and it works perfectly in the browser, but web a try to run the app y my mobile (Android or iOS) it fails.

I get this error:

Unable to resolve module url from node_modules/@jsonforms/core/node_modules/json-schema-ref-parser/lib/util/url.js: url could not be found within the project.

Then if I install url module form npm install url I get this error:

Unable to resolve module https from node_modules/json-schema-ref-parser/lib/resolvers/http.js: http could not be found within the project.
Unable to resolve module https from node_modules/json-schema-ref-parser/lib/resolvers/http.js: https could not be found within the project.

Then if I install http and https modules form I get this error:

While trying to resolve module `http` from file `node_modules/json-schema-ref-parser/lib/resolvers/http.js`, the package `node_modules/http/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`node_modules/http/index`.

I tried with new expo project only with JSONForms, but I get the same error.

This is my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@jsonforms/core": "^2.5.2",
    "@jsonforms/material-renderers": "^2.5.2",
    "@jsonforms/react": "^2.5.2",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-navigation/compat": "^5.3.20",
    "@react-navigation/drawer": "^6.1.6",
    "@react-navigation/native": "^6.0.4",
    "@react-navigation/native-stack": "^6.2.2",
    "@react-navigation/stack": "^6.0.9",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "galio-framework": "^0.8.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "tslib": "^2.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

I hope you can help me, thank you very much.

2

Hi! The pure React bindings should work fine with React Native. However I would like to suggest using the next stream of JSON Forms, i.e. 3.0.0-alpha.1. We removed the json-schema-ref-parser dependency for JSON Forms 3.0 which included Node only dependencies like url, http, https etc.

3

Thanks,
I updated to 3.0.0-alpha.1 now it’s not showing error but it also doesn’t show the form, not even with the most basic example. I mean on devices, because on the web it works perfectly.

It just show a blank page as if the form did not exist.

Some suggestion?

Thanks again.

4

Hi @Alorse, just to make sure: JSON Forms core (@jsonforms/core) as well as JSON Forms React (@jsonforms/react) are React Native compatible, however the React Material renderers are not. So if you’d like to use JSON Forms in React Native you’ll need to implement your own renderer set.

Another user of JSON Forms already did that on their own, see here