question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Newline ignored when used in the <Trans> component (React Native)

See original GitHub issue

Describe the bug When using a newline character within the <Trans> component, it gets ignored.

To Reproduce

import { Text } from 'react-native';
import { Trans } from '@lingui/react';

export default function App() {
  return (
    <Text>
      <Trans id="howItWorks">
        1. You get two free weeks of unlimited access.{'\n'}
        2. Choose your plan.
      </Trans>
    </Text>
  );
}

Result:

img_1163

Expected behavior It should render it respecting the newline.

Note that if I remove the <Trans> component it gets rendered properly:

img_1161

Additional context Add any other context about the problem here.

  • jsLingui version 2.7.0
  • Babel version
$ npm list babel-core
β”œβ”€β”¬ jest@22.4.3
β”‚ └─┬ jest-cli@22.4.3
β”‚   └─┬ jest-runtime@22.4.3
β”‚     └── babel-core@6.26.0  deduped
└─┬ react-native@0.55.3
  β”œβ”€β”€ babel-core@6.26.0
  β”œβ”€β”¬ babel-register@6.26.0
  β”‚ └── babel-core@6.26.0  deduped
  β”œβ”€β”¬ fbjs-scripts@0.8.3
  β”‚ └── babel-core@6.26.0  deduped
  └─┬ metro@0.30.2
    └── babel-core@6.26.0  deduped
  • Your Babel config (e.g. .babelrc)
module.exports = {
  presets: ['react-native', '@lingui/babel-preset-react'],
  plugins: [['module-resolver', { root: ['./src'] }]],
};
  • React Native version 0.55.3

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jeanregissercommented, Sep 12, 2018

Your first example (without explicit {'\n'}) renders on a single line.

Thanks for the workaround until you find a solution for React Native.

0reactions
normanzbcommented, Jun 29, 2021

We are still experiencing this with below versions:

{
  "@lingui/core": "^3.10.2",
  "@lingui/react": "^3.9.0",
  "@lingui/macro": "^3.9.0"
}

Is it a regression issue?

Read more comments on GitHub >

github_iconTop Results From Across the Web

React i18n break lines in JSON String - Stack Overflow
I'm struggling to break lines within the string in my JSON language file. This is what I already tried, which doesn't break a...
Read more >
react native string new line not working Code Example
you need use {'\n'} as line breaks in text component, whenever you need to add line break in react native application.
Read more >
Trans Component - react-i18next documentation
This component enables you to nest any React content to be translated as one cohesive string. It supports both plural and interpolation.
Read more >
white-space - CSS: Cascading Style Sheets - MDN Web Docs
The white-space CSS property sets how white space inside an element is handled.
Read more >
Tooling - styled-components
Additional Tools for styled-components, babel and TypeScript plugins, testing. ... not use this plugin and try to server-side render styled-components React ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found