flipbyte / formik-json-schema

Easily create react forms using JSON / Javascript Object
MIT License
152 stars 40 forks source link

React-native support #38

Open compojoom opened 5 years ago

compojoom commented 5 years ago

I spent the last hour trying to get this package to work on react-native. I want to share my findings and hopefully spark a discussion onto where to take it from here.

Setup: installing with yarn worked, but the moment one tries to pass a schema to the Form the RN app crashes due to dependencies on react-dom. Since the package is compiled to es, it's hard to modify the files. I ended up copying the src folder and modifying package.json to point to src/index. RN is able to compile the src files on the fly. That was my biggest hurdle - so if someone has ideas how to actually link and then just watch the files - then please let me know.

Hunting down issues: Basically since the containers and the fields are outputting html(or rely on other react libraries that output html) the app crashes. I went ahead and removed all containers and fields from the index.js files. I also modified the FieldTemplate as it outputs a div. Then I provided my own renderers that output rn code and here is the result: image

The way see it - if we want to have this package compatible with React native we have to split it and have formik-json-basic, formik-json-web and formik-json-rn

End users would install formik-json-web or formik-json-rn depending on which platform they are targeting.

There are also some problems with the schema - for example RN doesn't know what a css class is... So the rn renderers have to either ignore those completely or maybe convert those to a style object. And one could pass the style object when initialising the form.

const styles = {
"form-group": {
marginBottom: 20,
},
}
compojoom commented 5 years ago

So here are my modifications to have a minimum working example with a text field https://github.com/compojoom/react-native-formik-json

easeq commented 5 years ago

The splitting idea is good, but changing the name from formik-json to formik-json-web will cause problems for the existing users. If we go ahead with the split, we'll have to extract the base into a separate package while keeping formik-json as the package for web and creating a new package for RN.

Moreover, the split might consume a lot more time than we can spare. My main concern right now is optimizing the form to handle large number of fields which is an issue atm.

compojoom commented 5 years ago

by large you mean few 100 or more than 10 :)?

easeq commented 5 years ago

More than 100. It works fine with 10 fields. I think the demo has more than 10 fields.