mujo-code / box Goto Github PK

To make Box 100% compatible with react-native we need to be able to pass css so we can pass css from @emotion/native.

import { View } from 'react-native'
import { css } from '@emotion/native'

const Box = withBox({
  styleGuide,
  css,
  defaultComponent: View
})

I also think an interesting change that needs to also happen is that we will need to pass the styles into the style props. Instead of using the css prop.

// Web
<BoxComponent ref={ref} css={results.styles} {...otherProps} />
// Native
<BoxComponent ref={ref} style={[results.styles]} {...otherProps} />

Description

I have got tons of use out of this component and will continue to use this component, but I have seen some of the shortcomings of the way this is setup.

Changes

1. I want to lock down some of the defaults to be more in-line with react native, and more inline with yoga. I think this has been super valuable to be able to. yogalayout.com This is a subset of CSS, and also a very powerful one. Locking this down will also limit the scope of the CSS that we need to support.

2. Allow for style guides to be injected via emotion-themeing. This gives a clear and nonmutating way to be able to add extra styles and have a better experience with custom themes. This also will allow us to be typesafe while add custom theming.

• write out a plan to migrate.