Expo Web
  • Awesome Web!
  • Intro
  • FAQ
  • Anti-Pitch
  • Primitives
    • Intro to Primitives
    • View
    • TextInput
  • Styling
    • Animations
      • animationDelay
      • animationDirection
      • animationDuration
      • animationFillMode
      • animationIterationCount
      • animationKeyframes
      • animationPlayState
      • animationTimingFunction
      • animationDelay
      • animationDirection
      • animationDuration
      • animationFillMode
      • animationIterationCount
      • animationKeyframes
      • animationPlayState
      • animationTimingFunction
    • Aspect Ratio
    • Grids
    • Interactions
    • Text
    • Transforms
    • Transitions
    • View
Powered by GitBook
On this page
  • The API
  • textIndent
  • textOverflow
  • textRendering
  • unicodeBidi
  • whiteSpace
  • wordBreak
  • wordWrap
  • WebkitFontSmoothing
  • MozOsxFontSmoothing

Was this helpful?

  1. 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 />`.

PreviousInteractionsNextTransforms

Last updated 5 years ago

Was this helpful?

The API

Sets the length of empty space (indentation) that is put before lines of text in a block.

Type: number | string

Conversion

// CSS
- text-indent: 30px;

// React Native
+ textIndent: 30,

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

// CSS
- text-overflow: 5px hanging each-line;

// React Native
+ textOverflow: [5, "hanging", "each-line"],

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

// CSS
- text-rendering: optimizeLegibility;

// React Native
+ textRendering: "optimizeLegibility",

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

// CSS
- unicode-bidi: embed;

// React Native
+ unicodeBidi: "embed",

Type: string

Conversion

// CSS
- white-space: word-break;

// React Native
+ whiteSpace: "word-break",

Sets whether line breaks appear wherever the text would otherwise overflow its content box.

Type: 'normal', 'break-all', 'break-word', 'keep-all'

Conversion

// CSS
- word-break: break-all;

// React Native
+ wordBreak: "break-all",

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

// CSS
- word-wrap: anywhere;

// React Native
+ wordWrap: "anywhere",

Controls the application of anti-aliasing when fonts are rendered.

Type: string

Conversion

// CSS
- font-smooth: always;

// React Native
+ WebkitFontSmoothing: "always",
+ MozOsxFontSmoothing: "always",

Sets how inside an element is handled. Note: To make words break within themselves, use , , or instead.

textIndent
textOverflow
textRendering
unicodeBidi
whiteSpace
white space
overflow-wrap
word-break
hyphens
wordBreak
wordWrap
WebkitFontSmoothing
MozOsxFontSmoothing