fix: changed tab title to optional

netguru · Sep 25, 2020 · 8c7a6a9 · 8c7a6a9
1 parent 9e75a5f
commit 8c7a6a9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ Below are examples of those components and description of the props they are acc
 | `onRef`                 |`func`                                                 |    Yes   |                                                                                                                                                                                                | Reference callback. You can call goToPage(pageNumber) method through ref to programmatically navigate to given tab                |
 | `rememberTabScrollPosition`   |`bool`                                                 |    Yes   |`false`                                                                                                                                                                                         | When switching between tabs remember current scroll position                        |
 | `scrollEvent`                 |`func`                                                 |    Yes   |                                                                                                                                                                                                | Scroll event to apply custom animations                  |
-| `tabs`                        |`{ content: ReactElement;title: string;icon?: ReactElement` &#124; `(isActive: boolean) => ReactElement);`                                |    Yes   | `[{title: 'Popular',content: <RenderContent title="Popular Quizes" />},...]`                                                                                                                   | Array with tabs names, icons and content                        |
+| `tabs`                        |`{ content: ReactElement;title?: string;icon?: ReactElement` &#124; `(isActive: boolean) => ReactElement);`                                |    Yes   | `[{title: 'Popular',content: <RenderContent title="Popular Quizes" />},...]`                                                                                                                   | Array with tabs names, icons and content                        |
 | `tabText`                     |`Text.propTypes.style`                                 |    Yes   |`{fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white}`                                                                                                | Set inactive tab style                                   |
 | `tabTextActiveStyle`          |`Text.propTypes.style`                                 |    Yes   |`{fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white}`                                                                                                | Set active tab stylee                                    |
 | `tabTextContainerStyle`       |`ViewPropTypes.style`                                  |    Yes   |`{backgroundColor: colors.transparent, borderRadius: 18}`                                                                                                                                       | Set inactive tab container style                         |

diff --git a/src/components/ScrollableTabBar/ScrollableTabBar.js b/src/components/ScrollableTabBar/ScrollableTabBar.js
@@ -134,13 +134,14 @@ class ScrollableTabBar extends React.PureComponent {
           showsHorizontalScrollIndicator={false}>
           {tabs.map((tab, page) => {
             const isTabActive = activeTab === page;
+            const tabKey = tab.title || `tab ${page}`;
 
             return (
               <TouchableOpacity
-                key={tab.title}
+                key={tabKey}
                 accessible
                 style={tabWrapperStyle}
-                accessibilityLabel={tab.title}
+                accessibilityLabel={tabKey}
                 accessibilityTraits="button"
                 activeOpacity={0.9}
                 onPress={() => this.goToPage(page)}>
@@ -151,22 +152,24 @@ class ScrollableTabBar extends React.PureComponent {
                     isTabActive && tabTextContainerActiveStyle,
                   ]}>
                   {this.renderIcon(tab.icon, page)}
-                  <Text
-                    // eslint-disable-next-line no-return-assign
-                    onLayout={({
-                      nativeEvent: {
-                        layout: { width },
-                      },
-                    }) => {
-                      const newWidth = [...tabUnderlineWidth];
-                      newWidth[page] = width;
-                      this.setState({
-                        tabUnderlineWidth: newWidth,
-                      });
-                    }}
-                    style={[styles.tabText, tabTextStyle, isTabActive && tabTextActiveStyle]}>
-                    {tab.title}
-                  </Text>
+                  {tab.title && (
+                    <Text
+                      // eslint-disable-next-line no-return-assign
+                      onLayout={({
+                        nativeEvent: {
+                          layout: { width },
+                        },
+                      }) => {
+                        const newWidth = [...tabUnderlineWidth];
+                        newWidth[page] = width;
+                        this.setState({
+                          tabUnderlineWidth: newWidth,
+                        });
+                      }}
+                      style={[styles.tabText, tabTextStyle, isTabActive && tabTextActiveStyle]}>
+                      {tab.title}
+                    </Text>
+                  )}
                 </View>
               </TouchableOpacity>
             );

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -30,7 +30,7 @@ export interface OnChangeTabArguments {
 
 export interface Tab {
   content: ReactElement;
-  title: string;
+  title?: string;
   icon?: ReactElement | ((isActive: boolean) => ReactElement);
 }
 export interface SharedProps {