I am currently utilizing react-native in combination with styled-components.
Whenever a string is typed into the text and followed by pressing the spacebar, it either results in too many line breaks or creates excessive empty spaces.
An example of this issue can be seen in the image below:
https://i.sstatic.net/IjUWx.jpg
In the image, I have only used spaces sparingly. However, the line breaks still occur as shown above.
The following is an excerpt from my code:
const Container = styled.View`
flex-direction: column;
margin: 1% 2% 0 2.5%;
border-bottom-width: 0.8px;
border-color: #c6cfc7;
`;
const CommentContainer = styled.View`
padding: 4.5% 2% 3.5% 5%;
margin-top: 0.5%;
`;
const SecondCommentCon = styled.View`
`;
const LabelContainer = styled.View`
background: lightblue;
width: 100%;
`;
const Label = styled.Text`
background: lightcoral;
padding-top: 3.5%;
line-height: 18px;
top: 0.5%;
font-size: 13px;
`;
return (
<>
<Container>
<CommentContainer>
<SecondCommentCon>
<LabelContainer>
<Label>{item.content}</Label>
</LabelContainer>
</SecondCommentCon>
</CommentContainer>
</Container>
</>
);
};
export default TodoItem;
How should I modify my existing code to rectify this issue?