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