The Code: I want to get the 'GENERAL' text from current loaded locale. <div cl

Thank you very much for the help <a class="user-mention notranslate" data-hovercard-ty

<FormattedMessage message={} / how to use array?,about joshswan/react-native-globalize

Comments (3)

joshswan commented on August 24, 2024

You have to use objects throughout the message JSON structure and make sure the path you're providing via the array is valid.

en = {
    scenes: {
        faq: {
            title: 'Frequently Asked Questions',
            sections: {
                general: {
                    title: 'GENERAL',
                },
                advanced: {
                    title: 'ADVANCED',
                },
            },
        },
    },
};

<FormattedMessage message={['scenes', 'faq', 'sections', 'general', 'title']} />
// GENERAL
<FormattedMessage message={['scenes', 'faq', 'sections', 'advanced', 'title']} />
// ADVANCED
<FormattedMessage message={['scenes', 'faq', 'title']} />
// Frequently Asked Questions

// You can also use a dynamic value if you want to use a loop
const sections = ['general', 'advanced'];

sections.forEach((section) => (
    <FormattedMessage message={['scenes', 'faq', 'sections', section, 'title']} />
));
/>

from react-native-globalize.

ostrichegret commented on August 24, 2024

Thank you very much for the help @joshswan

I hope this will support array in the future, some react components use array instead of object,
( I use the Accordion component in https://github.com/oblador/react-native-collapsible )

from react-native-globalize.

joshswan commented on August 24, 2024

Your language data does not need to be an array in order to use a component like that. In fact it's better if it's not so that the language data can be updated and reordered without affecting your app.

Here's an example of how to use the two libraries. Notice that there is no need for the language data to be an array:

// Section identifiers
const sections = ['general', 'advanced'];

// Get localized section titles using react-native-globalize and the section identifiers
const sectionTitles = sections.map(section => (
  this.context.globalize.getMessageFormatter(['scenes', 'faq', 'sections', section, 'title'])
));

// Use the sectionTitles array in your Accordion component
<Accordion 
  sections={sectionTitles}
  renderHeader={this._renderHeader}
  renderContent={this._renderContent}
/>