Navigation tabs inside CollapsibleHeaderLayout are not supported

[swati-eaton]

We need to add Tab.Navigator inside CollapsibleHeaderLayout

Component : https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--collapsible-header-layout

When we try to do same, corresponding tabs screens are not getting rendered and swipe functionality is also not working.

<CollapsibleHeaderLayout
                HeaderProps={{
                    variant: 'dynamic',
                    title: 'School of fine arts',
                    subtitle: 'Org name',
                    info: 'location',
                    icon: { name: 'arrow-back' },
                    onIconPress: () => {
                        navigation.pop();
                    },
                    actionItems: [{ icon: { name: 'edit' }, onPress: () => {} }],
                    collapsedHeight: 50,
                    expandedHeight: 200,
                    expandable: true,
                }}
                               
                <Tab.Navigator
                    screenOptions={{
                        swipeEnabled: true,
                    }}
                >
                    <Tab.Screen name="Help" component={Help} />
                    <Tab.Screen name="AccountSettings" component={AccountSettings} />
                </Tab.Navigator>
            >
</CollapsibleHeaderLayout>

[daileytj]

From Swati Jain:

"I have tried by keeping tab navigator outside of the CollapsibleHeader component and with this we are able to render the tabs perfectly But header is not scrollable with this approach as it will not have much content to get scroll area.

As per current UX design, it’s expected to scroll (expand/collapse) header and to achieve this all the bottom content we should keep it inside CollapsibleHeader. "

[daileytj]

See if we can put together a code snippet for this.

[swati-eaton]

Hi @daileytj Did you get a chance to look into this ?

[bkarambe]

<CollapsibleHeaderLayout
HeaderProps={{
variant: 'dynamic',
title: 'School of fine arts',
subtitle: 'Org name',
info: 'location',
icon: { name: 'arrow-back' },
onIconPress: () => {
navigation.pop();
},
actionItems: [{ icon: { name: 'edit' }, onPress: () => {} }],
collapsedHeight: 50,
expandedHeight: 200,
expandable: true,
}}

            <Tab.Navigator
                screenOptions={{
                    swipeEnabled: true,
                }}
            >
                <Tab.Screen name="Help" component={Help} />
                <Tab.Screen name="AccountSettings" component={AccountSettings} />
            </Tab.Navigator>
        >

Hi @daileytj Did you get a chance to look into this ?

Hi @swati-eaton We are currently looking at this issue. We will update you soon.

[bkarambe]

Hi @swati-eaton ,
You correctly identified the header did not support custom children e.g. tabs. We are fixing this and we have a PR for that enhancement. That update should get published this week. This will allow you to put things like tabs into the Header itself so it won't scroll behind the header.

However, the main issue you are seeing is caused by react-navigation/material-top-tabs which uses react-native-tab-view.

This view does not work when it is placed inside of a Scrollview (like the body of the CollapsibleHeaderLayout) or some other containers — refer to react-navigation/react-navigation#10361. And when putting it in the Header, it tries to render both the tabs and the pages in the Header, which is not desirable.

You'll probably need to tackle this from a more custom approach in order to separate the Tabs from the content (as you are trying to do in your design). You may be able to do this by treating the tabs as separate routes in a Stack Navigator, or manually implementing the paging with something like react-native-pager-view within the CollapsibleHeaderLayout body.