nativebase · ashishiiit01 · Feb 8, 2021
diff --git a/dummyData/Channel.ts b/dummyData/Channel.ts
diff --git a/dummyData/CustomDrawerData.ts b/dummyData/CustomDrawerData.ts
@@ -29,38 +29,38 @@ export const CUSTOM_DRAWER = [
     iconName: 'calendar',
     iconType: 'AntDesign',
     iconColor: 'black',
-    route: 'OverView',
+    route: 'Calender',
   },
   {
     id: 5,
     name: 'TIMELINE',
     iconName: 'clock-time-ten-outline',
     iconType: 'MaterialCommunityIcons',
     iconColor: 'black',
-    route: 'OverView',
+    route: 'TimeLine',
   },
   {
     id: 6,
     name: 'PROFILE',
     iconName: 'user',
     iconType: 'FontAwesome',
     iconColor: 'black',
-    route: 'OverView',
+    route: 'Profile',
   },
   {
     id: 7,
     name: 'SETTING',
     iconName: 'md-settings',
     iconType: 'Ionicons',
     iconColor: 'black',
-    route: 'OverView',
+    route: 'Setting',
   },
   {
     id: 8,
     name: 'FEEDBACK',
     iconName: 'file',
     iconType: 'Octicons',
     iconColor: 'black',
-    route: 'OverView',
+    route: 'Feedback',
   },
 ];
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-    "react-native-gesture-handler": "^1.9.0",
+    "react-native-gesture-handler": "~1.8.0",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.15.2",

diff --git a/src/component/newsDetail/Modal.tsx b/src/component/newsDetail/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Modal,
   ModalOverlay,
