Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native white-space: nowrap width for absolutely positioned Text node

Tags:

react-native

In HTML/CSS if you want an absolutely positioned element to expand wider than its parent to fit all its text in one line, you can use white-space: no-wrap

.parent {
  position: relative;
  width: 100px;
}
// text content of this node is wider than 100px
.child {
  position: absolute;
  white-space: nowrap;
}

The child element will grow just wide enough to fit all the text in one line. There doesn't be a way to do this with Text components in React Native. You have to specify a fixed number width or the Text component will max out at the parent width. Is there a way?

like image 212
Owen Masback Avatar asked Oct 11 '17 21:10

Owen Masback


1 Answers

Figured out that the answer is quite simple.

Text wrap can be specified with the <Text> component's built-in interface called numberOfLines, instead of CSS.

<Text numberOfLines={1}>Foobar</Text>

The documentation for this can be found here.

like image 171
natsuozawa Avatar answered Sep 17 '22 13:09

natsuozawa