How to use the @emotion/native.css function in @emotion/native
To help you get started, we’ve selected a few @emotion/native examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
emotion-js / emotion / packages / native / types / tests.tsx View on Github 
const className = css`
${(true as boolean) && ''}
${'bar'}
${css``}
${1}
${cssObject}
`
const className2: ReactNativeStyle = css(cssObject)
css([{ display: 'none' }, [{ position: 'relative' }, { width: 100 }]])
css({ display: 'none' }, [{ position: 'relative' }, { width: 100 }])
css(null)
interface ExtraProps {
foo: string
}
interface AdditionalProps {
bar: string
}
export const ExplicitExtraPropsView = styled.View`
background-color: red; // ${({ foo }) => foo}
`
export const InferredPropsView = styled.View`
background-color: green; // ${({ testID }) => testID}
`function MyComponent(_props: AdditionalProps) {
return null
}
function MyOtherComponent(_props: { foo: string }) {
return null
}
styled(MyComponent)({ width: 100 })
styled(MyComponent)({ width: 100 }).withComponent(MyOtherComponent)
styled(MyComponent)(({ bar }) => ({ color: bar }))
styled(View)({ width: 100 })
styled(View)(({ foo, testID }) => ({ color: foo, testID }))
const styles = {
container: css({ flex: 1 }),
scrollContainer: css`
flex-grow: 1;
align-items: center;
`,
centered: css`
justify-content: center;
align-items: center;
`
}
export const scrollElem = (
)
export const Container = styled.View(styles.container)const cssObject = {
height: 100,
width: '100%',
display: 'flex',
position: undefined
} as const
const className = css`
${(true as boolean) && ''}
${'bar'}
${css``}
${1}
${cssObject}
`
const className2: ReactNativeStyle = css(cssObject)
css([{ display: 'none' }, [{ position: 'relative' }, { width: 100 }]])
css({ display: 'none' }, [{ position: 'relative' }, { width: 100 }])
css(null)
interface ExtraProps {
foo: string
}
interface AdditionalProps {
bar: string
}
export const ExplicitExtraPropsView = styled.View`@emotion/native
Style and render React Native components using emotion
