React native navigation wix push screen problem

Question

i have a created a tab based navigation with WIX and each time i am trying to push a screen from any screen of the tabs it doesn't do anything but , when i try to push from the first tab it works but any other tab i can't push from it

Promise.all(iconTabs).then(sources => { // after the promises end
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    children: [{
                        stack: {
                            children: [{
                                component: { // 1
                                    name: screenNames['listInvoice'].name,
                                }
                            }],
                            options: {
                                bottomTab: {
                                    text: screenNames['listInvoice'].title,
                                    icon: sources[0],
                                    selectedIconColor: DEFAULT_COLOR,
                                },
                                topBar: getTopBar()
                            }
                        }
                    },
                        {
                            component: { // 2
                                name: screenNames['listReceipt'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listReceipt'].title,
                                        icon: sources[1],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listCustomer'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listCustomer'].title,
                                        icon: sources[2],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listInvoiceItem'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listInvoiceItem'].title,
                                        icon: sources[3],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()

                                }
                            } ,
                        },
                        {
                            component: { // 2
                                name: screenNames['listSupplier'].name,
                                options: {
                                    bottomTab: {
                                        text:  screenNames['listSupplier'].title,
                                        icon: sources[4],
                                        selectedIconColor: DEFAULT_COLOR,

                                    },
                                    topBar: getTopBar()
                                }
                            } ,
                        },
                    ]
                }
            }
        });
    });
                                                    -->

Navigation.push(currentScreen, {
            component: {
                name: screenName,
                options: {
                    topBar: getTopBar(),
                    bottomTabs: {
                        visible: false,
                        drawBehind: true
                    }
                }
            }
        });

-->

Environment

• React Native Navigation version: the latest one react-native-cli: 2.0.1 react-native: 0.58.4
• Platform(s)Android

Answer 1

I had the same issue. You have to initiate the other tabs a stack layout as well. Like:

   bottomTabs: {
      children: [
        ........
        {
          stack: {
            children: [
              { 
                component: { screenNames['listReceipt'].name }
              }
            ]
          }
        },
       {
          stack: {
            children: [
              { 
                component: { screenNames['listCustomer'].name }
              }
            ]
          }
        }
      ]
    }

See also here: https://github.com/wix/react-native-navigation/issues/4786#issuecomment-467648825