Skip to content

Commit

Permalink
feat: adjust BottomNavigation into Material You (#3083)
Browse files Browse the repository at this point in the history
  • Loading branch information
lukewalczak authored May 11, 2022
1 parent d9354c7 commit c36bd99
Show file tree
Hide file tree
Showing 6 changed files with 499 additions and 249 deletions.
16 changes: 13 additions & 3 deletions example/src/Examples/BadgeExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ import {
Paragraph,
Switch,
MD2Colors,
useTheme,
MD3Colors,
} from 'react-native-paper';
import ScreenWrapper from '../ScreenWrapper';

const BadgeExample = () => {
const [visible, setVisible] = React.useState<boolean>(true);
const { isV3 } = useTheme();

return (
<ScreenWrapper>
Expand All @@ -34,7 +37,14 @@ const BadgeExample = () => {
<IconButton icon="inbox" size={36} style={styles.button} />
<Badge
visible={visible}
style={[styles.badge, { backgroundColor: MD2Colors.blue500 }]}
style={[
styles.badge,
{
backgroundColor: isV3
? MD3Colors.primary80
: MD2Colors.blue500,
},
]}
>
999+
</Badge>
Expand All @@ -45,11 +55,11 @@ const BadgeExample = () => {
<View style={styles.row}>
<View style={styles.item}>
<IconButton icon="book-open" size={36} style={styles.button} />
<Badge visible={visible} style={styles.badge} size={8} />
<Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
</View>
<View style={styles.item}>
<IconButton icon="receipt" size={36} style={styles.button} />
<Badge visible={visible} style={styles.badge} size={8} />
<Badge visible={visible} style={styles.badge} size={isV3 ? 6 : 8} />
</View>
</View>
</List.Section>
Expand Down
33 changes: 24 additions & 9 deletions example/src/Examples/BottomNavigationExample.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import * as React from 'react';
import { View, Image, Dimensions, StyleSheet, Platform } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import { BottomNavigation, useTheme } from 'react-native-paper';
import ScreenWrapper from '../ScreenWrapper';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

type RoutesState = Array<{
key: string;
title: string;
icon: string;
focusedIcon: string;
unfocusedIcon?: string;
color?: string;
badge?: boolean;
getAccessibilityLabel?: string;
Expand All @@ -33,28 +34,42 @@ const PhotoGallery = ({ route }: Route) => {
};

const BottomNavigationExample = () => {
const { isV3 } = useTheme();
const insets = useSafeAreaInsets();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState<RoutesState>([
{ key: 'album', title: 'Album', icon: 'image-album', color: '#6200ee' },
{
key: 'album',
title: 'Album',
focusedIcon: 'image-album',
...(!isV3 && { color: '#6200ee' }),
},
{
key: 'library',
title: 'Library',
icon: 'inbox',
color: '#2962ff',
focusedIcon: 'inbox',
badge: true,
...(isV3
? { unfocusedIcon: 'inbox-outline' }
: {
color: '#2962ff',
}),
},
{
key: 'favorites',
title: 'Favorites',
icon: 'heart',
color: '#00796b',
focusedIcon: 'heart',
...(isV3
? { unfocusedIcon: 'heart-outline' }
: {
color: '#00796b',
}),
},
{
key: 'purchased',
title: 'Purchased',
icon: 'shopping-music',
color: '#c51162',
focusedIcon: 'shopping-music',
...(!isV3 && { color: '#c51162' }),
},
]);

Expand Down
8 changes: 6 additions & 2 deletions src/components/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,14 @@ const Badge = ({
...restStyle
} = (StyleSheet.flatten(style) || {}) as TextStyle;

const textColor = getContrastingColor(backgroundColor || white, white, black);
const textColor = theme.isV3
? theme.colors.onError
: getContrastingColor(backgroundColor, white, black);

const borderRadius = size / 2;

const paddingHorizontal = theme.isV3 ? 3 : 4;

return (
<Animated.Text
numberOfLines={1}
Expand All @@ -111,6 +115,7 @@ const Badge = ({
height: size,
minWidth: size,
borderRadius,
paddingHorizontal,
},
styles.container,
restStyle,
Expand All @@ -129,7 +134,6 @@ const styles = StyleSheet.create({
alignSelf: 'flex-end',
textAlign: 'center',
textAlignVertical: 'center',
paddingHorizontal: 4,
overflow: 'hidden',
},
});
Loading

0 comments on commit c36bd99

Please sign in to comment.