Last Updated on : 2023-10-12 08:00:22download


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);


TYText properties are inherited from Text.


The text style.

Type Required Default value
Text.propTypes.style No null


The font type.

Type Required Default value
'heading' | 'title' | 'paragraph' No null


The font size.

Type Required Default value
'large' | 'normal' | 'small' | number No null

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.


Alignment of the font.

Type Required Default value
'left' | 'center' | 'right' No null


The font weight.

Type Required Default value
number | string No null


The font color.

Type Required Default value
ColorPropType No #333


The displayed text.

Type Required Default value
string Yes null



Set the text in the TYText component.

static setText(text)