Function TextExample

example/src/Examples/TextExample.tsx:21–119

()

const Text = customText<'customVariant'>();

const TextExample = () => {
  const { isV3 } = useExampleTheme();

  const fontConfig = {
    customVariant: {
      fontFamily: Platform.select({
        ios: 'Noteworthy',
        default: 'serif',
      }),
      fontWeight: '400',
      letterSpacing: Platform.select({
        ios: 7,
        default: 4.6,
      }),
      lineHeight: 54,
      fontSize: 40,
    },
  } as const;

  const theme = {
    ...MD3LightTheme,
    fonts: configureFonts({ config: fontConfig }),
  };
  return (
    <ScreenWrapper>
      <View style={styles.container}>
        {!isV3 && (
          <>
            <Caption style={styles.text}>Caption</Caption>
            <Paragraph style={styles.text}>Paragraph</Paragraph>
            <Subheading style={styles.text}>Subheading</Subheading>
            <Title style={styles.text}>Title</Title>
            <Headline style={styles.text}>Headline</Headline>
          </>
        )}

        {isV3 && (
          <>
            <Text style={styles.text} variant="displayLarge">
              Display Large
            </Text>
            <Text style={styles.text} variant="displayMedium">
              Display Medium
            </Text>
            <Text style={styles.text} variant="displaySmall">
              Display small
            </Text>

            <Text style={styles.text} variant="headlineLarge">
              Headline Large
            </Text>
            <Text style={styles.text} variant="headlineMedium">
              Headline Medium
            </Text>
            <Text style={styles.text} variant="headlineSmall">
              Headline Small
            </Text>