How to use @emotion/native - 10 common examples

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'
  }

export const ThemedView = styled.View`
  background-color: ${({ theme }) => theme.color.positive}; // ${({ bar }) =>
  bar}
`

const largeTextStyle: TextStyle = {
  fontSize: 24
}

const stretchImageStyle: ImageStyle = {
  resizeMode: 'stretch'
}

// for some reason, TypeScript is not complaining about the incorrect interpolated type
styled.Text(largeTextStyle, stretchImageStyle)
export const LargeText = styled.Text`
  ${largeTextStyle}
  // ${stretchImageStyle}
`

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}

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}
`

const largeTextStyle: TextStyle = {
  fontSize: 24
}

const stretchImageStyle: ImageStyle = {
  resizeMode: 'stretch'
}

// for some reason, TypeScript is not complaining about the incorrect interpolated type
styled.Text(largeTextStyle, stretchImageStyle)
export const LargeText = styled.Text`
  ${largeTextStyle}
  // ${stretchImageStyle}
`

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;

* Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
  */
   accessibilityLabel?: string;
}

type ComponentProps = TextInputProps &
  ColorProps &
  SpaceProps &
  TextStyleProps &
  TypographyProps &
  BorderProps &
  LayoutProps &
  FlexProps;

const InputContainer = styled(Container)``;

const Input = styled.TextInput`
  ${flex};
  ${borders};
  ${color};
  ${layout};
  ${space};
  ${textStyle};
  ${typography};
`;

// NOTE: for layout and dimensioning of TextInput, wrap it in a Container
export const TextInput: FC = ({
  topLabel,
  icon,
  accessibilityLabel,

import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import styled from '@emotion/native';

const Touchable = styled.TouchableOpacity(({ theme }) => ({
  borderColor: theme.borderColor,
  borderWidth: 1,
  borderRadius: 2,
  padding: 5,
}));

const Label = styled.Text(({ theme }) => ({
  fontSize: 13,
  color: theme.labelColor,
}));

// TODO seconds support
class DateType extends PureComponent {
  constructor() {
    super();
    this.state = {
      isDateVisible: false,
      isTimeVisible: false,
    };
  }

  showDatePicker = () => {
    this.setState({ isDateVisible: true });

*/
   accessibilityLabel?: string;
}

type ComponentProps = TextInputProps &
  ColorProps &
  SpaceProps &
  TextStyleProps &
  TypographyProps &
  BorderProps &
  LayoutProps &
  FlexProps;

const InputContainer = styled(Container)``;

const Input = styled.TextInput`
  ${flex};
  ${borders};
  ${color};
  ${layout};
  ${space};
  ${textStyle};
  ${typography};
`;

// NOTE: for layout and dimensioning of TextInput, wrap it in a Container
export const TextInput: FC = ({
  topLabel,
  icon,
  accessibilityLabel,
  multiline,
  borderColor,

/* eslint-disable react/destructuring-assignment */
import React, { Component } from 'react';
import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
import styled from '@emotion/native';
import Events from '@storybook/core-events';
import addons from '@storybook/addons';
import { EmotionProps } from '../Shared/theme';
import { Header, Name } from '../Shared/text';

const SearchBar: typeof TextInput = styled.TextInput`
  background: ${(props: EmotionProps) => props.theme.borderColor};
  color: ${(props: EmotionProps) => props.theme.buttonActiveTextColor};
  border-top-left-radius: 5;
  border-top-right-radius: 5;
  border-bottom-left-radius: 5;
  border-bottom-right-radius: 5;
  font-size: 16;
  margin-horizontal: 5;
  margin-vertical: 5;
  padding-horizontal: 5;
  padding-vertical: 5;
`;

const HeaderContainer = styled.View`
  padding-vertical: 5;
`;

import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import styled from '@emotion/native';

const Touchable = styled.TouchableOpacity(({ theme }) => ({
  borderColor: theme.borderColor,
  borderWidth: 1,
  borderRadius: 2,
  padding: 5,
}));

const Label = styled.Text(({ theme }) => ({
  fontSize: 13,
  color: theme.labelColor,
}));

// TODO seconds support
class DateType extends PureComponent {
  constructor() {
    super();
    this.state = {

positive: 'green'
  }
}

export const themed = 
export const composed = 

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;
  `
}