SDK 31 react-navigation BottomTabNavigator with react-native-svg Icons Not Working

I use react-native-svg to create icons throughout my app including for tab navigators. Everything was working fine until I updated 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>
    )
  }
}

post example to snack.expo.io please!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.