chore: Add Tabs Playground

src/containers/Navigation/index.jsx

@@ -19,6 +19,7 @@ import Avatar from "../../content/Avatar";
 import Button from "../../content/Button";
 import Badge from "../../content/Badge";
 import Tile from "../../content/Tile";
+import Tab from "../../content/Tab";
 import Card from "../../content/Card";
 import ToolTip from "../../content/ToolTip";
 import Text from "../../content/Text";
@@ -151,6 +152,11 @@ export const Components_Index = [
     component: SocialIcon,
     path: "/social-icon",
   },
+  {
+    name: "Tab",
+    component: Tab,
+    path: "/tab",
+  },
   {
     name: "Text",
     component: Text,

src/content/Tab/index.jsx

@@ -0,0 +1,19 @@
+import React, { lazy, Suspense } from "react";
+import { importMDX } from "mdx.macro";
+
+import PropDrawer from "../../components/PropDrawer";
+import Playground from "./tab.playground.jsx";
+const Content = lazy(() => importMDX("../Props/tab.md"));
+
+export default function TabPlayground() {
+  return (
+    <div>
+      <Playground />
+      <Suspense fallback={<div>Loading...</div>}>
+        <PropDrawer>
+          <Content />
+        </PropDrawer>
+      </Suspense>
+    </div>
+  );
+}

src/content/Tab/tab.playground.jsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Tab } from "react-native-elements";
+import Playground from "../../components/playground";
+import { useView, PropTypes } from "react-view";
+
+const TabPlayground = () => {
+  const params = useView({
+    componentName: "Tab",
+    props: {
+      children: {
+        value: ` 
+          <Tab.Item title="Recent" />
+          <Tab.Item title="favourite" />
+          <Tab.Item title="cart" />
+         `,
+        type: PropTypes.ReactNode,
+      },
+      value: {
+        type: PropTypes.Number,
+        value: 0,
+      },
+      onChange: {
+        type: PropTypes.Function,
+        value: `() => console.log("onChange()")`,
+      },
+      disableIndicator: {
+        type: PropTypes.Boolean,
+        value: false,
+      },
+      indicatorStyle: {
+        type: PropTypes.Object,
+        value: `{}`,
+      },
+      variant: {
+        type: PropTypes.Enum,
+        options: { primary: "primary", default: "default" },
+        value: "default",
+      },
+    },
+    scope: {
+      Tab,
+    },
+    imports: {
+      "react-native-elements": {
+        named: ["Tab"],
+      },
+    },
+  });
+
+  return (
+    <React.Fragment>
+      <Playground params={params} />
+    </React.Fragment>
+  );
+};
+
+export default TabPlayground;