BottomNavigation in react native
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
react-native bottomnavigationview
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
|
show 7 more comments
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
react-native bottomnavigationview
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26
|
show 7 more comments
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
react-native bottomnavigationview
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
I create a bottom navigation in my react native project. But its not looking good in Iphone10.
It showing extra space in bottom.Please help me how to resolve this.
This is below code i tried.
import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation'
<BottomNavigation
onTabPress={newTab => this.clickoftab(newTab.key)}
renderTab={this.renderTab}
tabs={this.tabs}
/>
My render tab part is this
renderTab = ({ tab, isActive }) => {
return (
<FullTab
style={{padding:0,margin:0}}
key={tab.key}
isActive={isActive}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
}
This is my output which i want to change in bottom navigation
react-native bottomnavigationview
react-native bottomnavigationview
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
edited Nov 16 '18 at 6:24
Saurabh Mistry
4,19511030
4,19511030
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
asked Nov 16 '18 at 5:39
Mayur CoceptioniMayur Coceptioni
207
207
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26
|
show 7 more comments
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26
|
show 7 more comments
1 Answer
1
active
oldest
votes
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
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%2f53332058%2fbottomnavigation-in-react-native%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
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
add a comment |
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
add a comment |
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
Depending of your architecture app, if like you say in the comments, if you use SafeAreaView I thought in create the BottomNavigation at the same level of the SafeAreaView. I mean (sorry my english), I suppose that you have the SafeAreaView in your "Father file" like App.js. So, at the same time you can manage the BottomNavigation from there. So, you could put SafeAreaView inside of BottomNavigation making BottomNavigation the father of your app I guess. I don't know if I am explaining well. The conclusion could be that
just apply SafeArea To things that are inside of Navigation instead of
full application.
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
answered Nov 16 '18 at 9:19
Mtg Kha JeskaiMtg Kha Jeskai
7251725
7251725
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
add a comment |
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Safeareaview will work in individual componet ?
– Mayur Coceptioni
Nov 16 '18 at 9:21
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
Yes it does. I used it first component by component like a dumb haha, then I ported to the whole application.
– Mtg Kha Jeskai
Nov 16 '18 at 9:25
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
As I understand, SafeAreaView is like a protection for each component that is inside if itself to the overflow of iPhone 10
– Mtg Kha Jeskai
Nov 16 '18 at 9:28
1
1
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
okay thakyou for your reply, let me try this
– Mayur Coceptioni
Nov 16 '18 at 9:31
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%2f53332058%2fbottomnavigation-in-react-native%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
Have you tried adding padding and margin 0 in your renderTab function
– Ammar Tariq
Nov 16 '18 at 6:01
I have edit my render tab part as per your suggestion but still its not working @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:23
@Suarabh Mistry Thank you for your edit
– Mayur Coceptioni
Nov 16 '18 at 6:25
Are you rendering your app in safe area view?
– Ammar Tariq
Nov 16 '18 at 6:25
yes i am rendering safe area view @Ammar Tariq
– Mayur Coceptioni
Nov 16 '18 at 6:26