1import { ClassAttributes, ComponentProps, ComponentType } from 'react'; 2import { 3 AccessibilityRole, 4 StyleProp, 5 Text as NativeText, 6 TextStyle as NativeTextStyle, 7} from 'react-native'; 8 9import { WebViewStyle } from './View'; 10import { createSafeStyledView } from '../css/createSafeStyledView'; 11 12// https://github.com/necolas/react-native-web/issues/832 13 14type NativeTextProps = ComponentProps<typeof NativeText> & ClassAttributes<typeof NativeText>; 15 16export interface WebTextStyle { 17 /** string is only available on web */ 18 fontSize?: NativeTextStyle['fontSize'] | string; 19 /** string is only available on web */ 20 lineHeight?: NativeTextStyle['lineHeight'] | string; 21 /** @platform web */ 22 fontFeatureSettings?: string; 23 /** @platform web */ 24 textIndent?: string; 25 /** @platform web */ 26 textOverflow?: string; 27 /** @platform web */ 28 textRendering?: string; 29 /** @platform web */ 30 textTransform?: string; 31 /** @platform web */ 32 unicodeBidi?: string; 33 /** @platform web */ 34 wordWrap?: string; 35} 36 37export type TextStyle = Omit<NativeTextStyle, 'position' | 'fontSize' | 'lineHeight'> & 38 WebTextStyle & 39 WebViewStyle; 40 41export type WebTextProps = { 42 style?: StyleProp<TextStyle>; 43 /** @platform web */ 44 tabIndex?: number; 45 /** @platform web */ 46 accessibilityLevel?: number; 47 accessibilityRole?: 'listitem' | 'heading' | AccessibilityRole; 48 /** @platform web */ 49 href?: string; 50 /** @deprecated use the prop `hrefAttrs={{ target: '...' }}` instead. */ 51 target?: string; 52 /** @platform web */ 53 hrefAttrs?: { 54 /** @platform web */ 55 target?: string; 56 /** @platform web */ 57 rel?: string; 58 /** @platform web */ 59 download?: boolean | string; 60 }; 61 /** @platform web */ 62 lang?: string; 63}; 64 65export type TextProps = Omit<NativeTextProps, 'style' | 'accessibilityRole'> & WebTextProps; 66 67const Text = NativeText as ComponentType<TextProps>; 68 69export default createSafeStyledView(Text) as ComponentType<TextProps>; 70