white-space and text-overflow styles doesn't works in react native-CodePudding

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"
}

CodePudding user response：

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

CodePudding user response：

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