1/** 2 * Copyright (c) Meta Platforms, Inc. and affiliates. 3 * 4 * This source code is licensed under the MIT license found in the 5 * LICENSE file in the root directory of this source tree. 6 * 7 * @format 8 */ 9 10import type * as React from 'react'; 11import {Constructor} from '../../types/private/Utilities'; 12import {AccessibilityProps} from '../Components/View/ViewAccessibility'; 13import {NativeMethods} from '../../types/public/ReactNativeTypes'; 14import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet'; 15import {TextStyle} from '../StyleSheet/StyleSheetTypes'; 16import { 17 GestureResponderEvent, 18 LayoutChangeEvent, 19 NativeSyntheticEvent, 20 TextLayoutEventData, 21} from '../Types/CoreEventTypes'; 22 23export interface TextPropsIOS { 24 /** 25 * Specifies whether font should be scaled down automatically to fit given style constraints. 26 */ 27 adjustsFontSizeToFit?: boolean | undefined; 28 29 /** 30 * The Dynamic Text scale ramp to apply to this element on iOS. 31 */ 32 dynamicTypeRamp?: 33 | 'caption2' 34 | 'caption1' 35 | 'footnote' 36 | 'subheadline' 37 | 'callout' 38 | 'body' 39 | 'headline' 40 | 'title3' 41 | 'title2' 42 | 'title1' 43 | 'largeTitle' 44 | undefined; 45 46 /** 47 * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). 48 */ 49 minimumFontScale?: number | undefined; 50 51 /** 52 * When `true`, no visual change is made when text is pressed down. By 53 * default, a gray oval highlights the text on press down. 54 */ 55 suppressHighlighting?: boolean | undefined; 56} 57 58export interface TextPropsAndroid { 59 /** 60 * Specifies the disabled state of the text view for testing purposes. 61 */ 62 disabled?: boolean | undefined; 63 64 /** 65 * Lets the user select text, to use the native copy and paste functionality. 66 */ 67 selectable?: boolean | undefined; 68 69 /** 70 * The highlight color of the text. 71 */ 72 selectionColor?: ColorValue | undefined; 73 74 /** 75 * Set text break strategy on Android API Level 23+ 76 * default is `highQuality`. 77 */ 78 textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined; 79 80 /** 81 * Determines the types of data converted to clickable URLs in the text element. 82 * By default no data types are detected. 83 */ 84 dataDetectorType?: 85 | null 86 | 'phoneNumber' 87 | 'link' 88 | 'email' 89 | 'none' 90 | 'all' 91 | undefined; 92 93 /** 94 * Hyphenation strategy 95 */ 96 android_hyphenationFrequency?: 'normal' | 'none' | 'full' | undefined; 97} 98 99// https://reactnative.dev/docs/text#props 100export interface TextProps 101 extends TextPropsIOS, 102 TextPropsAndroid, 103 AccessibilityProps { 104 /** 105 * Specifies whether fonts should scale to respect Text Size accessibility settings. 106 * The default is `true`. 107 */ 108 allowFontScaling?: boolean | undefined; 109 110 children?: React.ReactNode; 111 112 /** 113 * This can be one of the following values: 114 * 115 * - `head` - The line is displayed so that the end fits in the container and the missing text 116 * at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" 117 * - `middle` - The line is displayed so that the beginning and end fit in the container and the 118 * missing text in the middle is indicated by an ellipsis glyph. "ab...yz" 119 * - `tail` - The line is displayed so that the beginning fits in the container and the 120 * missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." 121 * - `clip` - Lines are not drawn past the edge of the text container. 122 * 123 * The default is `tail`. 124 * 125 * `numberOfLines` must be set in conjunction with this prop. 126 * 127 * > `clip` is working only for iOS 128 */ 129 ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined; 130 131 /** 132 * Used to reference react managed views from native code. 133 */ 134 id?: string | undefined; 135 136 /** 137 * Line Break mode. Works only with numberOfLines. 138 * clip is working only for iOS 139 */ 140 lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined; 141 142 /** 143 * Used to truncate the text with an ellipsis after computing the text 144 * layout, including line wrapping, such that the total number of lines 145 * does not exceed this number. 146 * 147 * This prop is commonly used with `ellipsizeMode`. 148 */ 149 numberOfLines?: number | undefined; 150 151 /** 152 * Invoked on mount and layout changes with 153 * 154 * {nativeEvent: { layout: {x, y, width, height}}}. 155 */ 156 onLayout?: ((event: LayoutChangeEvent) => void) | undefined; 157 158 /** 159 * Invoked on Text layout 160 */ 161 onTextLayout?: 162 | ((event: NativeSyntheticEvent<TextLayoutEventData>) => void) 163 | undefined; 164 165 /** 166 * This function is called on press. 167 * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). 168 */ 169 onPress?: ((event: GestureResponderEvent) => void) | undefined; 170 171 onPressIn?: ((event: GestureResponderEvent) => void) | undefined; 172 onPressOut?: ((event: GestureResponderEvent) => void) | undefined; 173 174 /** 175 * This function is called on long press. 176 * e.g., `onLongPress={this.increaseSize}>`` 177 */ 178 onLongPress?: ((event: GestureResponderEvent) => void) | undefined; 179 180 /** 181 * @see https://reactnative.dev/docs/text#style 182 */ 183 style?: StyleProp<TextStyle> | undefined; 184 185 /** 186 * Used to locate this view in end-to-end tests. 187 */ 188 testID?: string | undefined; 189 190 /** 191 * Used to reference react managed views from native code. 192 */ 193 nativeID?: string | undefined; 194 195 /** 196 * Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: 197 * - null/undefined (default): inherit from the parent node or the global default (0) 198 * - 0: no max, ignore parent/global default 199 * - >= 1: sets the maxFontSizeMultiplier of this node to this value 200 */ 201 maxFontSizeMultiplier?: number | null | undefined; 202} 203 204/** 205 * A React component for displaying text which supports nesting, styling, and touch handling. 206 */ 207declare class TextComponent extends React.Component<TextProps> {} 208declare const TextBase: Constructor<NativeMethods> & typeof TextComponent; 209export class Text extends TextBase {} 210