I am working with the API.

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description}
  </Text>
 );
};

I want to show only the first 50 characters of the description. How can I do that?

I am working with the API.

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description}
  </Text>
 );
};

I want to show only the first 50 characters of the description. How can I do that?

• javascript
• react-native

Share Improve this question Follow edited Jul 13, 2020 at 17:36 monamona 1,24622 gold badges2121 silver badges4646 bronze badges asked Jul 13, 2020 at 15:44 NaiNai 5511 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Wele @Nai to StackOverflow,

You may use the pure JavaScript functions. slice or maybe substring.

Use of Slice:-

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description.slice(0, 50)}
  </Text>
 );
};

You can just use regular javascript functions to do that. In this case substring

renderGridItem = (itemData) => {
 return(
  <Text>
   {itemData.item.description.substring(0, 50)}
  </Text>
 );
};

Not exactly 50 characters, but you could achieve this with a bination of:

• Declare numberOfLines prop for text and set it to 1 / 2 (depending on your needs).
• Declare ellipsizeMode with whatever you want it to be.
• Set width of the container / text itself to the width you need and want to display.

Link to docs on Text in React Native.

This way you're making sure that your text is going to show correctly and no word is going to be cut in an ugly way.