0
# Text and Input
1

2
Text display and input components with advanced typography, accessibility, and internationalization support. These components provide comprehensive text handling capabilities for React Native Web applications.
3

4
## Text
5

6
A component for displaying text with advanced typography features, accessibility support, and user interaction capabilities.
7

8
```javascript { .api }
9
const Text: React.ComponentType<TextProps>;
10
```
11

12
**Props:**
13
- `style` - Text styling including typography, colors, and layout properties
14
- `numberOfLines` - Maximum number of lines to display (1 = single line with ellipsis, >1 = multi-line with ellipsis)
15
- `onPress` - Callback when text is pressed (makes text interactive)
16
- `selectable` - Whether text can be selected by user (true/false)
17
- `accessible` - Whether component is accessible to screen readers
18
- `accessibilityLabel` - Screen reader label
19
- `accessibilityRole` - Semantic role: `'button'` | `'header'` | `'heading'` | `'label'` | `'link'` | `'listitem'` | `'none'` | `'text'`
20
- `href` - Makes text render as a link (anchor element)
21
- `hrefAttrs` - Link attributes: `{download?: boolean, rel?: string, target?: string}`
22
- `dir` - Text direction: `'auto'` | `'ltr'` | `'rtl'`
23
- `lang` - Language code for proper text rendering and accessibility
24
- `children` - Text content (string or nested Text components)
25

26
**Styling Props:**
27
- `color` - Text color
28
- `fontFamily` - Font family name
29
- `fontSize` - Font size (number or string with units)
30
- `fontWeight` - Font weight: `'normal'` | `'bold'` | `'100'` to `'900'`
31
- `fontStyle` - Font style: `'normal'` | `'italic'`
32
- `letterSpacing` - Letter spacing
33
- `lineHeight` - Line height
34
- `textAlign` - Text alignment: `'left'` | `'right'` | `'center'` | `'justify'` | `'start'` | `'end'`
35
- `textDecorationLine` - Text decoration: `'none'` | `'underline'` | `'line-through'` | `'underline line-through'`
36
- `textTransform` - Text transform: `'none'` | `'capitalize'` | `'uppercase'` | `'lowercase'`
37
- `userSelect` - Text selection: `'none'` | `'text'` | `'auto'`
38

39
**Usage:**
40
```javascript
41
import { Text } from "react-native-web";
42

43
// Basic text
44
<Text style={{ fontSize: 16, color: '#333' }}>
45
  Hello World
46
</Text>
47

48
// Interactive text
49
<Text 
50
  onPress={() => alert('Pressed!')}
51
  style={{ color: 'blue', textDecorationLine: 'underline' }}
52
>
53
  Click me
54
</Text>
55

56
// Single line with ellipsis
57
<Text numberOfLines={1} style={{ width: 200 }}>
58
  This is a very long text that will be truncated with ellipsis
59
</Text>
60

61
// Multi-line with ellipsis
62
<Text numberOfLines={3} style={{ width: 200 }}>
63
  This is a longer text that will be displayed on multiple lines 
64
  but truncated after 3 lines with ellipsis
65
</Text>
66

67
// Link text
68
<Text 
69
  href="https://example.com"
70
  hrefAttrs={{ target: '_blank', rel: 'noopener' }}
71
  style={{ color: 'blue' }}
72
>
73
  External Link
74
</Text>
75

76
// Nested text with different styles
77
<Text style={{ fontSize: 16 }}>
78
  Welcome to{' '}
79
  <Text style={{ fontWeight: 'bold', color: 'blue' }}>
80
    React Native Web
81
  </Text>
82
</Text>
83

84
// Accessible text
85
<Text 
86
  accessibilityRole="heading"
87
  accessibilityLabel="Page title"
88
  style={{ fontSize: 24, fontWeight: 'bold' }}
89
>
90
  Dashboard
91
</Text>
92
```
93

94
## TextInput
95

96
A text input component for collecting user input with comprehensive keyboard handling, validation, and accessibility features.
97

98
```javascript { .api }
99
const TextInput: React.ComponentType<TextInputProps>;
100
```
101

