How to specify style with custom html tag?

[MoOx]

My problem is simple:

I am making a web implementation of react-native Picker http://facebook.github.io/react-native/docs/picker.html
So I am basically using a and want to be able to pass style. Before 0.33 is was possible, but with the refactor on StyleSheet API it's not possible anymore, since normal (dom) style prop expect an object, not the new format that match RN API. I tried to use a View with a role, but no luck. Any idea how to create a select with styles?

[MoOx]

Maybe we need a prop on View so we can specify the html tag element to use? What about a "domTag" prop or something like that?

[RangerMauve]

You should be able to just have a regular <select> element the way you would in React. I guess you could wrap it in a <View> if you really needed to. But there's nothing limiting you to only using the components defined in this library.

[necolas]

Picker needs to be added to this library at some point.

But if the question is really "how do I make a component with a RN-compatible API that uses host components in the implementation", then there is nothing official to help you do that. Internally, there is a helper function for creating React DOM elements from RN props that I've been thinking about exporting.

[MoOx]

@RangerMauve the idea is to be able to style the Picker (the select), the same way I am doing for other components, and if I use StyleSheet api, I cannot use the styles created on the select. It's for consistency.

@necolas I am definitely going to make a PR for the Picker element, it's just not polished enough yet. And I am facing this issue atm (that would not be one if the Picker would be in this repo I guess).
I saw the internal util, might be a good idea to expose it indeed.

[necolas]

I did a little refactor with the aim of exporting the helper to support your use case fdf4a88. Does ReactNative.createDOMElement(component, reactNativeProps) seem like an appropriate API? (The closest thing I could find in RN was requireNativeComponent)

[RangerMauve]

@necolas Can't tell right away from the code, but does the utility pass down child components?

[necolas]

Yes if children are in the props

[MoOx]

I tried to get a button with type submit, but I can't since the type is hardcoded for button :/

react-native-web/src/modules/createDOMElement/index.js

Line 43 in fdf4a88

type={accessibilityRole === 'button' ? 'button' : type}

It would be nice to offer this flexibility.
I am curious to know what do you want to enforce type=button.

So I tried this createDOMElement API and I successfully did what I wanted (a Button that accept a type=submit, and which under the hood use a button type=submit).

I also updated my Picker implementation with this API, and this is nice (I can use StyleSheet API again ^^).

So this API looks good to me. Will just need to be exposed, cause currently I needed to use import createDOMElement from "react-native-web/dist/modules/createDOMElement".