Bottom Tab Bar styling not working on first time app launch - react-native

Question

The issue is that the icons and text on the bottom nav bar don't high light (change to blue) when selected but only on initial app launch after install. Testing on Android simulator. Everything works after the second launch. It has something to do with focused not toggling or detected on first launch.
The Nav setup is fairly complex so I'll boil it down to the essential components:
MainNavigator:
const tabConfig = {
tabBarOptions: {
activeTintColor: Colors.APP_BLUE_CONTRAST,
showLabel: true,
},
tabBarComponent: TabBar,
}
const getInitialRoute = (isLoggedIn, isOnboarded) => {
if (isLoggedIn && !isOnboarded) {
return 'OnboardingScreen'
}
return isLoggedIn ? 'MainTabContainer' : 'LoginScreen'
}
const forFade = ({ current }) => {
const translateX = 0
const translateY = 0
return {
cardStyle: {
opacity: current.progress,
transform: [{ translateX }, { translateY }],
},
}
}
const getFilteredTabs = (tabs, screenProps) => {
const filteredTabs = Object.keys(tabs)
.filter((key) => {
if (key === 'Meditate' && !screenProps?.hasMeditate) {
return false
}
if (key === 'Sleep' && !screenProps?.hasSleep) {
return false
}
if (key === 'Move' && !screenProps?.hasMove) {
return false
}
if (key === 'Foundational' && !screenProps?.hasFoundational) {
return false
}
if (key === 'SEL' && !screenProps?.hasSEL) {
return false
}
if (key === 'Parent' && !screenProps?.hasParent) {
return false
}
if (key === 'Professional' && !screenProps?.hasProfessional) {
return false
}
if (key === 'Personal' && !screenProps?.hasPersonal) {
return false
}
return true
})
.reduce((tab, key) => {
const updatedTab = { ...tab }
updatedTab[key] = tabs[key]
return updatedTab
}, {})
return filteredTabs
}
const MainNavigator = (isLoggedIn, isOnboarded, accountScreenProps) => {
let MainTabContainer = null
if (accountScreenProps) {
const filteredTabs = getFilteredTabs(tabScreens, accountScreenProps)
MainTabContainer = createBottomTabNavigator(filteredTabs, tabConfig)
} else {
MainTabContainer = createBottomTabNavigator(tabScreens, tabConfig)
}
return createStackNavigator(
{
MainTabContainer: {
screen: MainTabContainer,
navigationOptions: {
gestureEnabled: false,
cardStyleInterpolator: forFade,
},
},
// ...and all the rest of the screens
and the TabScreens setup:
const styles = StyleSheet.create({
icon: {
height: 23,
width: 23,
resizeMode: 'contain',
},
tabContainer: {
height: tabBarHeight,
paddingVertical: 5,
},
label: {
fontFamily: regularFont,
fontSize: 13,
color: '#8C8D91',
textAlign: 'center',
},
ipadContainer: {
marginLeft: 20,
},
labelFocused: {
fontFamily: regularFont,
fontSize: 13,
color: colors.blueContrast,
textAlign: 'center',
},
})
const HomeTab = createStackNavigator(
{
HomeScreen: {
screen: (props) => (
<HomeController
{...props}
api={props.screenProps.api}
setShouldShowDailyTipManual={
props.screenProps.setShouldShowDailyTipManual
}
isEAP={props.screenProps.isEAP}
isMSA={props.screenProps.isMSA}
isBCBA={props.screenProps.isBCBA}
permissions={props.screenProps.permissions}
bannerCTA={props.screenProps.bannerCTA}
hasServices={props.screenProps.hasServices}
/>
),
},
},
{
headerMode: 'none',
},
)
const MeditateTab = createStackNavigator(
{
MeditateScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
coreId="meditate"
/>
),
},
},
{
headerMode: 'none',
},
)
const SleepTab = createStackNavigator(
{
SleepScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
coreId="sleep"
/>
),
},
},
{
headerMode: 'none',
},
)
const MoveTab = createStackNavigator(
{
MoveScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
coreId="move"
/>
),
},
},
{
headerMode: 'none',
},
)
const FoundationalTab = createStackNavigator(
{
FoundationalScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
coreId="foundational"
/>
),
},
},
{
headerMode: 'none',
},
)
const ParentTab = createStackNavigator(
{
ParentScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
isBCBA={props.screenProps.isBCBA}
coreId="parent"
/>
),
},
},
{
headerMode: 'none',
},
)
const PersonalTab = createStackNavigator(
{
PersonalScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
isBCBA={props.screenProps.isBCBA}
coreId="personal"
/>
),
},
},
{
headerMode: 'none',
},
)
const ProfessionalTab = createStackNavigator(
{
ProfessionalScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
isBCBA={props.screenProps.isBCBA}
coreId="professional"
/>
),
},
},
{
headerMode: 'none',
},
)
const SELTab = createStackNavigator(
{
SELScreen: {
screen: (props) => (
<CoreCollectionController
{...props}
api={props.screenProps.api}
coreId="sel"
/>
),
},
},
{
headerMode: 'none',
},
)
const DiscoverTab = createStackNavigator(
{
DiscoverScreen: {
screen: (props) => (
<SearchController
{...props}
api={props.screenProps.api}
NavigationActions={NavigationActions}
/>
),
},
},
{
headerMode: 'none',
},
)
const TabLabel = ({ focused, label }) => {
const { t } = useTranslation('NativeComponents')
const { isMobile } = useLayout()
console.log('Tab Label: ', focused, label)
if (isIOS && !isMobile) {
return (
<View style={styles.ipadContainer}>
<Text style={focused ? styles.labelFocused : styles.label}>
{t(label)}
</Text>
</View>
)
}
return (
<Text style={focused ? styles.labelFocused : styles.label}>{t(label)}</Text>
)
}
const tabScreens = {
Home: {
screen: HomeTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Home" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? homeActive : homeDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Home',
accessibilityLabel: 'Navigation - Home',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Meditate: {
screen: MeditateTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Meditate" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? meditateActive : meditateDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Meditate',
accessibilityLabel: 'Navigation - Meditate',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Sleep: {
screen: SleepTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Sleep" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? sleepActive : sleepDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Sleep',
accessibilityLabel: 'Navigation - Sleep',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Move: {
screen: MoveTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Move" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? moveActive : moveDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Move',
accessibilityLabel: 'Navigation - Move',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Foundational: {
screen: FoundationalTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Foundational" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? foundationalActive : foundational}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Foundational',
accessibilityLabel: 'Navigation - Foundational',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
SEL: {
screen: SELTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.SEL" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? selActive : sel}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'SEL',
accessibilityLabel: 'Navigation - SEL',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Parent: {
screen: ParentTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Parenting" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? parentingActive : parenting}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Parent',
accessibilityLabel: 'Navigation - Parent',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Personal: {
screen: PersonalTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Personal" focused={focused} />
),
tabBarIcon: ({ focused }) => {
console.log('in personal tab: ', focused)
return (
<Image
resizeMode="contain"
source={focused ? meditateActive : meditateDefault}
style={styles.icon}
/>
)
},
tabBarTestIDProps: {
testID: 'Personal',
accessibilityLabel: 'Navigation - Personal',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
ProfessionalTab: {
screen: ProfessionalTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Professional" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? professionalActive : professionalDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Professional',
accessibilityLabel: 'Navigation - Professional',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
Discover: {
screen: DiscoverTab,
navigationOptions: {
tabBarLabel: ({ focused }) => (
<TabLabel label="TabScreens.Discover" focused={focused} />
),
tabBarIcon: ({ focused }) => (
<Image
resizeMode="contain"
source={focused ? searchActive : searchDefault}
style={styles.icon}
/>
),
tabBarTestIDProps: {
testID: 'Discover',
accessibilityLabel: 'Navigation - Discover',
},
tabBarOptions: {
activeTintColor: colors.blueContrast,
style: styles.tabContainer,
labelStyle: styles.label,
},
},
},
}
export default tabScreens
So on first launch, the tabs icons/text do not highlight but the routing works fine.
First launch clicking 'Personal':
All following launches:
Using the following versions:
"react-navigation": "4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1",