TYText

Overview

In React Native, the default properties of the Text component are inconsistent on Android and iOS. TYText is developed on the basis of the Text component. The properties of TYText are consistent on iOS and Android.

Code demo

Note: for more information, see Demo.

import React from "react";
 import PropTypes from "prop-types";
 import { ScrollView, View } from "react-native";
 import { TYText, Utils, defaultTheme } from "tuya-panel-kit";
 
const { withTheme } = Utils.ThemeUtils;
 
const TYTextScene = (props) => {
  const typeMap = ["heading", "title", "paragraph"];
  const sizeMap = ["large", "normal", "small"];
  return (
    <ScrollView>
      {typeMap.map( =>
        sizeMap.map((size, idx) => {
          const { fontSize } = defaultTheme.text[type][size](props.theme);
          return (
            <View
              key={`${type}-${size}`}
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-between",
                minHeight: 36,
              }}
            >
              <TYText>{`${type}-${size}`}</TYText>
              <TYText type={type} size={sizeMap[idx]}>{`${fontSize}px`}</TYText>
            </View>
          );
        })
      )}
      {/* Custom Size Text */}
      <TYText
        color="red"
        align="center"
        weight="bold"
        size={36}
        text="Custom size 36px"
      />
      <TYText
        style={{ fontSize: 36, textAlign: "center" }}
        text="Custom size 36px"
      />
    </ScrollView>
  );
 };
 
TYTextScene.propTypes = {
  theme: PropTypes.object.isRequired,
 };
 
export default withTheme(TYTextScene);

API

TYText properties are inherited from Text.

style

The text style.

type

The font type.

size

The font size.

Note: When both the type and size properties are set to enumerated values, the corresponding values will be obtained from the theme. For example, when you set type:'heading', size:'small', it will go to text.heading.small to obtain the corresponding font size and font line height.

align

Alignment of the font.

weight

The font weight.

color

The font color.

text

The displayed text.

Methods

setText

Set the text in the TYText component.

static setText(text)