Added Tab Component (#193)

* Tab Demo Added * Tab Demo Added
react-native-elements · Apr 12, 2021 · f920fee · f920fee
1 parent defb193
commit f920fee
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/src/navigation/RootNavigator.tsx b/src/navigation/RootNavigator.tsx
@@ -26,6 +26,7 @@ import Overlay from '../views/overlay';
 import CheckBox from '../views/checkbox';
 import FAB from '../views/fab';
 import Text from '../views/text';
+import Tabs from '../views/tabs';
 import Badge from '../views/badge';
 import WhatsappClone from '../views/whatsappClone';
 
@@ -70,6 +71,7 @@ function RootNavigator() {
         <Drawer.Screen name="Buttons" component={Buttons} />
         <Drawer.Screen name="Inputs" component={Inputs} />
         <Drawer.Screen name="Text" component={Text} />
+        <Drawer.Screen name="Tabs" component={Tabs} />
         <Drawer.Screen name="Lists" component={Lists} />
         <Drawer.Screen name="Lists2" component={Lists2} />
         <Drawer.Screen name="LinearProgress" component={LinearProgress} />

diff --git a/src/views/tabs.tsx b/src/views/tabs.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { Header } from './header';
+import { Tab } from 'react-native-elements';
+
+export default () => {
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <>
+      <Header title="Tab" />
+      <Tab
+        value={index}
+        onChange={(e) => setIndex(e)}
+        indicatorStyle={{
+          backgroundColor: 'white',
+          height: 3,
+        }}
+        variant="primary"
+      >
+        <Tab.Item
+          title="Recent"
+          icon={{ name: 'timer', type: 'ionicon', color: 'white' }}
+        />
+        <Tab.Item
+          title="favourite"
+          icon={{ name: 'heart', type: 'ionicon', color: 'white' }}
+        />
+        <Tab.Item
+          title="cart"
+          icon={{ name: 'cart', type: 'ionicon', color: 'white' }}
+        />
+      </Tab>
+      {(() => {
+        switch (index) {
+          case 0:
+            return <Text>Recent</Text>;
+          case 1:
+            return <Text>favourites</Text>;
+          case 2:
+            return <Text>Your Cart</Text>;
+          default:
+            return null;
+        }
+      })()}
+    </>
+  );
+};