React-Native support

[bkniffler]

Hey, I love the concept of Evergreen being built on one single primitive. This could also make react-native compatibility a bit easier.

I'd love to hear if you've ever considered making ui-box react-native compatible.

[Rowno]

I have no idea how react-native works so I have no idea how to make ui-box compatible 😅

I'm assuming react-native doesn't support all of these CSS properties though? https://github.com/segmentio/ui-box#css-properties

[bkniffler]

Not all, but in fact a whole lot of them: https://github.com/vhpoet/react-native-styling-cheat-sheet

[Rowno]

I guess it would be possible to create a subset of ui-box that has the CSS injection code removed and supports less CSS properties. But if all the react-native primitives already have all these CSS properties, I don't see what benefit ui-box would add?

[bkniffler]

I thought that since ui-box is already the big building block of segments ui framework, it would be possible to use some of the components on react-native + web. The thing is, most ui frameworks will never be possible to work on react-native since there is excessive css selectors, even if styled-components is used (see atlas kit for example). Segment already uses the styles in a way that fits 100% to how you'd style react-native components plus 80% of the styles are compatible already (I guess).

[Rowno]

True, though Evergreen still accesses the DOM and uses glamor in a lot of places too. e.g: the Button theme uses glamor via memoizeClassName

Does react-native support a package.json field for setting a native specific entrypoint?

[NEO97online]

@Rowno yes! styled-components does this. For web, you import from styled-components, and for native you import from styled-components/native. It's still the same NPM package.

Also, React Native does have those primitives but its not quite the same as ui-box. It uses a style object:

<View style={{ backgroundColor: '#448aff', fontSize: 16 }} />

[aleclarson]

FWIW, I'm using react-primal (same concept as ui-box) in React Native