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"
}
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.
I found the answer for my question!
I just added numberOfLines and ellipsizeMode props to my text component and everything worked well.