How can I insert a line break into a <Text> component in React Native?
You can also do:
<Text>{`
Hi~
this is a test message.
`}</Text>
Easier in my opinion, because you don't have to insert stuff within the string; just wrap it once and it keeps all your line-breaks.
Solution 1:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
Solution 2:
<Text>{`
line 1
line 2
`}</Text>
Solution 3:
Here was my solution of handling multiple <br/>
tags:
<Text style={{ whiteSpace: "pre-line" }}>
{"Hi<br/> this is a test message.".split("<br/>").join("\n")}
</Text>
Solution 4:
use maxWidth
for auto line break
<Text style={{ maxWidth:200}}>this is a test message. this is a test message</Text>
This should do it:
<Text>
Hi~{"\n"}
this is a test message.
</Text>
Use:
<Text>{`Hi,\nCurtis!`}</Text>
Result:
Hi,
Curtis!