My app’s bottom tabs work fine using classic build service. But it becomes only one image appearing to all the other tabs which it shouldn’t after I switch to eas build.
This situation didn’t appear on iOS or development build but only android’s preview and production build. And I can’t find any solution right now, please help.
Here’s my screenOptions of Tab.Navigator:
screenOptions={({route}) => ({
tabBarIcon: ({focused}) => {
let iconPath;
if (route.name === 'Home') {
iconPath = focused ? require('../HomeNavigator/icon/tabIcon/大盤指數-blue.png'): require('../HomeNavigator/icon/tabIcon/大盤指數-gray.png');
}
if (route.name === 'Market') {
iconPath = focused ? require('../HomeNavigator/icon/tabIcon/市場資訊-blue.png'): require('../HomeNavigator/icon/tabIcon/市場資訊-gray.png');
}
if (route.name === 'Stock'){
iconPath = focused ? require('../HomeNavigator/icon/tabIcon/個股資訊-blue.png'): require('../HomeNavigator/icon/tabIcon/個股資訊-gray.png');
}
if (route.name === 'Calendar'){
iconPath = focused ? require('../HomeNavigator/icon/tabIcon/行事曆-blue.png'): require('../HomeNavigator/icon/tabIcon/行事曆-gray.png');
}
if (route.name === 'MyStock'){
iconPath = focused ? require('../HomeNavigator/icon/tabIcon/我的個股-blue.png'): require('../HomeNavigator/icon/tabIcon/我的個股-gray.png');
}
if (route.name === 'MENU'){
return ''
}
return <Image
source={iconPath}
fadeDuration={0}
style={{
resizeMode:'contain',
height:'55%',
marginTop: 'auto',
marginBottom: 'auto'
}}
/>;
},
})}
You can see tab icons repeating only one image below: