how can i add Line break in JSON?

Question

What I'm trying to do is that I want to add a line break between

remoteMessage.notification.title + remoteMessage.notification.body

title and body

If I use my code screen view show like this

this is my code

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    console.log(JSON.stringify(remoteMessage));
    Alert.alert(
      "A new FCM message arrived!",
      JSON.stringify(
        remoteMessage.notification.title + remoteMessage.notification.body
      )
    );
  });

  return unsubscribe;
}, []);

How can I fix my code? if I want to show like this?

title 
body

What has this to do with [JSON](https://www.json.org/json-en.html)? — Andreas, Mar 27 '21 at 10:33
[duplicate](https://stackoverflow.com/questions/42068/how-do-i-handle-newlines-in-json) ? — rustyBucketBay, Mar 27 '21 at 10:36
What you use for the line break depends on where the text is going to be displayed. The fact you're storing it in JSON beforehand is irrelevant — ADyson, Mar 27 '21 at 10:48
Do you really need those `""` around? Because that's what you get from `JSON.stringify()`, otherwise the line could be `Alert.alert(remoteMessage.notification.title+'
'+remoteMessage.notification.body);`. — tevemadar, Mar 27 '21 at 10:57

Ruhul Amin · Answer 1 · 2021-03-27T10:45:49.207

1

You can use \n, otherwise, You can try with <br/> between two texts.

useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    console.log(JSON.stringify(remoteMessage));
    Alert.alert(
      "A new FCM message arrived!",
      JSON.stringify(
        remoteMessage.notification.title +"<br/>"+ remoteMessage.notification.body
      )
    );
  });

  return unsubscribe;
}, []);

edited Mar 27 '21 at 10:45

answered Mar 27 '21 at 10:37

Ruhul Amin

821
11
14

if the \n is not work then Please add
between texts. title + "
" + body – Ruhul Amin Mar 27 '21 at 10:40
Rather than adding parts of answer in the comments, you can edit the answer. – Manas Khandelwal Mar 27 '21 at 10:41

score 1 · Answer 2 · answered Mar 27 '21 at 11:52

You can use \n and white-space: pre-line; CSS:

const text = "Title\nBody"

function App() {
  return <div className="pre-line">{text}</div>
}

ReactDOM.render(<App />, document.getElementById('root'))

.pre-line {
  white-space: pre-line;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>

You can use white-space: pre-wrap to include tab as well. – Elyas Karimi Jul 01 '23 at 10:22 — Elyas Karimi, Jul 01 '23 at 10:22

score 1 · Answer 3 · answered Oct 07 '22 at 08:46

If you know how to handle CSS (I hope you are a front developer), you can line break it with a combination of css' white-space: break-spaces and '\n'.

your.json file

{
   text: "I want to show you \nthe text that is line break."
}

your.css file

p {
   white-space: break-spaces;
}

Maybe it looks like this.

I want to show you
the text that is line break.

how can i add Line break in JSON?

3 Answers3