React-native-navigation: [V2] Toptabs are not showing up, regression in newest version of RNN
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
ghost
All 27 comments
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
on 23 Dec 2018
@guyca Any suggestions would be great i am migrating from v1 to v2 and this is crucial for me mate
ibrahimahmed-io
on 24 Dec 2018
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.
ibrahimahmed-io
on 3 Jan 2019
Hey there, I'll look into this issue asap.
guyca
on 3 Jan 2019
is there also a plan to add topTabs for iOS? @guyca
ManAnRuck
on 4 Jan 2019
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!
shub-singh-mail
on 22 Jan 2019
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 https://github.com/wix/react-native-navigation/issues/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
jmcartlamy
on 24 Jan 2019
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
hufkens
on 20 Feb 2019
@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?
berkedel
on 4 Mar 2019
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
codoffer
on 19 Mar 2019
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[bot] picture](https://avatars.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 18 Apr 2019
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.
8BallBomBom
on 24 Apr 2019
Is this issue resolved? If yes, is there any documentation that I can follow to setup top tabs within bottom tab navigation?
animeshchat
on 26 Apr 2019
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
}
}
}
}
]
}
}
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"
}
}
}
}
]
}
}
]
}
}
});
syedabuthahirm
on 5 May 2019
This is still not working for me
muhammadsr
on 18 May 2019
Did you checked with current version of RNN 2.19.0 and RN 0.59.8?
syedabuthahirm
on 18 May 2019
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[bot]
on 17 Jun 2019
The issue has been closed for inactivity.
stale[bot]
on 24 Jun 2019
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.
Findiglay
on 23 Jul 2019
+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
on 25 Jul 2019
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
on 25 Jul 2019
any way to disable horizontal scrolling between tabs?
hariDasu
on 29 Jul 2019
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?
clamiax
on 13 Jan 2020
+1
mrarlloyd
on 23 Mar 2020
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!
rat-moonshine
on 29 Apr 2020
Can we have Tabs? Can't apply them for iOS :( Do you have some instructions?
ifier
on 3 Aug 2020
Related issues
SudoPlz
路
31Comments
fuatsengul
路
40Comments
gtchance
路
57Comments
sinevitch
路
49Comments
Stalder
路
35Comments
Most helpful comment
Hey there, I'll look into this issue asap.