ThemeText Component

ThemeText is a versatile React Native component that renders text with various styling options and supports HTML content. It's designed to handle different text rendering scenarios, including plain text, translated text, and HTML content with images and iframes. This component leverages the theme's font family and should be used instead of the default Text component to ensure the theme's font is applied. Detailed documentation on customizing the font family can be found in the customize-font guide.

Import Statement

import { ThemeText } from "@appmaker-xyz/ui";

Usage Example

SampleComponent.js

import { ThemeText } from "@appmaker-xyz/ui";

const SampleComponent = () => {
  return (
    <ThemeText size="md" fontFamily="bold">
      Custom Font
    </ThemeText>
  );
};

export default SampleComponent;

Props

The ThemeText component inherits all the props from the React Native Text component. Additionally, it offers the following props:

Prop	Type	Default	Description
style	object	{}	Style object to apply additional styles to the text component.
children	node	-	Text content to display.
size	string	'base'	Font size variant. Possible values: xs, 10, sm, base, md, lg, xl, 2xl, 3xl, 4xl.
fontFamily	string	'regular'	Font weight variant. Possible values: regular, medium, bold. This applies font names added in the custom-font extension or default font family.
color	string	'#000000'	Text color.
striptags	boolean	false	Strip HTML tags from the text content.
hideText	boolean	false	Conditionally hide the text content.
html	boolean	false	Render text content as HTML. Note: Other properties may not work if this is enabled.
customHtmlTagsStyles	object	{}	Custom styles for HTML tags. Format: { tag: { style: { key: value } } }
clientId	string	-	Used for test props.
testId	string	-	Used for test identification.

Size Guide

Size	Value
xs	8
10	10
sm	12
base	14
md	16
lg	18
xl	24
2xl	28
3xl	32
4xl	36

Functionality

1. Plain Text Rendering: When html is false, it renders plain text with specified styling.
2. HTML Content Rendering: When html is true, it uses react-native-render-html to display HTML content.
3. Translation: Supports text translation using the i18next library.
4. Link Handling: Custom link handling for HTML content, using getActionFromURL and handleAction.
5. Image Resizing: Automatically resizes images to fit the screen width.
6. YouTube Iframe Handling: Special handling for YouTube iframes to ensure proper display.
7. Font Styling: Applies bold styling to <b> and <strong> tags.
8. Entity Decoding: Decodes HTML entities in the text content.

Notes

• Font customization doc: customize-font
• The component uses various helper functions and styles from external modules.
• It includes workarounds for specific issues, such as iframe rendering on certain devices.
• The component is designed to work with a theming system, utilizing predefined font families and sizes.
• You can apply a custom fontSize using the style prop. The size prop is specifically for predefined font sizes.
• Using a custom fontWeight in the style prop will override the fontFamily prop. Therefore, it is recommended to avoid setting fontWeight in the style prop.

Dependencies

• React Native
• react-native-render-html
• @native-html/iframe-plugin
• react-native-webview
• react-i18next
• html-entities
• striptags

This documentation provides a comprehensive overview of the ThemeText component's functionality, usage, and customization options. For more detailed information about specific behaviors or edge cases, please consult the development team.