refactor: adjust BottomNavigation

callstack · Feb 7, 2022 · 0ec3fba · 0ec3fba
1 parent cd43b2a
commit 0ec3fba
Show file tree

Hide file tree

Showing 4 changed files with 395 additions and 203 deletions.
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' }),
     },
   ]);