[V2] Toptabs are not showing up, regression in newest version of RNN

[ghost]

Issue Description

There has been a regression in Top Tabs Navigation for React-Native-Navigation. After version 2.0.2459 topTabs will no longer appear.

I am currently using the code below with version 2.2.5, however, that code allows me to swipe right and left and the app will transition screens BUT tabs themselves will not appear.

If I downgrade to 2.0.2459 again, the top tabs once again appear.

Steps to Reproduce / Code Snippets / Screenshots

        stack: {
          id: 'mainStack',
          children: [
            {
              topTabs: {
                children: [
                  {
                    component: {
                      name: 'Screen1',
                      options: {
                        topTab: {
                          title: 'Tab 1',
                        },
                      },
                    },
                  },
                  {
                    component: {
                      name: 'Screen2',
                      options: {
                        topTab: {
                          title: 'Tab 2',
                        },
                      },
                    },
                  },
                ],
              },
            },

Environment

• React Native Navigation version: 2.2.5
• React Native version: 0.55.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device

[ibrahimahmed-io]

I am also facing this issue with "react-native-navigation": "^2.3.0"

Navigation.push('insp-req', { stack: { id: 'insp-req-info-stack', children: [{ topTabs: { currentTabIndex: 0, currentTabId: 'insp-req-info', children: [{ component: { id: 'insp-req-info', name: 'InspectionRequestDocumentInfo', options: { topTab: { title: 'Info' }, topBar: { title: { text: 'Details' } } }, passProps: { id: id, projectId: projectId } } }, { component: { id: 'insp-req-workflow', name: 'InspectionRequestDocumentWorkflow', options: { topTab: { title: 'Workflow' }, topBar: { title: { text: 'Details' } } }, passProps: { id: id, projectId: projectId } } }, { component: { id: 'insp-req-attachments', name: 'InspectionRequestDocumentAttachments', options: { topTab: { title: 'Attachments' }, topBar: { title: { text: 'Details' } }, fab: { id: "attach", backgroundColor: "#9F854F", hideOnScroll: true, icon: images.add } }, passProps: { id: id, projectId: projectId } } }], options: { topTabs: { unselectedTabColor: '#FFF', selectedTabColor: '#333', fontSize: 6 } } } }] } });

[ibrahimahmed-io]

@guyca Any suggestions would be great i am migrating from v1 to v2 and this is crucial for me mate

[ibrahimahmed-io]

Hi i appreciate you guys being really busy and taking out of your time to respond but i have a project that's already on play store and there is a critical update that i need to push and this issue is a real road block for me. I would just appreciate if you just point me to what might be causing the issue and i will try to patch it my self until you make a proper fix in your next update.

[guyca]

Hey there, I'll look into this issue asap.

[ManAnRuck]

is there also a plan to add topTabs for iOS? @guyca

[shub-singh-mail]

I can't get topTabs to work in Android or IOS !!
In Android, I can't see the tabs but they scroll and in IOS, app crashes after few minutes!

[jmcartlamy]

I tried to downgrade to [email protected] as @the-friyia, and the top tabs still does not appear. Maybe it's because of my react-native version.

However, if you see #4357, there is a workaround to get topTabs working on Android:

-        topBar.setHeight(options.height.get(UiUtils.getTopBarHeightDp(activity)));
+        topBar.setHeight(options.height.get(LayoutParams.WRAP_CONTENT));

line 169 in the file lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackPresenter.java

[hufkens]

I just started a new project and I also can't see the topTabs on Android and on iOS it crashes. Any idea how to solve this? I can't downgrade, and we really need the topBar and bottomBar for Android/iOS.

@jmcartlamy I tried your workaround, but it didn't work for me. I'm on RN 0.58.0 and react-native-navigation 2.12.0

[berkedel]

@jmcartlamy I tried your solution and it worked. The remaining problem is when I invoke Navigation.push(..) to go to another screen, the app do nothing. Any solution on this?

[codoffer]

It is buggy and not working anymore. There is no proper documentation for this. I am getting same result and crashing on click. I want to use topTab with sideMenu.

react : 16.6.3
react-native : 0.58.5
react-native-navigation : ^2.12.0

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[8BallBomBom]

Seems even with the latest version, the top tabs don't show properly.
You can set a height of like 100 on the top bar which then makes the tabs show.
But then you still have another issue which is not being able to style the top tabs or at least i haven't been able to find a way to style them.

[animeshchat]

Is this issue resolved? If yes, is there any documentation that I can follow to setup top tabs within bottom tab navigation?

[animeshchat]

I got topTabs working within one of the screens of bottomTabs. Note that the topBar needs to be given a height of 100.

"react": "^16.8.6",
"react-native": "^0.59.5",
"react-native-navigation": "^2.17.0",

Issues -

1. Custom Styling
2. Dynamically adding tabs
3. Content on the tabs seems to be jumping. Not sure why yet.
4. Not able to scroll all the way down to the bottom of the view
5. If there are more tabs, horizontal scroll should be available
6. Top Bar should collapse on scroll with tabs sticking to the top

root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          stack: { // Each `tab` must be in a separate stack
            children: [
              {
                topTabs: {
                  children: [
                    {
                      component: {
                        id: 'Home',
                        name: 'app.HomeScreen',
                        options: {
                          topTab: {
                            title: 'Tab 1',
                          },
                        },
                      },
                    },
                    {
                      component: {
                        id: 'Home2',
                        name: 'app.SettingsScreen',
                        options: {
                          topTab: {
                            title: 'Tab 2',
                          },
                        },
                      },
                    },
                  ],
                },
              },
            ],
            options: {
              topBar: {
                title: {
                  text: 'Home',
                },
                height: 100,
              },
              bottomTab: {
                text: 'Home',
                fontSize: 12,
                icon: homeIcon 
              }
            }
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  id: 'Profile',
                  name: 'app.ProfileScreen',
                  options: {
                    topBar: {
                      title: {
                        text: 'Profile'
                      },
                      rightButtons: [
                        {
                          id: 'Settings',
                          icon: settingsIcon,
                          color: 'black'
                        }
                      ]
                    }
                  }
                }
              }
            ],
            options: {
              bottomTab: {
                text: 'Profile',
                fontSize: 12,
                icon: profileIcon
              }
            }
          }
        }
      ]  
    }
  }

