Adding support for styling and rendering components on VR platform

[nitin42]

• emotion version:
• react version:

Relevant code.

What you did:

What happened:

Reproduction:

Problem description:

Using @emotion/primitives with react-360 to style VR apps across the platforms. But, @emotion/primitives depends on react-primitives which when installed in react-360 project, gives an error that

couldn't resolve module react-vr

But when we try to install react-vr, it conflicts with react-360.

Suggested solution:

We can detach the css function from @emotion/primitives and create a separate package for it, and then use it according to the environment.

Something like this:

// Emotion primitives

import { createCssFunction } from 'emotion-primitive-css'

import { StyleSheet } from 'react-primitives'

// This will use StyleSheet method for styling components in react-native, Web and Sketch
const css = createCssFunction(StyleSheet)

export default css

// Emotion VR

import { createCssFunction } from 'emotion-primitive-css'

import { StyleSheet } from 'react-360'

// This will use StyleSheet method for styling components in react-360
const css = createCssFunction(StyleSheet)

export default css

[emmatown]

I'm good with adding something like this though I'd rather call it createCss and have a createStyled function like this and call the package @emotion/primitives-core

// @flow
import * as React from 'react'

export function createCss(StyleSheet) {
  // ...
}

type Options = {
  getShouldForwardProp: (
    Component: React.ElementType
  ) => (prop: string) => boolean
}

let defaultPickTest = prop => prop !== 'theme' && prop !== 'innerRef'
export function createStyled(
  StyleSheet,
  { getShouldForwardProp = () => defaultPickTest }: Options = {}
) {
  // ...
}

And then it can be used in @emotion/primitives like this

// @flow
import * as React from 'react'
import { View, Image, Text, StyleSheet } from 'react-primitives'
import {
  testPickPropsOnPrimitiveComponent,
  testPickPropsOnOtherComponent
} from './test-props'
import { createStyled, createCss } from '@emotion/primitives-core'

function getShouldForwardProp(component: React.ElementType) {
  switch (component) {
    case View:
    case Text:
    case Image: {
      return testPickPropsOnPrimitiveComponent
    }
  }
  return testPickPropsOnOtherComponent
}

let styled = createStyled(StyleSheet, { getShouldForwardProp })

// ...assign View, Image and Text

export default styled

export let css = createCss(StyleSheet)

And we can create a new package, @emotion/native and it's implementation can be something like this

// @flow
import { StyleSheet } from 'react-native'
import { createStyled, createCss } from '@emotion/primitives-core'

let styled = createStyled(StyleSheet)

// ...assign all the components

export default styled

export let css = createCss(StyleSheet)

It'd be great if you could submit a PR for this!!

Just a note, the folder names for scoped packages should be the name after @emotion/

[nitin42]

Sure! I'll go ahead and create a PR. I'll add @emotion/native and @emotion/360 with this PR if that's sounds good to you!

[emmatown]

I'm not totally sure about @emotion/360 since it's a pretty rare use case and if we add it then people might want particular ones for things like sketch, react-native-web and maybe others, though I still think @emotion/native is a good idea though since it's generally the most popular use case and will have more component shorthands.

Maybe instead of adding @emotion/360, react-primitives could be changed to use react-360?

[nitin42]

Hm.. I think you're right about this! I'll make changes for @emotion/native. Also few things -

• StyleSheet method in react-360 uses signatures similar to react-native. So @emotion/native should work for react-360.

• we cannot change react-primitives for adding react-360 support 😅

[brunolemos]

The thing is that react-primitives is outdated, right?
They should rename react-vr to react-360. There's an open pr for that.

Maybe you should contact maintainers.

[nitin42]

Haha react-primitives is way behind. It has to do so much work on the core, new primitives, animations and bug fixes. I'll try to contact the maintainers.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[mathieudutour]

[email protected] now requires react-360 instead of react-vr