Dingdong_client/components/Text.js

import * as React from 'react';
import {
  Headline,
  Paragraph,
  Subheading,
  Caption,
  withTheme,
  Text,
} from 'react-native-paper';

function MyText(props) {
  const { type, size, children, bold } = props;
  let { color, theme, style, center } = props;
  const { colors } = theme;
  if (type) {
    color = colors[type];
  }

  if (color) {
    theme = {
      ...theme,
      colors: {
        ...theme.colors,
        text: color,
      },
    };
  }
  if (bold) {
    style = {
      ...style,
      fontWeight: 'bold',
    };
  }
  if (center) {
    style = {
      ...style,
      textAlign: 'center',
    };
  }

  switch (size) {
    case 'h1':
      // 24
      return (
        <Headline
          theme={theme}
          style={{ ...style }}
          numberOfLines={1}
          ellipsizeMode="tail"
          align="center"
        >
          {children}
        </Headline>
      );
    case 's1':
      // 16
      return (
        <Subheading
          theme={theme}
          style={{ ...style }}
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {children}
        </Subheading>
      );
    case 'c1':
      // 12
      return (
        <Caption
          theme={theme}
          style={{ ...style }}
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {children}
        </Caption>
      );
    case 'c2':
      // 10
      return (
        <Text
          theme={theme}
          style={[{ fontSize: 10 }, { ...style }]}
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {children}
        </Text>
      );
    default:
      // 14
      return (
        <Paragraph
          theme={theme}
          numberOfLines={1}
          ellipsizeMode="tail"
          style={{ ...style }}
        >
          {children}
        </Paragraph>
      );
  }
}

export default withTheme(MyText);