Expo SDK 31 react-navigation BottomTabNavigator with react-native-svg Icons Not Working2019 Community Moderator ElectionWhat is the difference between React Native and React?Navigation iOS in React NativeReact-native: How to get navigationOptions with Custom TabBarComponentA Custom Tab bar with two images in each tab using react navigation?How to push a new scene using react-navigation?react native tab navigator toggle button snipples?react native tabbar not hide for specific screenDetect active screen in React NativeReact Native this.props.navigation.navigate is not working when using it in createBottomTabNavigatorBottom tab bar not showing icons
How old is Nick Fury?
pipe commands inside find -exec?
Air travel with refrigerated insulin
Logic with "co-relations" - sources?
Do native speakers use "ultima" and "proxima" frequently in spoken English?
Why is "la Gestapo" feminine?
Is a square zero matrix positive semidefinite?
What will the Frenchman say?
Norwegian Refugee travel document
Would mining huge amounts of resources on the Moon change its orbit?
Why is this tree refusing to shed its dead leaves?
Do people actually use the word "kaputt" in conversation?
Nested Dynamic SOQL Query
Why is participating in the European Parliamentary elections used as a threat?
Why doesn't the fusion process of the sun speed up?
Why didn’t Eve recognize the little cockroach as a living organism?
How to balance a monster modification (zombie)?
Have any astronauts/cosmonauts died in space?
Turning a hard to access nut?
Weird lines in Microsoft Word
Did Nintendo change its mind about 68000 SNES?
Are hand made posters acceptable in Academia?
Friend wants my recommendation but I don't want to
CLI: Get information Ubuntu releases
Expo SDK 31 react-navigation BottomTabNavigator with react-native-svg Icons Not Working
2019 Community Moderator ElectionWhat is the difference between React Native and React?Navigation iOS in React NativeReact-native: How to get navigationOptions with Custom TabBarComponentA Custom Tab bar with two images in each tab using react navigation?How to push a new scene using react-navigation?react native tab navigator toggle button snipples?react native tabbar not hide for specific screenDetect active screen in React NativeReact Native this.props.navigation.navigate is not working when using it in createBottomTabNavigatorBottom tab bar not showing icons
I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated Expo SDK 30 to SDK 31 (same issue persists into SDK 32).
It seems that the last tab's icon is overlapping the others, preventing the user from navigating to any tab but the last. A very precise tap on the bottom or top edge of each icon triggers the expected navigation behavior, but it seems that 99% of the tab area is being covered by the last tab icon.
Navigator:
// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)Icon (all follow same pattern):
import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
javascript react-native react-navigation expo react-native-svg
asked Mar 7 at 18:29
jack krusojack kruso
61
add a comment |
I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated Expo SDK 30 to SDK 31 (same issue persists into SDK 32).
It seems that the last tab's icon is overlapping the others, preventing the user from navigating to any tab but the last. A very precise tap on the bottom or top edge of each icon triggers the expected navigation behavior, but it seems that 99% of the tab area is being covered by the last tab icon.
Navigator:
// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)Icon (all follow same pattern):
import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
javascript react-native react-navigation expo react-native-svg
asked Mar 7 at 18:29
jack krusojack kruso
61
add a comment |
I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated Expo SDK 30 to SDK 31 (same issue persists into SDK 32).
It seems that the last tab's icon is overlapping the others, preventing the user from navigating to any tab but the last. A very precise tap on the bottom or top edge of each icon triggers the expected navigation behavior, but it seems that 99% of the tab area is being covered by the last tab icon.
Navigator:
// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)Icon (all follow same pattern):
import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
javascript react-native react-navigation expo react-native-svg
asked Mar 7 at 18:29
jack krusojack kruso
61
I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated Expo SDK 30 to SDK 31 (same issue persists into SDK 32).
It seems that the last tab's icon is overlapping the others, preventing the user from navigating to any tab but the last. A very precise tap on the bottom or top edge of each icon triggers the expected navigation behavior, but it seems that 99% of the tab area is being covered by the last tab icon.
Navigator:
// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)Icon (all follow same pattern):
import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)// imports
const AppNavigator = createStackNavigator(
AppTab:
screen: createBottomTabNavigator(
ScreenOne:
screen: ScreenOne,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenOneIcon stroke=tintColor fill=tintColor />
,
ScreenTwo:
screen: ScreenTwo,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenTwoIcon stroke=tintColor fill=tintColor />
,
ScreenThree:
screen: ScreenThree,
navigationOptions:
tabBarIcon: ( tintColor ) => <ScreenThreeIcon stroke=tintColor fill=tintColor />
,
,
initialRouteName: 'ScreenOne',
headerMode: 'none',
tabBarOptions:
showLabel: false,
activeTintColor: colors.blue,
inactiveTintColor: colors.gray0,
style: backgroundColor: colors.gray2,
)
,
// other navigators
,
initialRouteName: 'AppTab',
headerMode: 'none'
)
export default createAppContainer(AppNavigator)import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
import React from 'react'
import Svg,G, Path from 'react-native-svg'
export default class Icon extends React.Component
render()
return(
<Svg viewBox='0 0 1000 1000' height='100%' width='100%'>
<G fill=this.props.fill stroke=this.props.stroke strokeWidth=25>
<Path d="" />
<Path d="" />
</G>
</Svg>
)
javascript react-native react-navigation expo react-native-svg
javascript react-native react-navigation expo react-native-svg
asked Mar 7 at 18:29
jack krusojack kruso
61
asked Mar 7 at 18:29
jack krusojack kruso
61
asked Mar 7 at 18:29
jack krusojack kruso
61
asked Mar 7 at 18:29
jack krusojack kruso
61
asked Mar 7 at 18:29
jack krusojack kruso
61
61
add a comment |
add a comment |
0
active
oldest
votes
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%2f55050565%2fexpo-sdk-31-react-navigation-bottomtabnavigator-with-react-native-svg-icons-not%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f55050565%2fexpo-sdk-31-react-navigation-bottomtabnavigator-with-react-native-svg-icons-not%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
