1

I'm trying use styled_components to replace some texts when line is break with the follows css styles:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

But when i use text-overflow and/or white-space styles, i have a error, because textOverflow and whiteSpace is not a valid style property.

How to apply that styles with styled_components or React Native StyleSheet?

Thank you!

React, React Native e Styled Components version

{
"react": "16.13.1",
"react-native": "0.63.4",
"styled-components": "^5.2.1"
}
Fellipe Neves
  • 41
  • 1
  • 4

2 Answers2

0

The solution to that issue is flexShrink: 1.

<View style={{ flexDirection: 'row' }}> 
 <Text style={{ flexShrink: 1 }}>
  Really really long text...
 </Text>
</View>

Depending on your set up, you may also also need to add flexShrink: 1 to the 's parent as well, to get this to work, so play with that and you'll make it.

https://stackoverflow.com/a/57462018/18021672

pilotkamilo
  • 26
  • 3
  • Thank you! I found the resolution for this "problem", i just added numberOfLines and ellipsizeMode props to my text component and worked well. – Fellipe Neves Jan 27 '22 at 12:33
0

I found the answer for my question!

I just added numberOfLines and ellipsizeMode props to my text component and everything worked well.

How to have Ellipsis effect on Text

Fellipe Neves
  • 41
  • 1
  • 4