Skip to content

Commit

Permalink
refactor: correct label colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukewalczak
lukewalczak committed Mar 10, 2022
1 parent ec09edb commit 96a0ee9
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 16 deletions.
22 changes: 15 additions & 7 deletions src/components/BottomNavigation/BottomNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ type Props = {
*
* - `key`: a unique key to identify the route (required)
* - `title`: title of the route to use as the tab label
* - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component
* - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component
* - `focusedIcon`: icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v3.x
* - `unfocusedIcon`: icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v3.x with theme version 3
* - `color`: color to use as background color for shifting bottom navigation
* - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
* - `accessibilityLabel`: accessibility label for the tab button
Expand Down Expand Up @@ -567,12 +567,14 @@ const BottomNavigation = ({
: true;

const textColor = isDark ? white : black;

const activeTintColor =
typeof activeColor !== 'undefined'
? activeColor
: isV3
? theme.colors.onSecondaryContainer
: textColor;

const inactiveTintColor =
typeof inactiveColor !== 'undefined'
? inactiveColor
Expand Down Expand Up @@ -773,12 +775,18 @@ const BottomNavigation = ({

const badge = getBadge({ route });

const labelColor = !isV3
const activeLabelColor = !isV3
? activeTintColor
: focused
? theme.colors.onSurface
: theme.colors.onSurfaceVariant;

const inactiveLabelColor = !isV3
? inactiveTintColor
: focused
? theme.colors.onSurface
: theme.colors.onSurfaceVariant;

const badgeStyle = {
top: !isV3 ? -2 : typeof badge === 'boolean' ? 4 : 2,
right:
Expand Down Expand Up @@ -911,15 +919,15 @@ const BottomNavigation = ({
renderLabel({
route,
focused: true,
color: labelColor,
color: activeLabelColor,
})
) : (
<Text
variant="labelMedium"
style={[
styles.label,
{
color: labelColor,
color: activeLabelColor,
},
]}
>
Expand All @@ -938,7 +946,7 @@ const BottomNavigation = ({
renderLabel({
route,
focused: false,
color: labelColor,
color: inactiveLabelColor,
})
) : (
<Text
Expand All @@ -947,7 +955,7 @@ const BottomNavigation = ({
style={[
styles.label,
{
color: labelColor,
color: inactiveLabelColor,
},
]}
>
Expand Down
18 changes: 9 additions & 9 deletions src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1479,7 +1479,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
}
>
<text
color="#ffffff"
color="rgba(255, 255, 255, 0.5)"
/>
</View>
</View>
Expand Down Expand Up @@ -1645,7 +1645,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
}
>
<text
color="#ffffff"
color="rgba(255, 255, 255, 0.5)"
/>
</View>
</View>
Expand Down Expand Up @@ -1811,7 +1811,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
}
>
<text
color="#ffffff"
color="rgba(255, 255, 255, 0.5)"
/>
</View>
</View>
Expand Down Expand Up @@ -3051,7 +3051,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
"textAlign": "center",
},
Object {
"color": "#FBF7DB",
"color": "#853D4B",
},
],
]
Expand Down Expand Up @@ -3296,7 +3296,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
"textAlign": "center",
},
Object {
"color": "#FBF7DB",
"color": "#853D4B",
},
],
]
Expand Down Expand Up @@ -3541,7 +3541,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
"textAlign": "center",
},
Object {
"color": "#FBF7DB",
"color": "#853D4B",
},
],
]
Expand Down Expand Up @@ -4652,7 +4652,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
"textAlign": "center",
},
Object {
"color": "#ffffff",
"color": "rgba(255, 255, 255, 0.5)",
},
],
]
Expand Down Expand Up @@ -4897,7 +4897,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
"textAlign": "center",
},
Object {
"color": "#ffffff",
"color": "rgba(255, 255, 255, 0.5)",
},
],
]
Expand Down Expand Up @@ -5142,7 +5142,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
"textAlign": "center",
},
Object {
"color": "#ffffff",
"color": "rgba(255, 255, 255, 0.5)",
},
],
]
Expand Down

0 comments on commit 96a0ee9

Please sign in to comment.