2

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>
    )
  }
}

4

0 回答 0