Disabling wrapping on Text node

Question

I've got some preformatted text which I want to display unwrapped and allow the user to scroll both vertically and horizontally.

A contrived example of what I've got:

<ScrollView>
  <Text style={{fontFamily: 'monospace'}}>
    Some preformatted text which I don't want to wrap
  </Text>
</ScrollView>

The problem is that the text wraps and you can only scroll vertically.

One change that gets halfway there is by changing the ScrollView to:

<ScrollView style={{flex: 1, flexDirection: 'row'}}>

Wrapping becomes disabled, however scrolling doesn't work after I've done that.

Any help would be hugely appreciated.

Answer 1

It'd be

<Text numberOfLines={1}>Some text</Text>

You can also use ellipsizeMode attribute to control how overlapping text will behave.

For more informations - check out https://facebook.github.io/react-native/docs/text.html