React-native-web: StyleSheet: "textDecorationLine" is not a valid style property.

[gre]

I'm trying to use a React Native component in react-native-web and reach this error: "textDecorationLine" is not a valid style property..

Since you indicate that we can alias { "react-native" : "react-native-web" }, I read this as _react-native-web is a "polyfill" react-native so you could write universal components for web and native_, is this is a misinterpretation?

[necolas]

Hi,

Thanks for reporting this! The project is still at 0.0.x; it's really helpful to have people trying it out and discussing what a web implementation should do.

So React Native is explicit about which style props are platform specific. For example:

• elevation (android)
• tintColor (ios)
• overlayColor (android)
• textAlignVertical (android)
• letterSpacing (ios)
• textDecorationColor (ios)
• textDecorationLine (ios)
• textDecorationStyle (ios)
• writingDirection (ios)

The warning message is there to let you know (when generating a web bundle) that you're using a platform-specific style that isn't supported on web. textDecorationLine is iOS-specific, so you may want to use the Platform API to only apply that style on iOS. CSS text-decoration-line is only supported in Firefox. But we could find a way to use the CSS text-decoration shorthand to support the textDecoration* style props on web too.

I read this as react-native-web is a "polyfill" react-native so you could write universal components for web and native, is this is a misinterpretation?

In general, this will render "React Native" components (as you can see with the game examples). But I wouldn't use the word "polyfill" for a web backend any more than you would when describing the initial Android support. At the moment there are differences across all 3 platforms. Sorry :). I wouldn't expect web to "just work" when you try to render components or styles that are iOS-specific; RN for Android doesn't support them either. There are various OSS RN components that assume there are only 2 platforms, and they don't work on web as a result. I'd expect these kinds of differences (along with some of the iOS/Android-specific components) to be resolved over time in response to how people use RN and people reporting issues.

This web implementation has platform-specific style props; I can make them more explicit in the View and Text documentation (and call out which props are not supported). Sometimes there is no web equivalent of a RN style prop. For example the textShadow* styles don't cleanly map to CSS's underlying textShadow, so RN for Web adds support for textShadow instead of those style props.

[gre]

@necolas thanks for the detailed explanation :)

From your description, react-native-web is definitely what I'm looking for :) i'll try to use it more and of course raise everything I see :) (yeah polyfill was not the right word^^)

It makes sense for the iOS/Android specific not being supported by default. It sounds more reasonable approach. I'm currently using react-web and I want to migrate to this because it looks more robust approach.

---

so I would need to do: textDecoration: "underline" and textDecorationLine: "underline" to get underline everywhere. I guess eventually RN will have an unified style for this.

For now I guess I could take this approach (to minimize the porting efforts):

In an 'utility' js file:

const underlineStyle = Platform.OS==="web" ? { textDecoration: "underline" } : { textDecorationLine: "underline" };

_(it's just an example, it could be a function that takes a few params too, and based on that, chose an impl)_

and everytime I need it,

const styles = StyleSheet.create({
  foo: {
    color: "red",
    ...underlineStyle
  }
});

and this for any style that is not generalized. Does this sound right? Thanks

[necolas]

I think what I'll do is map a couple of those RN style props to ReactDOM styles:

textAlignVertical -> verticalAlign
textDecorationLine -> textDecoration

For most browsers textDecoration is the same as RN's textDecorationLine. That way only textDecorationStyle and textDecorationColor don't do anything on web and there is less platform forking needed.

[necolas]

OK so you should be able to use textAlignVertical and textDecorationLine following this refactor: 924dc36d4a1e04f16313f5e63351f9688027f27c. Please try out version 0.0.20 and let me know if you have any problems.

[gre]

great :) will try it now :)

[gre]

works great. I'll continue integrating and create new issues if I find some ;)

[necolas]

Thanks!