Newline ignored when used in the <Trans> component (React Native)
See original GitHub issueDescribe 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:
Expected behavior It should render it respecting the newline.
Note that if I remove the <Trans>
component it gets rendered properly:
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:
- Created 5 years ago
- Comments:6 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Your first example (without explicit
{'\n'}
) renders on a single line.Thanks for the workaround until you find a solution for React Native.
We are still experiencing this with below versions:
Is it a regression issue?