Search code examples
javascriptreact-nativei18nextreact-i18next

Break newline in react native with react i18next

I am using react-i18next i18next in a react-native project. I am having trouble adding a new line in the translated text.

// locales_en.json
"FOO": "I am text \n that should have a new line

That \n is not doing anything. How would I add a line break in the translation files?

Solution 
  • {
  "FOO": "I am text\nthat should have a new line\nThat\nis not doing anything."
}

    In your React Native code, ensure you're rendering the translated text using a component that supports newline characters, such as the Text component:

    import React from 'react';
import { Text } from 'react-native';
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return <Text>{t('FOO')}</Text>;
};

export default MyComponent;