Search code examples
reactjsreact-nativereact-navigationtabnavigator

Dynamic number of screens in TabNavigator


Situation

I currently write a news reader app for a magazine, which publishes the content in English and German under different categories. The number of categories per language is different. The categories are stored in as an array per language.

CATEGORIES_EN = [
    {
        selector: '*',
        blog: BLOG_EN,
        id: `${BLOG_EN}_*`,
    },
    {
        selector: 'Politics',
        blog: BLOG_EN,
        id: `${BLOG_EN}_Politics`,
    },
    // ... 8 more
];

CATEGORIES_DE = [
    {
        selector: '*',
        blog: BLOG_DE,
        id: `${BLOG_DE}_*`,
    },
    {
        selector: 'Politik',
        blog: BLOG_DE,
        id: `${BLOG_DE}_Politik`,
    },
    // ... 9 more
];

The screen component is always the same, but must receive the selector and the blog somehow.

Question

How can I change the number of screens, when the the language has changed?
How can I assign the categories to the screen component?

Environment

react-navigation: 1.0.0-beta.11
react-native: 0.45.0

Git-Issue

https://github.com/react-community/react-navigation/issues/1872


Solution

  • I've found a solution and want to share it with you:
    You have to recreate the TabNavigator all the time when something has been changed.

    For details please look in my Git-Issue and the referenced issue.