Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: introduce new prop labelMaxFontSizeMultiplier for BottomNavigation #3100

Merged
merged 2 commits into from
Mar 23, 2022
Merged

feat: introduce new prop labelMaxFontSizeMultiplier for BottomNavigation #3100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a60cb3a
feat: introduce new prop labelMaxFontSizeMultiplier for BottomNavigation
lukewalczak Feb 23, 2022
fb2849d
refactor: set default value for labelMaxFontSizeMultiplier
lukewalczak Feb 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/src/Examples/BottomNavigationExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const BottomNavigationExample = () => {
safeAreaInsets={{ bottom: insets.bottom }}
navigationState={{ index, routes }}
onIndexChange={setIndex}
labelMaxFontSizeMultiplier={2}
renderScene={BottomNavigation.SceneMap({
album: PhotoGallery,
library: PhotoGallery,
Expand Down
10 changes: 10 additions & 0 deletions src/components/BottomNavigation/BottomNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,10 @@ type Props = {
* ```
*/
barStyle?: StyleProp<ViewStyle>;
/**
* Specifies the largest possible scale a label font can reach.
*/
labelMaxFontSizeMultiplier?: number;
style?: StyleProp<ViewStyle>;
/**
* @optional
Expand Down Expand Up @@ -344,6 +348,7 @@ const BottomNavigation = ({
onIndexChange,
shifting = navigationState.routes.length > 3,
safeAreaInsets,
labelMaxFontSizeMultiplier = 1,
lukewalczak marked this conversation as resolved.
Show resolved Hide resolved
}: Props) => {
const { scale } = theme.animation;

Expand Down Expand Up @@ -856,6 +861,7 @@ const BottomNavigation = ({
})
) : (
<Text
maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
style={[styles.label, { color: activeTintColor }]}
>
{getLabelText({ route })}
Expand All @@ -877,6 +883,9 @@ const BottomNavigation = ({
})
) : (
<Text
maxFontSizeMultiplier={
labelMaxFontSizeMultiplier
}
selectable={false}
style={[
styles.label,
Expand Down Expand Up @@ -988,6 +997,7 @@ const styles = StyleSheet.create({
// eslint-disable-next-line react-native/no-color-literals
label: {
fontSize: 12,
height: BAR_HEIGHT,
textAlign: 'center',
backgroundColor: 'transparent',
...(Platform.OS === 'web'
Expand Down
18 changes: 18 additions & 0 deletions src/components/__tests__/BottomNavigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,3 +194,21 @@ it('should have appropriate display style according to the visibility', () => {
expect.arrayContaining([expect.objectContaining({ display: 'none' })])
);
});

it('should have labelMaxFontSizeMultiplier passed to label', () => {
const labelMaxFontSizeMultiplier = 2;
const { getAllByText } = render(
<BottomNavigation
shifting={false}
labeled={true}
labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
navigationState={createState(0, 3)}
onIndexChange={jest.fn()}
renderScene={({ route }) => route.title}
/>
);

const label = getAllByText('Route: 0')[0];

expect(label.props.maxFontSizeMultiplier).toBe(labelMaxFontSizeMultiplier);
});
40 changes: 40 additions & 0 deletions src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2966,6 +2966,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -2980,6 +2981,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -3005,6 +3007,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -3020,6 +3023,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -3207,6 +3211,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -3221,6 +3226,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -3246,6 +3252,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -3261,6 +3268,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -3448,6 +3456,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -3462,6 +3471,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -3487,6 +3497,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -3502,6 +3513,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -3825,6 +3837,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -3839,6 +3852,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -4026,6 +4040,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -4040,6 +4055,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -4227,6 +4243,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -4241,6 +4258,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -4543,6 +4561,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -4557,6 +4576,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -4582,6 +4602,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -4597,6 +4618,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -4784,6 +4806,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -4798,6 +4821,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -4823,6 +4847,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -4838,6 +4863,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -5025,6 +5051,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -5039,6 +5066,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand All @@ -5064,6 +5092,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
selectable={false}
style={
Array [
Expand All @@ -5079,6 +5108,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -5401,6 +5431,7 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -5415,6 +5446,7 @@ exports[`renders shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -5602,6 +5634,7 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -5616,6 +5649,7 @@ exports[`renders shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -5803,6 +5837,7 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -5817,6 +5852,7 @@ exports[`renders shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -6004,6 +6040,7 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -6018,6 +6055,7 @@ exports[`renders shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down Expand Up @@ -6205,6 +6243,7 @@ exports[`renders shifting bottom navigation 1`] = `
}
>
<Text
maxFontSizeMultiplier={1}
style={
Array [
Object {
Expand All @@ -6219,6 +6258,7 @@ exports[`renders shifting bottom navigation 1`] = `
Object {
"backgroundColor": "transparent",
"fontSize": 12,
"height": 56,
"textAlign": "center",
},
Object {
Expand Down