React Native - Creating Navigator dynamically with React Navigation

Question

I am building a mobile application with React Native and I am using React Navigation to build a navigator inside my application. React navigation provided me a good way to handl

Answer 1

Here I would like to post a method for creating tab bar according to the data we fetched from some API etc programmatically.

Here we fetch the data from API in this example, this code from the top level component :

renderShopTab() {
        const { client } = this.props;
        try {
            const { categories } = client.readQuery({
                query: gql`
                {
                    categories{
                        id
                        name
                        products{
                            id
                            name
                            price
                            quantity
                        }
                    }
                }`
            })

            console.log("Categories  :" + categories);

            return (
                
            )

        } catch (error) {
            console.log("Error occured creating the categories due to the : " + error);

            return (
                
                    
                        Loading...
                    
                
            )

        }

    }

This code snippet is from creator of the tab bar dynamically :

export const ShopCreator = ({ categories }) => {

    // This script will create a TabNavigator for categories and StackNavigators for each member of the categories !

    let categoryStack = {};

    let routes = {};


    categories.forEach((category) => {

        if (category.products.length > 0) {

            const { catname } = category.name;

            if (category.name != undefined) {

                routes[category.name] = {
                    screen: StackNavigator({
                        'isim': {
                            screen: ProductPage
                        }
                    },{
                        headerMode : 'none',
                        initialRouteParams : {
                            categoryName : category.name,
                            products : category.products
                        }
                    })
                }
            }
            
        } else {

            console.log("This category has no products !");

        }

    })

    console.log("OHA : " + JSON.stringify(routes));

    const ShopCatTabNav = TabNavigator(routes, {
        tabBarPosition: 'top',
        tabBarComponent: props => 
    })

    return 

}

As last , I will show you customized tab navigation bar I built :

const TabMenuItems = ({props}) => {

    const { activeTintColor, tab, tabbar, tabText, inactiveTintColor } = styles;
    const { index } = props.navigation.state;
    return(
        
        
        {
            props.navigation.state.routes.length ? (
                props.navigation.state.routes.map((route,number)=>{
                    const focused = ( index === number ) ? '#1874CD' : '#FF6A6A';
                    const tintColor = focused ? activeTintColor : inactiveTintColor;
                    return (
                         {
                                props.jumpToIndex(number)
                            }}
                            delayPressIn={0}
                            >
                            
                                
                                {props.getLabel({route, number})}
                                
                            
                        
                    )
                })
            ) : null
        }
    
    
    )
}

export default TabMenuItems;