How to remove tabbar from the top when I am navigating to another page from one of the tab in react native
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Everyone I am facing an issue in react-native as I am new to this .
I am callling a tabbpage from homePage
so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.
This is good till now but the problem starts from here
In tabPage I have two tabs ->tab1 and tab2
from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.
I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.
I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution
NOTE->I have tried using
navigationOptions: {
tabBar: ({ state }) => ({
visible: false
})
but its not doing anything Please help
class TabPage extends React.Component{
state = {
index: 0,
routes: [
{ key: 'Stopagess', title: 'Stopages' },
{ key: 'MapStopagess', title: 'Maps' },
],
};
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
Stopagess: Stopages,
MapStopagess: MapStopages,
})
}
renderTabBar={props =>
<TabBar
{...props}
style = {{backgroundColor:'#3f51b5'}}
indicatorStyle={{ color: 'pink' }}
/>
}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
This is my Stopages class
class Stopages extends Component {
render()
{
return (
<StopageDetail/>
)
}
}
const StopageDetail = createStackNavigator({
Stp:{
screen: Stpforsomeissue,
navigationOptions: () => ({
header:null,
tabBarVisible: false,
}),
},
NextDetailStopage:{
screen :StopageDetailOfStudents,
navigationOptions: ({ navigation, screenProps }) => ({
title: 'Stopages Detail',
// tabBarVisible: navigation.state.params=false,
headerStyle: { backgroundColor: '#ffd600'},
/>,
})
}
})
react-native stack-navigator react-native-tab-view
add a comment |
Everyone I am facing an issue in react-native as I am new to this .
I am callling a tabbpage from homePage
so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.
This is good till now but the problem starts from here
In tabPage I have two tabs ->tab1 and tab2
from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.
I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.
I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution
NOTE->I have tried using
navigationOptions: {
tabBar: ({ state }) => ({
visible: false
})
but its not doing anything Please help
class TabPage extends React.Component{
state = {
index: 0,
routes: [
{ key: 'Stopagess', title: 'Stopages' },
{ key: 'MapStopagess', title: 'Maps' },
],
};
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
Stopagess: Stopages,
MapStopagess: MapStopages,
})
}
renderTabBar={props =>
<TabBar
{...props}
style = {{backgroundColor:'#3f51b5'}}
indicatorStyle={{ color: 'pink' }}
/>
}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
This is my Stopages class
class Stopages extends Component {
render()
{
return (
<StopageDetail/>
)
}
}
const StopageDetail = createStackNavigator({
Stp:{
screen: Stpforsomeissue,
navigationOptions: () => ({
header:null,
tabBarVisible: false,
}),
},
NextDetailStopage:{
screen :StopageDetailOfStudents,
navigationOptions: ({ navigation, screenProps }) => ({
title: 'Stopages Detail',
// tabBarVisible: navigation.state.params=false,
headerStyle: { backgroundColor: '#ffd600'},
/>,
})
}
})
react-native stack-navigator react-native-tab-view
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40
add a comment |
Everyone I am facing an issue in react-native as I am new to this .
I am callling a tabbpage from homePage
so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.
This is good till now but the problem starts from here
In tabPage I have two tabs ->tab1 and tab2
from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.
I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.
I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution
NOTE->I have tried using
navigationOptions: {
tabBar: ({ state }) => ({
visible: false
})
but its not doing anything Please help
class TabPage extends React.Component{
state = {
index: 0,
routes: [
{ key: 'Stopagess', title: 'Stopages' },
{ key: 'MapStopagess', title: 'Maps' },
],
};
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
Stopagess: Stopages,
MapStopagess: MapStopages,
})
}
renderTabBar={props =>
<TabBar
{...props}
style = {{backgroundColor:'#3f51b5'}}
indicatorStyle={{ color: 'pink' }}
/>
}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
This is my Stopages class
class Stopages extends Component {
render()
{
return (
<StopageDetail/>
)
}
}
const StopageDetail = createStackNavigator({
Stp:{
screen: Stpforsomeissue,
navigationOptions: () => ({
header:null,
tabBarVisible: false,
}),
},
NextDetailStopage:{
screen :StopageDetailOfStudents,
navigationOptions: ({ navigation, screenProps }) => ({
title: 'Stopages Detail',
// tabBarVisible: navigation.state.params=false,
headerStyle: { backgroundColor: '#ffd600'},
/>,
})
}
})
react-native stack-navigator react-native-tab-view
Everyone I am facing an issue in react-native as I am new to this .
I am callling a tabbpage from homePage
so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.
This is good till now but the problem starts from here
In tabPage I have two tabs ->tab1 and tab2
from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.
I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.
I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution
NOTE->I have tried using
navigationOptions: {
tabBar: ({ state }) => ({
visible: false
})
but its not doing anything Please help
class TabPage extends React.Component{
state = {
index: 0,
routes: [
{ key: 'Stopagess', title: 'Stopages' },
{ key: 'MapStopagess', title: 'Maps' },
],
};
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
Stopagess: Stopages,
MapStopagess: MapStopages,
})
}
renderTabBar={props =>
<TabBar
{...props}
style = {{backgroundColor:'#3f51b5'}}
indicatorStyle={{ color: 'pink' }}
/>
}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
This is my Stopages class
class Stopages extends Component {
render()
{
return (
<StopageDetail/>
)
}
}
const StopageDetail = createStackNavigator({
Stp:{
screen: Stpforsomeissue,
navigationOptions: () => ({
header:null,
tabBarVisible: false,
}),
},
NextDetailStopage:{
screen :StopageDetailOfStudents,
navigationOptions: ({ navigation, screenProps }) => ({
title: 'Stopages Detail',
// tabBarVisible: navigation.state.params=false,
headerStyle: { backgroundColor: '#ffd600'},
/>,
})
}
})
react-native stack-navigator react-native-tab-view
react-native stack-navigator react-native-tab-view
edited Nov 26 '18 at 5:18
kriti sharma
asked Nov 24 '18 at 6:19
kriti sharmakriti sharma
319
319
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40
add a comment |
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40
add a comment |
1 Answer
1
active
oldest
votes
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages
and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail
. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455703%2fhow-to-remove-tabbar-from-the-top-when-i-am-navigating-to-another-page-from-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages
and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail
. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
add a comment |
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages
and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail
. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
add a comment |
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages
and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail
. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages
and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail
. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
answered Nov 24 '18 at 13:48
Suraj MalviyaSuraj Malviya
1,110516
1,110516
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
add a comment |
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
No I am not using createMaterialTopNavigator instead I am using TabView.I am posting my tab code.Please check my edited code
– kriti sharma
Nov 26 '18 at 3:56
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
navigationOptions: {header: null} its not working .Still stucked
– kriti sharma
Nov 26 '18 at 5:20
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455703%2fhow-to-remove-tabbar-from-the-top-when-i-am-navigating-to-another-page-from-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you post the code of your stacknavigator please
– kivul
Nov 24 '18 at 10:25
I have posted the updated code please help
– kriti sharma
Nov 26 '18 at 5:20
instead of 'header:null', change it to headerMode: 'none'
– kivul
Nov 26 '18 at 8:47
Not working ....if uisng in NextDetailStopage then removing the last navbar and if using in Stp then showing no changes.I just want that in StopageDetailPage there should be only one navbar and remove all the topbars as shown in the picture
– kriti sharma
Nov 26 '18 at 9:40