Tcomb-form-native: Compatibility with react-native-web

[alchy58]

Firstly, thank you very much for this lib. It saved me a lot of time by simply generating my forms !

I'm working on a react-native template extending re-start one.

I have basically added tcomb-form-native but I have got an error. I don't understand what is the problem. I just suppose that tcomb-form-native is not compatible with react-native-web lib which brings react-native into browsers.

Can you give me some informations on how I can make tcomb-form-native compatible ? I will make you a pull request soon as I really need that feature and I don't want to waste time to create a new lib, yours is really great.

Version

• node v7.10.1 / 4.2.0 || node v8.7.0 / 5.4.2
• yarn v1.3.2
• tcomb-form-native v0.6.11
• react-native v0.50.1

Expected behaviour

Form form correctly rendered in browsers & Electron

Actual behaviour

It seem that tcomb-form-native is not ready to run outside Android and iOS.

Steps to reproduce

1. react-native init yourProjectName --template re-start
   cd yourProjectName
   node scripts/additionalDependencies.js
2. yarn add tcomb-form-native
3. Import tcomb in a component
   import t from 'tcomb-form-native'
4. Launching the web project
   yarn run web

Stack trace and console log

./node_modules/tcomb-form-native/lib/templates/bootstrap/textbox.js
Module parse failed: /path/to/project/node_modules/tcomb-form-native/lib/templates/bootstrap/textbox.js Unexpected token (31:4)
You may need an appropriate loader to handle this file type.
| 
|   var label = locals.label ? (
|     <Text style={controlLabelStyle}>{locals.label}</Text>
|   ) : null;
|   var help = locals.help ? (

[gtoma4]

I am also interested in using this library along with tcomb-json-schema with react-native-web. I am seeing the same error(s) as alchy58.

[alchy58]

@gtoma4

After some research, it seems not to be an issue with tcomb-form-native.
I had the case with another lib, the issue was that the lib uses flow

In both cases, I think that babel don't have the good parser / transformer.
Anyway, I tried some things with the .babelrc file and transformations/presets options but it did not work.

I'll try again to configure babel well next week but if you find the solution before, please share it !

[gtoma4]

@alchy58
I've been trying some things as well. I am using webpack, and I had to configure it so that the tcomb-form-native code was processed by babel by adding the path to the 'include' directories for the babel loader.

     path.resolve(__dirname, 'node_modules/tcomb-form-native')

I also found that some of the files use 'import' and 'module.exports', which caused compile error in webpack. I needed to change the 'module.exports' to 'export' in those cases.

The latest unresolved problem I am having is that the render method in the Component class is returning an object rather than the expected string/class/function.

 Element type is invalid: expected a string (for built-in components) or a class/function (for 
 composite components) but got: object. Check the render method of `Struct`

I'll post if I get past this issue.

[alchy58]

Hi,

I think that my .babelrc was never handled so presets were not applied.
So I managed to use Webpack using the react-universal-ui-boilerplate configuration then I didn't had errors using tcomb-form-native.

Now their is an issue using datetime picker and select elements. tcomb-form-native doesn't provide web versions. On react-native-web side, Picker and Select elements are not handled so we need to wait them implemented before using them. There is an active react-native-web PR concerning the Picker element.

I think I will use react-universal-ui in front of react-native-web. It handle the Select component but not the Datetime Picker, solved by the precedent PR.

I think that we will can fully use tcomb-form-native with react-native-web soon...

[piranna]

What's the current status? Does this lib works with react-native-web or does it needs some help towards this? I'm interested on using it too and maybe I would be able to contribute with some pull-requests...

[piranna]

I have tryied it and webpack is failing because the built-in Bootstrap templates has Android and iOS custom versions for datepicker and select but there's no web nor fallback versions available. Is there any alternative template available?