102
**Props:**
103
- `value` - Current text value (controlled component)
104
- `defaultValue` - Initial text value (uncontrolled component)
105
- `placeholder` - Placeholder text when input is empty
106
- `placeholderTextColor` - Color of placeholder text
107
- `multiline` - Enable multi-line input (renders as textarea)
108
- `numberOfLines` - Number of lines for multiline input (deprecated, use `rows`)
109
- `rows` - Number of rows for textarea
110
- `maxLength` - Maximum number of characters allowed
111
- `editable` - Whether input is editable (deprecated, use `readOnly`)
112
- `readOnly` - Whether input is read-only
113
- `secureTextEntry` - Hide text for password input
114
- `autoFocus` - Automatically focus input when mounted
115
- `clearTextOnFocus` - Clear text when input receives focus
116
- `selectTextOnFocus` - Select all text when input receives focus
117
- `blurOnSubmit` - Blur input when submit is pressed (default: true for single-line, false for multi-line)
118

119
**Keyboard and Input Props:**
120
- `keyboardType` - Virtual keyboard type (deprecated, use `inputMode`)
121
- `inputMode` - Input mode: `'text'` | `'numeric'` | `'decimal'` | `'email'` | `'tel'` | `'url'` | `'search'` | `'none'`
122
- `enterKeyHint` - Enter key appearance: `'enter'` | `'done'` | `'go'` | `'next'` | `'previous'` | `'search'` | `'send'`
123
- `returnKeyType` - Return key type (deprecated, use `enterKeyHint`)
124
- `autoCapitalize` - Auto-capitalization: `'none'` | `'sentences'` | `'words'` | `'characters'`
125
- `autoComplete` - Browser autocomplete behavior
126
- `autoCorrect` - Enable auto-correction
127
- `spellCheck` - Enable spell checking
128
- `caretHidden` - Hide text cursor
129

130
**Selection and Events:**
131
- `selection` - Text selection: `{start: number, end?: number}`
132
- `selectionColor` - Color of text selection
133
- `onChangeText` - Text change callback: `(text: string) => void`
134
- `onChange` - Raw change event callback
135
- `onFocus` - Focus event callback
136
- `onBlur` - Blur event callback
137
- `onSubmitEditing` - Submit/enter key callback
138
- `onKeyPress` - Key press callback
139
- `onSelectionChange` - Selection change callback
140
- `onContentSizeChange` - Content size change callback (multiline only)
141

142
**Methods:**
143
- `focus()` - Focus the input
144
- `blur()` - Blur the input
145
- `clear()` - Clear the input text
146
- `isFocused()` - Check if input is focused
147

148
**Usage:**
149
```javascript
150
import { TextInput, View } from "react-native-web";
151

152
function LoginForm() {
153
  const [email, setEmail] = useState('');
154
  const [password, setPassword] = useState('');
155
  const passwordRef = useRef();
156

157
  return (
158
    <View style={{ padding: 20 }}>
159
      <TextInput
160
        value={email}
161
        onChangeText={setEmail}
162
        placeholder="Enter email"
163
        inputMode="email"
164
        autoCapitalize="none"
165
        autoComplete="email"
166
        enterKeyHint="next"
167
        onSubmitEditing={() => passwordRef.current?.focus()}
168
        style={{
169
          borderWidth: 1,
170
          borderColor: '#ccc',
171
          padding: 10,
172
          borderRadius: 5,
173
          marginBottom: 10
174
        }}
175
      />
176
      
177
      <TextInput
178
        ref={passwordRef}
179
        value={password}
180
        onChangeText={setPassword}
181
        placeholder="Enter password"
182
        secureTextEntry={true}
183
        autoComplete="current-password"
184
        enterKeyHint="done"
185
        onSubmitEditing={() => console.log('Login')}
186
        style={{
187
          borderWidth: 1,
188
          borderColor: '#ccc',
189
          padding: 10,
190
          borderRadius: 5
191
        }}
192
      />
193
    </View>
194
  );
195
}
196

197
// Multi-line input
198
<TextInput
199
  multiline={true}
200
  rows={4}
201
  placeholder="Enter your message..."
202
  onChangeText={(text) => console.log(text)}
203
  style={{
204
    borderWidth: 1,
205
    borderColor: '#ccc',
206
    padding: 10,
207
    textAlignVertical: 'top'
208
  }}
209
/>
210

211
// Controlled selection
212
function TextEditor() {
213
  const [text, setText] = useState('Hello World');
214
  const [selection, setSelection] = useState({start: 0, end: 5});
215
  
216
  return (
217
    <TextInput
218
      value={text}
219
      onChangeText={setText}
220
      selection={selection}
221
      onSelectionChange={(event) => {
222
        setSelection(event.nativeEvent.selection);
223
      }}
224
      style={{ borderWidth: 1, padding: 10 }}
225
    />
226
  );
227
}
228

229
// Number input
230
<TextInput
231
  inputMode="numeric"
232
  placeholder="Enter amount"
233
  keyboardType="number-pad" // fallback for older browsers
234
  onChangeText={(text) => {
235
    // Only allow numbers
236
    const numericText = text.replace(/[^0-9]/g, '');
237
    setAmount(numericText);
238
  }}
239
/>
240

241
// Search input
242
<TextInput
243
  inputMode="search"
244
  placeholder="Search..."
245
  enterKeyHint="search"
246
  onSubmitEditing={(event) => {
247
    performSearch(event.nativeEvent.text);
248
  }}
249
  style={{ 
250
    borderRadius: 20,
251
    backgroundColor: '#f0f0f0',
252
    padding: 10
253
  }}
254
/>
255
```
256

