Text - Expo Web

Expo Web

Search…

Expo Web

Awesome Web!

Primitives

Styling

Text

React Native for web provides access to browser-only style properties. The following styles apply to any primitive that extends `TextViewStylePropTypes` like `<TextInput />`.

The API
​textIndent​
Sets the length of empty space (indentation) that is put before lines of text in a block.
Type: number | string
Conversion
1
// CSS
2
- text-indent: 30px;
3
​
4
// React Native
5
+ textIndent: 30,
Copied!
​textOverflow​
Sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.
Type: string | 'each-line' | 'hanging' | Array<T>
Conversion
1
// CSS
2
- text-overflow: 5px hanging each-line;
3
​
4
// React Native
5
+ textOverflow: [5, "hanging", "each-line"],
Copied!
​textRendering​
Provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision.
Type: 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed'
Conversion
1
// CSS
2
- text-rendering: optimizeLegibility;
3
​
4
// React Native
5
+ textRendering: "optimizeLegibility",
Copied!
​unicodeBidi​
The unicodeBidi property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicodeBidi property overrides this algorithm and allows the developer to control the text embedding.
Type: 'normal','bidi-override','embed','isolate','isolate-override','plaintext'
Conversion
1
// CSS
2
- unicode-bidi: embed;
3
​
4
// React Native
5
+ unicodeBidi: "embed",
Copied!
​whiteSpace​
Sets how white space inside an element is handled. Note: To make words break within themselves, use overflow-wrap, word-break, or hyphens instead.
Type: string
Conversion
1
// CSS
2
- white-space: word-break;
3
​
4
// React Native
5
+ whiteSpace: "word-break",
Copied!
​wordBreak​
Sets whether line breaks appear wherever the text would otherwise overflow its content box.
Type: 'normal', 'break-all', 'break-word', 'keep-all'
Conversion
1
// CSS
2
- word-break: break-all;
3
​
4
// React Native
5
+ wordBreak: "break-all",
Copied!
​wordWrap​
Applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
In CSS word-wrap is also known as overflow-wrap
Type: 'normal' | 'anywhere' | 'break-word'
Conversion
1
// CSS
2
- word-wrap: anywhere;
3
​
4
// React Native
5
+ wordWrap: "anywhere",
Copied!
​WebkitFontSmoothing​
​MozOsxFontSmoothing​
Controls the application of anti-aliasing when fonts are rendered.
Type: string
Conversion
1
// CSS
2
- font-smooth: always;
3
​
4
// React Native
5
+ WebkitFontSmoothing: "always",
6
+ MozOsxFontSmoothing: "always",
Copied!