refactor: use functions to specify custom react node for icons and label

react-navigation · Nov 16, 2019 · 31b8819 · 31b8819
1 parent 2baa235
commit 31b8819
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 59 deletions.
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -64,24 +64,22 @@ export type BottomTabNavigationOptions = {
   title?: string;
 
   /**
-   * Title string of a tab displayed in the tab bar or React Element
-   * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
+   * Title string of a tab displayed in the tab bar
+   * or a function that given { focused: boolean, color: string } returns a React.Node to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
-    | React.ReactNode
+    | string
     | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
-   * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?:
-    | React.ReactNode
-    | ((props: {
-        focused: boolean;
-        color: string;
-        size: number;
-      }) => React.ReactNode);
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
 
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
@@ -222,7 +220,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
         focused: boolean;
         color: string;
       }) => React.ReactNode | undefined)
-    | React.ReactNode;
+    | string;
   getTestID: (props: { route: Route<string> }) => string | undefined;
   renderButton: (
     props: { route: Route<string> } & BottomTabBarButtonProps

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -155,11 +155,11 @@ export default class TabBarBottom extends React.Component<Props, State> {
       );
     }
 
-    if (typeof label === 'function') {
-      return label({ focused, color });
+    if (typeof label === 'string') {
+      return label;
     }
 
-    return label;
+    return label({ focused, color });
   };
 
   private renderIcon = ({

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -90,9 +90,9 @@ export default class BottomTabView extends React.Component<Props, State> {
     const options = descriptor.options;
 
     if (options.tabBarIcon) {
-      return typeof options.tabBarIcon === 'function'
-        ? options.tabBarIcon({ focused, color, size })
-        : options.tabBarIcon;
+      return typeof options.tabBarIcon === 'string'
+        ? options.tabBarIcon
+        : options.tabBarIcon({ focused, color, size });
     }
 
     return null;

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -99,24 +99,26 @@ export default function DrawerItem({
       >
         <React.Fragment>
           {iconNode}
-          {typeof label === 'function' ? (
-            label({ color, focused })
-          ) : (
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.label,
-                {
+          <View
+            style={[
+              styles.label,
+              { marginLeft: iconNode ? 32 : 0, marginVertical: 5 },
+            ]}
+          >
+            {typeof label === 'string' ? (
+              <Text
+                numberOfLines={1}
+                style={{
                   color,
                   fontWeight: '500',
-                  marginLeft: iconNode ? 32 : 0,
-                  marginVertical: 5,
-                },
-              ]}
-            >
-              {label}
-            </Text>
-          )}
+                }}
+              >
+                {label}
+              </Text>
+            ) : (
+              label({ color, focused })
+            )}
+          </View>
         </React.Fragment>
       </TouchableItem>
     </View>

diff --git a/packages/example/src/Screens/BottomTabs.tsx b/packages/example/src/Screens/BottomTabs.tsx
@@ -9,17 +9,11 @@ import SimpleStackScreen from './SimpleStack';
 
 const getTabBarIcon = (name: string) => ({
   color,
-  horizontal,
+  size,
 }: {
   color: string;
-  horizontal: boolean;
-}) => (
-  <MaterialCommunityIcons
-    name={name}
-    color={color}
-    size={horizontal ? 17 : 24}
-  />
-);
+  size: number;
+}) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
   article: undefined;

diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -63,20 +63,18 @@ export type MaterialTopTabNavigationOptions = {
   title?: string;
 
   /**
-   * Title string of a tab displayed in the tab bar or React Element
+   * Title string of a tab displayed in the tab bar
    * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
    * When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
    */
   tabBarLabel?:
-    | React.ReactNode
+    | string
     | ((props: { focused: boolean; color: string }) => React.ReactNode);
 
   /**
-   * React Element or a function that given { focused: boolean, color: string } returns a React.Node, to display in the tab bar.
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
    */
-  tabBarIcon?:
-    | React.ReactNode
-    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
 
   /**
    * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
@@ -197,7 +195,7 @@ export type MaterialTopTabBarProps = MaterialTopTabBarOptions &
       route: Route<string>;
     }) =>
       | ((scene: { focused: boolean; color: string }) => React.ReactNode)
-      | React.ReactNode;
+      | string;
     getAccessibilityLabel: (props: {
       route: Route<string>;
     }) => string | undefined;

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -52,11 +52,7 @@ export default class TabBarTop extends React.PureComponent<
       );
     }
 
-    if (typeof label === 'function') {
-      return label({ focused, color });
-    }
-
-    return label;
+    return label({ focused, color });
   };
 
   private renderIcon = ({
@@ -77,10 +73,7 @@ export default class TabBarTop extends React.PureComponent<
     const { options } = descriptors[route.key];
 
     if (options.tabBarIcon !== undefined) {
-      const icon =
-        typeof options.tabBarIcon === 'function'
-          ? options.tabBarIcon({ focused, color })
-          : options.tabBarIcon;
+      const icon = options.tabBarIcon({ focused, color });
 
       return <View style={[styles.icon, iconStyle]}>{icon}</View>;
     }