How to use the @emotion/native.View function in @emotion/native

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

flex-grow: 1;
    align-items: center;
  `,
  centered: css`
    justify-content: center;
    align-items: center;
  `
}

export const scrollElem = (
  
    
)
export const Container = styled.View(styles.container)
export const CenterContainer = styled.View(styles.container, styles.centered)
export const ImageFullWidthContained = styled.Image`
  ${styles.container} width: 100%;
  resize-mode: contain;
`

import styled from '@emotion/native'

styled.View`
  color: hotpink;
`

styled.View({})

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)
export const CenterContainer = styled.View(styles.container, styles.centered)
export const ImageFullWidthContained = styled.Image`
  ${styles.container} width: 100%;
  resize-mode: contain;
`

import React, { PureComponent } from 'react';
import { SafeAreaView } from 'react-native';
import styled from '@emotion/native';
import addons from '@storybook/addons';
import AddonsList from './list';
import AddonWrapper from './wrapper';
import { Label } from '../../Shared/text';

const NoAddonContainer = styled.View({
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
});

const Container = styled.View(({ theme }) => ({
  flex: 1,
  backgroundColor: theme.backgroundColor,
}));

export default class Addons extends PureComponent<{}, { addonSelected: string }> {
  panels = addons.getElements('panel');

  constructor(props: {}) {
    super(props);

    this.state = {
      addonSelected: Object.keys(this.panels)[0] || null,
    };
  }

  onPressAddon = (addonSelected: string) => {

tabOpen?: number;
  isUIHidden?: boolean;
  shouldDisableKeyboardAvoidingView?: boolean;
  keyboardAvoidingViewVerticalOffset?: number;
}

interface OnDeviceUIState {
  tabOpen: number;
  slideBetweenAnimation: boolean;
  previewWidth: number;
  previewHeight: number;
}

const flex = { flex: 1 };

const Preview = styled.View<{ disabled: boolean }>(flex, ({ disabled, theme }) => ({
  borderLeftWidth: disabled ? 0 : 1,
  borderTopWidth: disabled ? 0 : 1,
  borderRightWidth: disabled ? 0 : 1,
  borderBottomWidth: disabled ? 0 : 1,
  borderColor: disabled ? 'transparent' : theme.previewBorderColor,
}));

const absolutePosition: FlexStyle = { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 };

export default class OnDeviceUI extends PureComponent {
  constructor(props: OnDeviceUIProps) {
    super(props);
    const tabOpen = props.tabOpen || PREVIEW;

    this.state = {
      tabOpen,

import React, { PureComponent } from 'react';
import styled from '@emotion/native';
import Button from './button';
import { NAVIGATOR, PREVIEW, ADDONS } from './constants';

const Container = styled.View(({ theme }) => ({
  flexDirection: 'row',
  paddingHorizontal: 8,
  backgroundColor: theme.backgroundColor,
  borderTopWidth: 1,
  borderBottomWidth: 1,
  borderColor: theme.borderColor,
}));

export interface Props {
  index: number;
  onPress: (id: number) => void;
}

export default class Bar extends PureComponent {
  render() {
    const { index, onPress } = this.props;

import React, { PureComponent } from 'react';
import { SafeAreaView } from 'react-native';
import styled from '@emotion/native';
import addons from '@storybook/addons';
import AddonsList from './list';
import AddonWrapper from './wrapper';
import { Label } from '../../Shared/text';

const NoAddonContainer = styled.View({
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
});

const Container = styled.View(({ theme }) => ({
  flex: 1,
  backgroundColor: theme.backgroundColor,
}));

export default class Addons extends PureComponent<{}, { addonSelected: string }> {
  panels = addons.getElements('panel');

  constructor(props: {}) {
    super(props);

import React, { PureComponent } from 'react';
import { TouchableOpacity } from 'react-native';
import styled from '@emotion/native';

const ActiveBorder = styled.View<{ active: boolean }>(({ active, theme }) => ({
  backgroundColor: active ? theme.borderColor : 'transparent',
  height: 3,
}));

const ButtonText = styled.Text<{ active: boolean }>(({ theme, active }) => ({
  color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
  paddingHorizontal: 8,
  paddingVertical: 10,
  fontSize: 11,
}));

interface Props {
  id: number | string;
  active: boolean;
  onPress: (id: number | string) => void;
}