@@ -17,12 +17,7 @@ import {
 
 export default function NewsDetail(props: any) {
   return (
-    <Modal
-      isOpen={props.isModal}
-      onClose={props.setIsModal}
-      size={'full'}
-      p={0}
-    >
+    <Modal isOpen={props.isModal} onClose={props.setIsModal} size={'full'}>
       <ModalOverlay />
       <ModalContent pt={5} pb={3} pr={0} pl={0} bg={'green.100'}>
         <ModalBody>

diff --git a/src/component/newsDetail/NewsText.tsx b/src/component/newsDetail/NewsText.tsx
@@ -40,7 +40,6 @@ export default function NewsText() {
       <HStack mb={5} space={5}>
         <Divider
           orientation={'vertical'}
-          flex={1}
           borderColor={'green.100'}
           borderWidth={2}
         />

diff --git a/src/screen/drawerScreen/calender/index.tsx b/src/screen/drawerScreen/calender/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Button, Center } from 'native-base';
+
+import { DrawerProps } from '../../../interfaces';
+
+export default function Index(props: DrawerProps) {
+  return (
+    <Center flex={1}>
+      <Text>Calender Screen</Text>
+      <Button
+        size='sm'
+        colorScheme='teal'
+        variant={'outline'}
+        onPress={() => props.navigation.goBack()}
+      >
+        Go Back
+      </Button>
+    </Center>
+  );
+}
diff --git a/src/screen/drawerScreen/customDrawer/index.tsx b/src/screen/drawerScreen/customDrawer/index.tsx
@@ -5,11 +5,21 @@ import DrawerContent from './DrawerContent';
 import News from '../news';
 import Channel from '../channels';
 import OverView from '../overView';
+import Calender from '../calender';
+import TimeLine from '../timeline';
+import Profile from '../profile';
+import Setting from '../settings';
+import Feedback from '../feedback';
 
 type RootDrawerParamList = {
   News: undefined;
   Channel: undefined;
   OverView: undefined;
+  Calender: undefined;
+  TimeLine: undefined;
+  Profile: undefined;
+  Setting: undefined;
+  Feedback: undefined;
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();
@@ -20,6 +30,11 @@ export default function DrawerHome() {
       <Drawer.Screen name='News' component={News} />
       <Drawer.Screen name='Channel' component={Channel} />
       <Drawer.Screen name='OverView' component={OverView} />
+      <Drawer.Screen name='Calender' component={Calender} />
+      <Drawer.Screen name='TimeLine' component={TimeLine} />
+      <Drawer.Screen name='Profile' component={Profile} />
+      <Drawer.Screen name='Setting' component={Setting} />
+      <Drawer.Screen name='Feedback' component={Feedback} />
     </Drawer.Navigator>
   );
 }
diff --git a/src/screen/drawerScreen/feedback/index.tsx b/src/screen/drawerScreen/feedback/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Button, Center } from 'native-base';
+
+import { DrawerProps } from '../../../interfaces';
+
+export default function OverView(props: DrawerProps) {
+  return (
+    <Center flex={1}>
+      <Text>Feedback Screen</Text>
+      <Button
+        size='sm'
+        colorScheme='teal'
+        variant={'outline'}
+        onPress={() => props.navigation.goBack()}
+      >
+        Go Back
+      </Button>
+    </Center>
+  );
+}
diff --git a/src/screen/drawerScreen/overView/index.tsx b/src/screen/drawerScreen/overView/index.tsx
@@ -1,20 +1,45 @@
 import React from 'react';
-import { View, Text, Button } from 'native-base';
+import { SafeAreaView } from 'react-native';
+import { Box, Text, Center, HStack, Progress, View } from 'native-base';
 
 import { DrawerProps } from '../../../interfaces';
 
+import Header from '../../../component/Header';
+import { CHANNELS } from '../../../../dummyData/Channel';
+
 export default function OverView(props: DrawerProps) {
+  const OpenDrawer = () => {
+    props.navigation.openDrawer();
+  };
   return (
-    <View flex={1} alignItems={'center'} justifyContent={'center'}>
-      <Text>OverView Screen</Text>
-      <Button
-        size='sm'
-        colorScheme='teal'
-        variant={'outline'}
-        onPress={() => props.navigation.goBack()}
-      >
-        Go Back
-      </Button>
-    </View>
+    <SafeAreaView style={{ flex: 1 }}>
+      <Header OpenDrawer={OpenDrawer} mainHeader={true} />
+      <View flex={1}>
+        <Center bg={'green.100'} pt={5} pb={5} mb={3}>
+          <Text color={'white.100'} fontSize={22} fontWeight={'400'}>
+            OVERVIEW
+          </Text>
+          <Text color={'white.100'} fontSize={16} fontWeight={'600'}>
+            What you are reading the most
+          </Text>
+        </Center>
+
+        {CHANNELS.map((channel: any, index: number) => (
+          <Box pr={4} pl={4} pt={2} pb={1} key={index}>
+            <HStack justifyContent={'space-between'} mb={2}>
+              <Text textTransform={'uppercase'}>{channel.name}</Text>
+              <Text>{channel.progressValue}%</Text>
+            </HStack>
+            <Progress
+              size='xs'
+              colorScheme='success'
+              bg='green.100'
+              mb={4}
+              value={channel.progressValue}
+            />
+          </Box>
+        ))}
+      </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/screen/drawerScreen/profile/index.tsx b/src/screen/drawerScreen/profile/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Button, Center } from 'native-base';
+
+import { DrawerProps } from '../../../interfaces';
+
+export default function Index(props: DrawerProps) {
+  return (
+    <Center flex={1}>
+      <Text>Profile Screen</Text>
+      <Button
+        size='sm'
+        colorScheme='teal'
+        variant={'outline'}
+        onPress={() => props.navigation.goBack()}
+      >
+        Go Back
+      </Button>
+    </Center>
+  );
+}
diff --git a/src/screen/drawerScreen/settings/index.tsx b/src/screen/drawerScreen/settings/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Button, Center } from 'native-base';
+
+import { DrawerProps } from '../../../interfaces';
+
+export default function Index(props: DrawerProps) {
+  return (
+    <Center flex={1}>
+      <Text>Settings Screen</Text>
+      <Button
+        size='sm'
+        colorScheme='teal'
+        variant={'outline'}
+        onPress={() => props.navigation.goBack()}
+      >
+        Go Back
+      </Button>
+    </Center>
+  );
+}
diff --git a/src/screen/drawerScreen/timeline/index.tsx b/src/screen/drawerScreen/timeline/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Text, Button, Center } from 'native-base';
+
+import { DrawerProps } from '../../../interfaces';
+
+export default function Index(props: DrawerProps) {
+  return (
+    <Center flex={1}>
+      <Text>TimeLine Screen</Text>
+      <Button
+        size='sm'
+        colorScheme='teal'
+        variant={'outline'}
+        onPress={() => props.navigation.goBack()}
+      >
+        Go Back
+      </Button>
+    </Center>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1692,7 +1692,7 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
-"@react-native-community/masked-view@0.1.10":
+"@react-native-community/masked-view@^0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
@@ -1716,6 +1716,13 @@
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"
 
+"@react-navigation/material-top-tabs@^5.3.13":
+  version "5.3.13"
+  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.13.tgz#951353f96c081ab18c4e0053a0c28ebce5e46d28"
+  integrity sha512-3+EyD0WICtf6HdZYP+EnunNfESv2I/JeQOV06Q+U2C2p42+UKAHAc3Eqwd45GdVUuRlH1dQ7HRP40xVJXYDcEQ==
+  dependencies:
+    color "^3.1.3"
+
 "@react-navigation/native@^5.9.2":
   version "5.9.2"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.2.tgz#2075774c3627d58a324e1b5dfc5f4f356a1ab7e9"
@@ -1732,6 +1739,14 @@
   dependencies:
     nanoid "^3.1.15"
 
+"@react-navigation/stack@^5.14.2":
+  version "5.14.2"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.2.tgz#6e48efa74a9b0fc29ff0a90fcbee161039b84d78"
+  integrity sha512-tt1eFn6HClyXVZiVQsPs3Q2MgoqmJdkQsyT9P4TBLxGsdib6r/oc++eVNc+G/6ws/kCquDdHq3fz1PNSCtyrJA==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@styled-system/background@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"
@@ -1871,6 +1886,21 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-native-onboarding-swiper@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/react-native-onboarding-swiper/-/react-native-onboarding-swiper-1.1.1.tgz#72c07c21be009bbabd4394d6608e37988fd339ee"
+  integrity sha512-E7bIk+VidjP44gcLXfmda18iEK9OGwgkei8nh0p2vFvmJNOU479CIEYKpXRe5UT08Jb4D4opjdSQWrNw6Ke59w==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
+"@types/react-native@*":
+  version "0.63.48"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.48.tgz#83ebffe2900b8dee7e420bad9d8d0efea86efe92"
+  integrity sha512-6+7WsHfVkcYEwO/u3wxarMwZq/mbJZ5iDYCXwX5bs8lm0vEIuBdMsk9jrwxuCBvaXhGdB0lriwTgfew/7VN2Kg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@~0.63.2":
   version "0.63.46"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.46.tgz#942df5af29046c6f22227495e00d5297cc1cea73"
@@ -3913,6 +3943,11 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+intl@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
+  integrity sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -5680,22 +5715,22 @@ react-native-material-ripple@^0.9.1:
   dependencies:
     prop-types "^15.5.10"
 
-react-native-reanimated@~1.13.0:
+react-native-reanimated@^1.13.2:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz#1ae5457b24b4913d173a5a064bb28eae7783d293"
   integrity sha512-O+WhgxSjOIzcVdAAvx+h2DY331Ek1knKlaq+jsNLpC1fhRy9XTdOObovgob/aF2ve9uJfPEawCx8381g/tUJZQ==
   dependencies:
     fbjs "^1.0.0"
 
-react-native-safe-area-context@3.1.9:
+react-native-safe-area-context@3.1.9, react-native-safe-area-context@^3.1.9:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz#48864ea976b0fa57142a2cc523e1fd3314e7247e"
   integrity sha512-wmcGbdyE/vBSL5IjDPReoJUEqxkZsywZw5gPwsVUV1NBpw5eTIdnL6Y0uNKHE25Z661moxPHQz6kwAkYQyorxA==
 
-react-native-screens@~2.15.2:
-  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.15.2.tgz#a449700e895b462937211ec72ed6f09652758f06"
-  integrity sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==
+react-native-screens@^2.15.2:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.17.1.tgz#c3c0ac750af48741c5b1635511e6af2a27b74309"
+  integrity sha512-B4gD5e4csvlVwlhf+RNqjQZ9mHTwe/iL3rXondgZxnKz4oW0QAmtLnLRKOrYVxoaJaF9Fy7jhjo//24/472APQ==
 
 react-native-svg@^12.1.0:
   version "12.1.0"
@@ -5705,6 +5740,11 @@ react-native-svg@^12.1.0:
     css-select "^2.1.0"
     css-tree "^1.0.0-alpha.39"
 
+react-native-tab-view@^2.15.2:
+  version "2.15.2"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e"
+  integrity sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==
+
 react-native-unimodules@~0.10.1:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/react-native-unimodules/-/react-native-unimodules-0.10.1.tgz#05a5ef248e88589528e7ef925137a345dde96ca4"