Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React-native support #38

Open
compojoom opened this issue May 8, 2019 · 4 comments
Open

React-native support #38

compojoom opened this issue May 8, 2019 · 4 comments
Labels
enhancement New feature or request

Comments

@compojoom
Copy link
Contributor

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 compojoom added the enhancement New feature or request label May 8, 2019
@compojoom
Copy link
Contributor Author

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

@easeq
Copy link
Collaborator

easeq commented May 8, 2019

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
Copy link
Contributor Author

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

@easeq
Copy link
Collaborator

easeq commented May 8, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants