React-Localization setLanguage() does not update the page

What am I trying to achieve

Currently, I am trying to implement localization within our current React-Native project.

To do this, I choose the following package: React-Localization

Our project makes usage of React-Native in combination with TypeScript.

What is the problem

I have written a function to set the language from "en" to "nl".

Then I have two pages:

• Home (contains the function to change the language & has a Text element)
• Settings (has a Text element)

Only the text on the Home page gets updated. The text element on the Settings page is not getting translated. Also my header and bottom navigation are not translated.

What code am I using

To switch the language

    switchLanguage() {
        if (translationStrings.getLanguage().toLowerCase() == 'nl') {
            translationStrings.setLanguage('en');
        } else {
            translationStrings.setLanguage('nl');
        }
        this.setState({});
    }

Translations

export const translationStrings = new LocalizedStrings({
    en: {
        tempTest: "English test one",
        tempTest2: "English test two"
    },
    nl: {
        tempTest: "Dutch test een",
        tempTest2: "Dutch test twee"
    }
});

Examples of the elements that I am trying to translate.

// This is on the home page so it works.
                <Text>
                    {translationStrings.tempTest}
                </Text>

// This is on the settings page and it does not work.
                <Text>
                    {translationStrings.tempTest2}
                </Text>

Also, the header and bottom navigation is not updating/getting translated.

Could someone give me some insight into what I am exactly doing wrong?

It feels like I should give the application a sign that everything has been translated and that it should reload or something.