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, center } = props;
  let { color, theme, style } = 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',
    };
  }

  if (!!children) {
    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>
        );
    }
  } else {
    return <></>;
  }
}

export default withTheme(MyText);