I find why this component cannot be nested

[zjhsd2007]

the reason is ViewPagerAndroid!!!
see this test code:

'use strict';
import React,{
    Component,
    View,
    Text,
    ViewPagerAndroid
} from 'react-native';

export default class TestCpt extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <ViewPagerAndroid
                initialPage={1}
                style={{flex:1}}
            >
                <View>
                    <ViewPagerAndroid
                        initialPage={1}
                        style={{flex:1}}
                    >
                        <View><Text>page1-1</Text></View>
                        <View><Text>page1-2</Text></View>
                        <View><Text>page1-3</Text></View>
                    </ViewPagerAndroid>
                </View>
                <View>
                    <ViewPagerAndroid
                        style={{flex:1}}
                    >
                        <View><Text>page2-1</Text></View>
                        <View><Text>page2-2</Text></View>
                        <View><Text>page2-3</Text></View>
                    </ViewPagerAndroid>
                </View>
                <View>
                    <ViewPagerAndroid
                        style={{flex:1}}
                    >
                        <View><Text>page3-1</Text></View>
                        <View><Text>page3-2</Text></View>
                        <View><Text>page3-3</Text></View>
                    </ViewPagerAndroid>
                </View>
            </ViewPagerAndroid>
        )
    }
}

In this test, the inital page(page2-1) can not display,need rota device. the react-native-scrollable-tab-view can not nested is this reason

[skv-headless]

There are few issues for that like #187.

[GelaniNijraj]

So, is there no workaround this issue? Using ScrollableTabView inside a View?

[happyming9527]

same issue, can anybody help?

[skv-headless]

A lot of people asking about this. I'm just curious how your ui looks like?

[maikokuppe]

My UI consists of one primary TabBar and each tab has an optional secondary TabBar. That's simply a nested tab navigation.
This mostly works out of the box, but the initial tab's scrollable content (either on app start or after changing to another primary tab) is not displayed until the user switches to another secondary tab and back to this one.
For the last days I tried to come up with something, but the best I could do by now is a hack, which quickly switches to the (secondary) tab -1 and back, which loads the scrollable content properly:

componentDidMount() {
    if (!this.primaryTabView) {
      this.goToPage(-1);
      setTimeout(() => this.goToPage(0), 0);
    }
},

I think I'm going to work with this. If you are interested in such a hacky PR, which optionally enables this hack, i'll prepare one :)

[skv-headless]

Could please make a screenshot? It will help me a lot.

[maikokuppe]

Now it is like this after starting the app or after switching to primary tab 'Custom'

After the hack it looks like this

Edit: My secondary tabs look weird because i made them scrollable. But thats not the cause of the issue (I tested it with default tabs)

[btconfig]

same problem. can you resolve it, @skv-headless ?

[skv-headless]

https://material.google.com/components/tabs.html#tabs-usage
quote from there
Tabs should not be nested.

[maikokuppe]

Well, that seems to be a list of conventions for material design, which is probably wide-spread. Still, there might be cases where material design is not desired/necessary.
I think this is a reason for allowing nested tabs, though it is understandable if you are not willing to put your time in a feature not matching general conventions, while there are probably many other (maybe more important) issues to handle.

PS: We intentionally break the material design conventions

[chromonav]

seems to solved
working for me

[summersky92]

@maikokuppe same issue as you as a nested tab not initialised, after see this discuss, i try not to have nested tabs through placing a button on top to change state then update the tab list below, but seems same issue of cannot initialised after i update the existing tab.....so could you tell me more about this hack... the this.goToPage(-1) should be put to which part...Thx

update： Seems adding a reference to the tab view then the hack works.Thx

[mataoct]

@maikokuppe is right, but in last version
the code should be

      this.props.goToPage(-1);
      setTimeout(() => this.props.goToPage(0), 0);

[aljux]

@maikokuppe how have you defined goToPage? I'm have the problem with the first view not being rendered.