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

* 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,

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

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 themed = 
export const composed = 

function MyComponent(_props: AdditionalProps) {
  return null
}

import React, { SFC } from 'react';
import styled from '@emotion/native';
import { Text as RNText, TextProperties, TextStyle } from 'react-native';
import { fonts, colors } from '../../styles';

const StyledText = styled(RNText)`
  ${fonts.regular};
  color: ${colors.black}
  font-size: 15px;
`;

export interface Props extends TextProperties {
  /** Children components */
  children?: React.ReactNode;
  /** The text to display if not using children components. */
  text?: string;
  /** Style override */
  style?: TextStyle;
}

/**
 * Text component that wraps the built-in React Native Text

import React, { Component } from 'react';
import { ImageBackground, StatusBar, StyleSheet, View, ViewStyle } from 'react-native';
import bgImage from '../../assets/images/background.png';
import { Screen } from '../../components/Screen';
import { Text } from '../../components/Text';
import { colors } from '../../styles';

const Background = styled(ImageBackground)`
  ${StyleSheet.absoluteFillObject};
`;

interface Props {
  style?: ViewStyle;
}

const StyledScreen = styled(Screen)`
  align-items: center;
  margin-top: 60px;
`;

const StyledText = styled(Text)`
  color: ${colors.white};
  font-size: 24px;
`;

/**
 * First screen a logged out user sees, welcoming them to the app.
 */
export class IntroScreen extends Component {
  public render() {
    return (

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

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

interface Props {
  style: any[];
}

export default class Panel extends PureComponent {
  render() {
    const { children, style } = this.props;
    return {children};
  }
}

import styled from '@emotion/native';
import React, { Component } from 'react';
import { ImageBackground, StatusBar, StyleSheet, View, ViewStyle } from 'react-native';
import bgImage from '../../assets/images/background.png';
import { Screen } from '../../components/Screen';
import { Text } from '../../components/Text';
import { colors } from '../../styles';

const Background = styled(ImageBackground)`
  ${StyleSheet.absoluteFillObject};
`;

interface Props {
  style?: ViewStyle;
}

const StyledScreen = styled(Screen)`
  align-items: center;
  margin-top: 60px;
`;

const StyledText = styled(Text)`
  color: ${colors.white};
  font-size: 24px;
`;

import React from 'react';
import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
import { NavigationScreenProps } from 'react-navigation';
import styled from '@emotion/native';

import { Button } from '../../components/Button';
import { Screen } from '../../components/Screen';
import { Text } from '../../components/Text';
import { Container } from '../../components/Container';
import { colors } from '../../styles';
import bgImage from '../../assets/images/background.png';

const BackgroundImage = styled(ImageBackground)`
  ${StyleSheet.absoluteFillObject};
`;

/**
 * First screen a logged out user sees, welcoming them to the app.
 */
export function IntroScreen(props: NavigationScreenProps) {
  return (

import { colors } from '../../styles';

const Background = styled(ImageBackground)`
  ${StyleSheet.absoluteFillObject};
`;

interface Props {
  style?: ViewStyle;
}

const StyledScreen = styled(Screen)`
  align-items: center;
  margin-top: 60px;
`;

const StyledText = styled(Text)`
  color: ${colors.white};
  font-size: 24px;
`;

/**
 * First screen a logged out user sees, welcoming them to the app.
 */
export class IntroScreen extends Component {
  public render() {
    return (
      
        
        
          Welcome to the intro Screen!

import styled from '@emotion/native';
import React, { ReactNode, SFC } from 'react';
import { SafeAreaView, ViewStyle } from 'react-native';

import { colors, margins } from '../../styles';

/**
 * A base screen component that allows for background-color to be specified
 */

const SafeView = styled(SafeAreaView)`
  flex: 1;
  background-color: ${props => props.backgroundColor || colors.white};
`;

const PaddedView = styled.View`
  padding-horizontal: ${`${margins.screenMargin}px`};
`;

interface ScreenProps {
  /** the background color of the screen */
  backgroundColor?: string;
  /** main part of the screen */
  children?: ReactNode;
  /** view styles to override the base */
  style?: ViewStyle;
}