Cross-platform style

[chenglou]

Carried over from reasonml-old/reason-react#79. cc @saschatimme

Reason React currently defines style in ReactDOMRe. In bs-react-native we have also defined styles.

Now we have a problem if some component is cross-platform (e.g. react-navigation) and takes style as a prop (for which style would you write the bindings?).

I would propose to move the style type from ReactDOMRe to ReactRe. Then we could use the same style in both projects.

[chenglou]

Humm, though at the native side the style prop is much smaller, right? It'd mistakenly work on native. Should we have a special ReactRe.CrossPlatformStyle.make (or something like that) instead?

[saschatimme]

Humm, though at the native side the style prop is much smaller, right? It'd mistakenly work on native. Should we have a special ReactRe.CrossPlatformStyle.make (or something like that) instead?

It's true that one could use styles which don't properly work on native, but there are already subtle differences (e.g. flex) which are different on native and the web.
So it depends on what we want to achieve. If we move ReactDOMRe.style to ReasonReact.style the community could explore different styling solutions.

For example in bs-react-native we currently have a solution inspired by elm-css.

Another thing to keep in mind is that there are libraries like Animated, which do some magic with styles. In bs-react-native there are already bindings, which could be extracted to work also for the web (cc @wokalski).

And there are also things like react-primitives which try to abstract things cross-platform.

[steida]

I believe the best approach is to emulate React Native since it defines the lowest common denominator. It's relatively easy. I experimented with it and also https://github.com/Microsoft/reactxp/ is the great source.

This is what multiplatform View needs https://github.com/este/este/blob/master/components/EditorElementBox.js#L135

And the Text https://github.com/este/este/blob/master/components/EditorElementText.js

From API point of view, I believe we should have a platform styles, browserStyles, nativeStyles, etc.

[wokalski]

IMO the styles should be separate and live in corresponding libs. It’s the natural separation and mixing them introduces coupling for very little (no?) advantage. Libs like react-navigation are straight up built for use in JS so naturally some things need to be done differently.

[peterpme]

For the sake of cleaning up the repo (and given how old this issue is) I'm going to close this out.

Please re-open if this is still relevant. Thanks!