[syedabuthahirm]

If you want stack topTabs try this one

  Navigation.setRoot({
    root: {
      stack: {
        options: {
          topBar: {
            title: {
              text: "Message",
              fontSize: 22
            },
            height: 100,
            backgroundColor: 'green'
          },
          topTabs: {
            selectedTabColor: "#12766b",
            unselectedTabColor: "red",
            fontSize: 6,
          }
        },
        children: [
          {
            topTabs: {
              children: [
                {
                  component: {
                    name: "SCREENS.CHATS",
                    options: {
                      topTab: {
                        title: "CHATS"
                      }
                    }
                  }
                },
                {
                  component: {
                    name: "SCREENS.STATUS",
                    options: {
                      topTab: {
                        title: "STATUS"
                      }
                    }
                  }
                },
                {
                  component: {
                    name: "SCREENS.CALLS",
                    options: {
                      topTab: {
                        title: "CALLS"
                      }
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    }
  });

[muhammadsr]

This is still not working for me

[syedabuthahirm]

Did you checked with current version of RNN 2.19.0 and RN 0.59.8?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale]

The issue has been closed for inactivity.

[Findiglay]

Can anyone tell me what is the current status of topTabs in this project? Following the examples provided here haven't been able to get them to work and there is little mention of the feature in the documentation. The comment referenced above from the v3 MR suggests the topTabs should still be working, beyond some deprecated features.

[hariDasu]

+1 badly need documentation for this. @syedabuthahirm code works, but I do not want to setRoot in my app, I want to create tabs dynamically for a particular screen within a navigation stack embedded in one tab of the parent tab bar controller

[hariDasu]

Navigation.push(componentId, {
      topTabs: {
        children: [
          {
            component: {
              name: "Buildings",
              options: {
                topTab: {
                  title: "Buildings"
                }
              }
            }
          },
          {
            component: {
              name: "Documents",
              options: {
                topTab: {
                  title: "DOCS"
                }
              }
            }
          },
          {
            component: {
              name: "Items",
              options: {
                topTab: {
                  title: "ITEMS"
                }
              }
            }
          }
        ]
      }

if you want to push a nested TopTab set of components (screens) within a bottom tab view

[hariDasu]

any way to disable horizontal scrolling between tabs?

[bitsmanent]

Just want to point out that issue is still there with RNN 4.3.0 (RN 0.61.5). None of the suggested workaround works and in the best case I can swipe screen sideways but the tab names never appears.

For instance this is what I do:

const tabs  = [
        {id:"t1",name:"Tab 1",com:"Screen1",icon:require("./my-icon.png")},
        {id:"t2",name:"Tab 2",com:"Screen2",icon:require("./my-icon.png")},
];

Navigation.setRoot({root:{
        topTabs: {
                children: tabs.map(t => {
                        return {
                                stack: {
                                        children: [{
                                                component: {
                                                        id: t.id,
                                                        name: t.com,
                                                        options: {
                                                                topTab: {
                                                                        text: t.name,
                                                                        icon: t.icon
                                                                }
                                                        }
                                                }
                                        }]
                                }
                        }
                })
        },
}});

I only checked on Android, not sure about iOS.

EDIT: Do developers takes into account this issue or since it's closed I better open a new one?

[mrarlloyd]

+1

[rat-moonshine]

RNN can you please land with some fix on this? Toptabs is all broken! Or if it is not, please suggest how to use it on stack.

R: 16.11.0
RN: 0.62.2
RNN: 6.4.0

I tried to follow this, but no TopBar, no top-tabs. Tested on iOS.

Thanks!

[ifier]

Can we have Tabs? Can't apply them for iOS :( Do you have some instructions?