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

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}

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

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

export default class Button extends PureComponent {
  onPress = () => {
    const { onPress, id } = this.props;
    onPress(id);

import styled from '@emotion/native';

export const Header = styled.Text<{ selected: boolean }>(
  ({ theme }) => ({
    fontSize: 20,
    color: theme.headerTextColor,
  }),
  ({ selected }) => (selected ? { fontWeight: 'bold' } : {})
);

export const Name = styled.Text<{ selected: boolean }>(
  ({ theme }) => ({
    fontSize: 16,
    color: theme.headerTextColor,
  }),
  ({ selected }) => (selected ? { fontWeight: 'bold' } : {})
);

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

import PropTypes from 'prop-types';
import React from 'react';
import { TouchableOpacity } from 'react-native';
import styled from '@emotion/native';

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

const ButtonType = ({ knob, onPress }) => (
   onPress(knob)}>
    <label>{knob.name}</label>
  
);

ButtonType.defaultProps = {
  knob: {},
};

ButtonType.propTypes = {
  knob: PropTypes.shape({

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

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

interface Props {
  storySource: string;
}

export default class JSX extends React.PureComponent {
  onPressCopy = () => {
    const { storySource } = this.props;

    Clipboard.setString(storySource);
  };