CODEWITHSUNDEEP
reactjsreact-native
Kishoretheju
Kishoretheju

Reputation: 957

Is there a way to specify how text gets wrapped in React native Text component?

Is there a way to specify line break mode in react native to the Text component?

By default Text Component wraps text by words(ie if it can't fit a word it wraps it to next line). I want to wrap text by characters(ie it should display as many characters it can from the word and move to next line)

For example: We can specify implement this in iOS by setting lineBreakMode to UILineBreakModeCharacterWrap on UILabel. I am trying to achieve something like that.

Upvotes: 2

Views: 14251

Answers (3)

Yuvraj Patil
Yuvraj Patil

Reputation: 8736

If you want to use similar feature on third party library component, checkout if it supports multiline property in some way.

In case of Card.Title of react-native-paper, property called titleNumberOfLines does the same thing.

Upvotes: 0

Hardik Bar
Hardik Bar

Reputation: 1760

Please try this code

<View style={{flexDirection:'row', flex: 1, flexWrap: 'wrap',flexShrink: 1}}>
   <Text> You miss fdddddd dddddddd You    missfddddddddddddddasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasds</Text> </View>

Upvotes: 7

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

Use flexWrap as hardik bar said:

flexWrap controls whether children can wrap around after they hit the end of a flex container

Here is sample expo link

Upvotes: -2

Related Questions