To help you get started, we've collected the most common ways that @emotion/native is being used within popular public projects.

emotion-js / emotion / packages / native / types / tests.tsx View on Github

styled.Image(
  stretchImageStyle
  // this style will not align with the ImageStyle typing requirement
  // largeTextStyle
)
export const StretchedImage = styled.Image`
  ${stretchImageStyle};
`

export const ComposedView = styled.View`
  ${className} ${className2}
  background-color: white;
`

export const NestedComposedView = styled.View(css`
  ${className} ${className2}
  background-color: white;
`)

function MyStyledComponent(_props: { style?: StyleProp }) {
  return null
}

styled(MyStyledComponent)(stretchImageStyle)

const theme = {
  color: {
    primary: 'blue',
    negative: 'red',
    positive: 'green'
  }

View more ways to use @emotion/native

@emotion/native

> Style and render React Native components using emotion

Install

npm install @emotion/react @emotion/native

or if you use yarn

yarn add @emotion/react @emotion/native

This package also depends on react, react-native and prop-types so make sure you've them installed.

Example

import React from 'react'
import { AppRegistry } from 'react-native'
import styled, { css } from '@emotion/native'

const Container = styled.View`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
`

const Description = styled.Text({
  color: 'hotpink'
})

const Image = styled.Image`
  padding: 40px;
`

const emotionLogo = 'https://cdn.rawgit.com/emotion-js/emotion/main/emotion.png'

class App extends React.Component {
  render() {
    return (
      
        
          Emotion Primitives
        
        <img>
      
    )
  }
}

AppRegistry.registerComponent('ExampleApp', () =&gt; App)

Theming

Use @emotion/react for theming support.

import React from 'react'
import styled, { css } from '@emotion/native'
import { ThemeProvider } from '@emotion/react'

const theme = {
  color: 'hotpink',
  backgroundColor: 'purple'
}

const Container = styled.View`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
  border: 5px solid red;
  background-color: ${props => props.theme.backgroundColor};
`

const Description = styled.Text({
  color: 'hotpink'
})

const Image = styled.Image`
  padding: 40px;
`

const emotionLogo = 'https://cdn.rawgit.com/emotion-js/emotion/main/emotion.png'

class App extends React.Component {
  render() {
    return (
      
        
          
            Emotion Primitives
          
          <img>
        
      
    )
  }
}

Gotchas

• Note that the flex property works like CSS shorthand, and not the legacy flex property in React Native. Setting flex: 1 sets flexShrink to 1 in addition to setting flexGrow to 1 and flexBasis to 0.