257
## Types
258

259
```javascript { .api }
260
interface TextStyle extends ViewStyle {
261
  color?: ColorValue;
262
  fontFamily?: string;
263
  fontSize?: number | string;
264
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
265
  fontStyle?: 'normal' | 'italic';
266
  letterSpacing?: number | string;
267
  lineHeight?: number | string;
268
  textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
269
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
270
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
271
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
272
  userSelect?: 'none' | 'text' | 'auto';
273
  // ... other text style properties
274
}
275

276
interface TextProps extends ViewProps {
277
  style?: TextStyle;
278
  numberOfLines?: number;
279
  onPress?: (event: PressEvent) => void;
280
  selectable?: boolean;
281
  accessibilityRole?: 'button' | 'header' | 'heading' | 'label' | 'link' | 'listitem' | 'none' | 'text';
282
  dir?: 'auto' | 'ltr' | 'rtl';
283
  children?: React.ReactNode;
284
}
285

286
interface TextInputStyle extends TextStyle {
287
  caretColor?: ColorValue;
288
  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
289
}
290

291
interface TextInputProps extends ViewProps {
292
  style?: TextInputStyle;
293
  value?: string;
294
  defaultValue?: string;
295
  placeholder?: string;
296
  placeholderTextColor?: ColorValue;
297
  multiline?: boolean;
298
  rows?: number;
299
  maxLength?: number;
300
  readOnly?: boolean;
301
  secureTextEntry?: boolean;
302
  autoFocus?: boolean;
303
  clearTextOnFocus?: boolean;
304
  selectTextOnFocus?: boolean;
305
  blurOnSubmit?: boolean;
306
  
307
  // Input mode and keyboard
308
  inputMode?: 'text' | 'numeric' | 'decimal' | 'email' | 'tel' | 'url' | 'search' | 'none';
309
  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
310
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
311
  autoComplete?: string;
312
  autoCorrect?: boolean;
313
  spellCheck?: boolean;
314
  caretHidden?: boolean;
315
  
316
  // Selection
317
  selection?: {start: number; end?: number};
318
  selectionColor?: ColorValue;
319
  
320
  // Events
321
  onChangeText?: (text: string) => void;
322
  onChange?: (event: ChangeEvent) => void;
323
  onFocus?: (event: FocusEvent) => void;
324
  onBlur?: (event: BlurEvent) => void;
325
  onSubmitEditing?: (event: SubmitEvent) => void;
326
  onKeyPress?: (event: KeyPressEvent) => void;
327
  onSelectionChange?: (event: SelectionChangeEvent) => void;
328
  onContentSizeChange?: (event: ContentSizeChangeEvent) => void;
329
  
330
  // Deprecated
331
  editable?: boolean; // use readOnly instead
332
  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'search' | 'url' | 'web-search'; // use inputMode instead
333
  numberOfLines?: number; // use rows instead
334
  returnKeyType?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; // use enterKeyHint instead
335
}
336
```