Could we port Grommet to React Native using primitives?

Expected Behavior

Hi there! I’m thinking in last days about to port Grommet to work on React Native too. Searching in the google, I found a way that can be used.

• Grommet uses styled-components ✔️ (half way over)
• What I would do (or someone else interested in it), is to adapt Grommet to use styled-components/primitives and react-primitives, so having universal and reusable components, on ReactJS and React Native

I believe that most of the main Grommet components can be ported with this. Then, I would like to hear your opinions and, as suggested by @oorestisime and @ShimiSun in Grommet Slack, I’m opening this issue to discuss about that.

Actual Behavior

Actually, Grommet doesn’t work in React Native.

URL

Here’s some links that can be useful:

• https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7
• https://github.com/lelandrichardson/react-primitives

[italomlp]

Of course, there are many differences between web and native. What I told is maybe react primitives and styled-components/primitives be a way to make it works.

However, like I said in the last comment, I was thinking about make a “theme”, with colors, spacements and more details that can be made, for NativeBase.

[macintoshhelper]

Hi, I‘ve been working on a UI library that’s similar to Grommet, but has cross-platform UI component primitives, with react-sketchapp as a primary focus (compiles to web and React Native also though): https://github.com/elemental-design/elemental-react

What I would suggest from my findings, is having a @grommet/primitives package that exports styled-components (exporting the ThemeProvider, styled function, etc to make sure the context remains consistent. It could export { View, Text, ...etc } It can work something like this:

Pseudo-code from my import resolving system: https://github.com/elemental-design/elemental-react/blob/master/src/styled.ts

let styled;

if (Platform.OS === 'web') {
  styled = require('styled-components');
} else {
  styled = require('styled-components/primitives');
}
const { ThemeProvider } = styled;

export { styled, ThemeProvider };

I had a quick look through #3029 and noticed that it uses styled-components/primitives, but I think this should be avoided for web, as it uses react-native-web for styling, which messes up SSR and creates quite a bit of bugginess. styled.div should be used on web, and styled.View on native platforms.

This shouldn’t be too difficult, the main limiting factor would probably be that Yoga doesn’t support CSS grid yet though.