feat: adjust BottomNavigation into Material You (#3083)

callstack · Jun 8, 2022 · bc63158 · bc63158
1 parent 01f275b
commit bc63158
Show file tree

Hide file tree

Showing 6 changed files with 499 additions and 249 deletions.
diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
@@ -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>
@@ -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>
@@ -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>

diff --git a/example/src/Examples/BottomNavigationExample.tsx b/example/src/Examples/BottomNavigationExample.tsx
@@ -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;
@@ -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' }),
     },
   ]);
 

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -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}
@@ -111,6 +115,7 @@ const Badge = ({
           height: size,
           minWidth: size,
           borderRadius,
+          paddingHorizontal,
         },
         styles.container,
         restStyle,
@@ -129,7 +134,6 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
     textAlign: 'center',
     textAlignVertical: 'center',
-    paddingHorizontal: 4,
     overflow: 'hidden',
   },
 });