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

3 Answers 3

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.