Added New Component: TabView (react-native-elements#2919)

* Added to README * Added Tab Component * Added Docs * Added Test * Exported * Exported
tt0mmy · Apr 12, 2021 · 5c2d6b6 · 5c2d6b6
1 parent 19566ea
commit 5c2d6b6
Show file tree

Hide file tree

Showing 9 changed files with 539 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ import { Button } from 'react-native-elements';
 - [x] [Speed Dial](https://reactnativeelements.com/docs/speeddial)
 - [x] [Switch](https://reactnativeelements.com/docs/switch)
 - [x] [Tile](https://reactnativeelements.com/docs/tile)
+- [x] [Tab](https://reactnativeelements.com/docs/tab)
 - [x] [Tooltip](https://reactnativeelements.com/docs/tooltip)
 
 ## React Native Web support

diff --git a/src/index.ts b/src/index.ts
@@ -39,6 +39,7 @@ import Tooltip, { TooltipProps } from './tooltip/Tooltip';
 import BottomSheet, { BottomSheetProps } from './bottomSheet/BottomSheet';
 import LinearProgress, { LinearProgressProps } from './linearProgress';
 import Switch, { SwitchProps } from './switch/switch';
+import Tab, { TabItemProps, TabProps } from './tab/tab';
 import {
   AirbnbRating as BaseAirbnbRating,
   Rating as BaseRating,
@@ -107,6 +108,7 @@ export {
   Image,
   FAB,
   SpeedDial,
+  Tab,
 };
 export type {
   AvatarProps,
@@ -146,5 +148,7 @@ export type {
   SpeedDialActionProps,
   SpeedDialProps,
   ThemeProps,
+  TabItemProps,
+  TabProps,
   ListItemAccordionProps,
 };
diff --git a/src/tab/__tests__/__snapshots__/tab.js.snap b/src/tab/__tests__/__snapshots__/tab.js.snap
@@ -0,0 +1,254 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tab Component should render without issues 1`] = `
+<Fragment>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "position": "relative",
+        },
+        Object {
+          "backgroundColor": "#2089dc",
+        },
+      ]
+    }
+  >
+    <TabItem
+      active={true}
+      key=".0"
+      onPress={[Function]}
+      theme={
+        Object {
+          "colors": Object {
+            "black": "#242424",
+            "disabled": "hsl(208, 8%, 90%)",
+            "divider": "#bcbbc1",
+            "error": "#ff190c",
+            "grey0": "#393e42",
+            "grey1": "#43484d",
+            "grey2": "#5e6977",
+            "grey3": "#86939e",
+            "grey4": "#bdc6cf",
+            "grey5": "#e1e8ee",
+            "greyOutline": "#bbb",
+            "platform": Object {
+              "android": Object {
+                "error": "#f44336",
+                "grey": "rgba(0, 0, 0, 0.54)",
+                "primary": "#2196f3",
+                "searchBg": "#dcdce1",
+                "secondary": "#9C27B0",
+                "success": "#4caf50",
+                "warning": "#ffeb3b",
+              },
+              "default": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "ios": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "web": Object {
+                "error": "#ff190c",
+                "grey": "#393e42",
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#ca71eb",
+                "success": "#52c41a",
+                "warning": "#faad14",
+              },
+            },
+            "primary": "#2089dc",
+            "searchBg": "#303337",
+            "secondary": "#ca71eb",
+            "success": "#52c41a",
+            "warning": "#faad14",
+            "white": "#ffffff",
+          },
+        }
+      }
+      title="Tab 1"
+      variant="primary"
+    />
+    <TabItem
+      active={false}
+      key=".1"
+      onPress={[Function]}
+      theme={
+        Object {
+          "colors": Object {
+            "black": "#242424",
+            "disabled": "hsl(208, 8%, 90%)",
+            "divider": "#bcbbc1",
+            "error": "#ff190c",
+            "grey0": "#393e42",
+            "grey1": "#43484d",
+            "grey2": "#5e6977",
+            "grey3": "#86939e",
+            "grey4": "#bdc6cf",
+            "grey5": "#e1e8ee",
+            "greyOutline": "#bbb",
+            "platform": Object {
+              "android": Object {
+                "error": "#f44336",
+                "grey": "rgba(0, 0, 0, 0.54)",
+                "primary": "#2196f3",
+                "searchBg": "#dcdce1",
+                "secondary": "#9C27B0",
+                "success": "#4caf50",
+                "warning": "#ffeb3b",
+              },
+              "default": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "ios": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "web": Object {
+                "error": "#ff190c",
+                "grey": "#393e42",
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#ca71eb",
+                "success": "#52c41a",
+                "warning": "#faad14",
+              },
+            },
+            "primary": "#2089dc",
+            "searchBg": "#303337",
+            "secondary": "#ca71eb",
+            "success": "#52c41a",
+            "warning": "#faad14",
+            "white": "#ffffff",
+          },
+        }
+      }
+      title="Tab 2"
+      variant="primary"
+    />
+    <TabItem
+      active={false}
+      key=".2"
+      onPress={[Function]}
+      theme={
+        Object {
+          "colors": Object {
+            "black": "#242424",
+            "disabled": "hsl(208, 8%, 90%)",
+            "divider": "#bcbbc1",
+            "error": "#ff190c",
+            "grey0": "#393e42",
+            "grey1": "#43484d",
+            "grey2": "#5e6977",
+            "grey3": "#86939e",
+            "grey4": "#bdc6cf",
+            "grey5": "#e1e8ee",
+            "greyOutline": "#bbb",
+            "platform": Object {
+              "android": Object {
+                "error": "#f44336",
+                "grey": "rgba(0, 0, 0, 0.54)",
+                "primary": "#2196f3",
+                "searchBg": "#dcdce1",
+                "secondary": "#9C27B0",
+                "success": "#4caf50",
+                "warning": "#ffeb3b",
+              },
+              "default": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "ios": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "web": Object {
+                "error": "#ff190c",
+                "grey": "#393e42",
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#ca71eb",
+                "success": "#52c41a",
+                "warning": "#faad14",
+              },
+            },
+            "primary": "#2089dc",
+            "searchBg": "#303337",
+            "secondary": "#ca71eb",
+            "success": "#52c41a",
+            "warning": "#faad14",
+            "white": "#ffffff",
+          },
+        }
+      }
+      title="Tab 3"
+      variant="primary"
+    />
+    <ForwardRef(AnimatedComponentWrapper)
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "display": "flex",
+            "height": 2,
+            "position": "absolute",
+          },
+          Object {
+            "backgroundColor": "#ca71eb",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "width": 0,
+          }
+        }
+      />
+    </ForwardRef(AnimatedComponentWrapper)>
+  </View>
+</Fragment>
+`;
diff --git a/src/tab/__tests__/tab.js b/src/tab/__tests__/tab.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import { Tab } from '../tab';
+import theme from '../../config/theme';
+
+describe('Tab Component', () => {
+  it('should render without issues', () => {
+    const onValueChange = jest.fn();
+    const component = shallow(
+      <Tab theme={theme} onChange={onValueChange} value={0} variant="primary">
+        <Tab.Item theme={theme} title="Tab 1" />
+        <Tab.Item theme={theme} title="Tab 2" />
+        <Tab.Item theme={theme} title="Tab 3" />
+      </Tab>
+    );
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});