CODEWITHSUNDEEP
react-native
merry-go-round
merry-go-round

Reputation: 4615

How to shrink string which exceeds width of the screen

enter image description here

As you see on the screen, the content (New Cateogry fromStylepost) exceeds the normal width of the screen and break the grid style.

How can I set every exceeding string to '...'?

For example I want to convert them New Cateogry fromStylepost from to New Category fro...

I'm using FlatList and this is renderItem function

return (
  <TouchableWithoutFeedback
    onPress={...}>
    <View style={styles.rowContainer}>
      {this._renderImage(item)}
      <RkText rkType="primary3">{item.name}</RkText> //I need to style this!
      <RkText rkType="secondary2 hintColor">{item.length} Style</RkText>
    </View>
  </TouchableWithoutFeedback>
);

Thank you!

Upvotes: 1

Views: 716

Answers (3)

Sagi Forbes
Sagi Forbes

Reputation: 2197

Each font has a font-contant and a font size (in pixels).

Number of possible characters can be calculated like:

NunberOfCharPerLine= WidthInPixel*FontConstant/FontSize

So if font constant (set by the font family) is set to 1.9, your control width is 100 pixels and you choose font size 18px, Number of displayed characters in a line is:

100*1.9/18 which is 10.5 (so about 10 characters).

Some example to font constants:

American Typewriter = 2.14

Baskerville = 2.14

Georgia = 1.91

Times New Roman = 2.21

Arial = 1.91

Calibri = 2.1

Helvetica Neue = 1.9

Lucida Grande = 1.91

Tahoma = 1.91

Trebuchet MS = 2.11

Verdana = 1.73

Courier New = 1.64

Upvotes: 1

krishnazden
krishnazden

Reputation: 1177

you can use 'letterSpacing' but works only in iOS

for details https://facebook.github.io/react-native/docs/text.html

Upvotes: 1

soutot
soutot

Reputation: 3671

You can use numberOfLines https://facebook.github.io/react-native/docs/text.html#numberoflines And ellipSizeMode https://facebook.github.io/react-native/docs/text.html#ellipsizemode

Example:

<Text numberOfLines={1} ellipsizeMode='tail'>my text is very very very very very long<Text>

Upvotes: 2

Related Questions