API Integration / Optimization

src/api/APIHandler.js

@@ -3,5 +3,5 @@ import { API_URL_v1} from "./urls";
 
 export default APIHandler = axios.create({
     baseURL: API_URL_v1,
-    timeout: 1000,
+    timeout: 2000,
 })

src/api/data.js

@@ -3,7 +3,7 @@ import { ARTICLE_COMMENTS_URL, ARTICLE_DETAIL_URL, ARTICLE_RECOMMENDATIONS_URL,
 
 export const getTrendingNews = () =>  APIHandler.get(TRENDING_URL)
 export const getMenus = () => APIHandler.get(MENUS_URL)
-export const getArticlesByCategory = (category) => APIHandler.get(ARTICLE_SEARCH_URL(category))
+export const getArticlesByCategory = (category,page = 1) => APIHandler.get(ARTICLE_SEARCH_URL(category,page))
 export const getArticleBySlug = (slug) => APIHandler.get(ARTICLE_DETAIL_URL(slug))
 export const getCommentByArticleID = (id) => APIHandler.get(ARTICLE_COMMENTS_URL(id))
 export const getRecommendationByArticleID = (id) => APIHandler.get(ARTICLE_RECOMMENDATIONS_URL(id))

src/api/urls.js

@@ -10,7 +10,7 @@ export const API_URL_v2 = BASE_URL + "/api/v2/"
 export const ARTICLE_URL = `article/search/?domain=${DEFAULT_DOMAIN}`
 export const TRENDING_URL = `trending/?domain=${DEFAULT_DOMAIN}`
 export const MENUS_URL =  `menus/?domain=${DEFAULT_DOMAIN}`
-export const ARTICLE_SEARCH_URL = (category_type) =>  `article/search/?domain=${DEFAULT_DOMAIN}&category=${category_type}`
+export const ARTICLE_SEARCH_URL = (category_type,page = 1) =>  `article/search/?domain=${DEFAULT_DOMAIN}&category=${category_type}&page=${page}`
 export const ARTICLE_DETAIL_URL = (slug) => `articles/${slug}/?domain=${DEFAULT_DOMAIN}`
 export const ARTICLE_COMMENTS_URL = (id) => `comment/?article_id=${id}`
 export const ARTICLE_RECOMMENDATIONS_URL = (id) => `articles/${id}/recommendations`

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -20,7 +20,7 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
     cardContainer: {
       borderRadius: moderateScale(16),
       width: 'auto',
-      maxWidth: 340,
+      maxWidth: horizontalScale(320),
       maxHeight: verticalScale(220),
       backgroundColor: currentTheme === 'light' ? colors().white: colors().black_variant,
       elevation: 4,

src/components/molecules/Header/NewscoutTitleHeader.js

@@ -28,7 +28,7 @@ const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onB
             backButtonShown={backButtonShown} 
             onBackClick={onBackClick}
             backIconTextComponent={
-                <Text style={[styles.title, titleStyle]}></Text>
+                <Text style={[styles.title, titleStyle]}>{title}</Text>
             }   
         
         >

src/components/organisms/Sections/CategorySection.js

@@ -9,6 +9,7 @@ import {
   getScreenType,
   useConstructor,
   navigateToArticle,
+  navigateToListViewPage,
 } from '../../../constants/functions';
 import SectionHeader from '../../molecules/Header/SectionHeader';
 import {
@@ -56,8 +57,6 @@ const CategorySection = ({navigation}) => {
       }).then(categoryData => {
         setCategoryValue(categoryData[0].heading.name);
         setLoading(false);
-        console.warn(categoryData)
-        console.warn(news)
       })
       .catch(err => console.error(`Fetch Categories : ${err}`))
       .finally(() => console.log('Fetch Categories Executed'));
@@ -132,7 +131,7 @@ const CategorySection = ({navigation}) => {
 
   return (
     <View style={styles.categoriesContainer}>
-      <SectionHeader label={'Categories'} />
+      <SectionHeader label={'Categories'} onPress={() => navigateToListViewPage(navigation,"category",categoryValue)}/>
       {isLoading === true ? (
         <LoadingScreen containerHeight={240} />
       ) : (

src/components/organisms/Sections/TrendingSection.js

@@ -1,8 +1,8 @@
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import React, {useContext} from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useContext } from 'react';
 import Carousel from 'react-native-reanimated-carousel';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {PAGINATE_BY, navigateToArticle, useConstructor} from '../../../constants/functions';
+import { PAGINATE_BY, navigateToArticle, navigateToListViewPage, useConstructor } from '../../../constants/functions';
 import fonts from '../../../constants/fonts';
 import colors from '../../../constants/colors';
 import ImageBGCard from '../../molecules/Cards/ImageBGCard';
@@ -12,8 +12,8 @@ import {
   screenWidth,
 } from '../../../constants/metrics';
 import SectionHeader from '../../molecules/Header/SectionHeader';
-import {ThemeContext} from '../../../context/theme.context';
-import {getTrendingNews} from '../../../api/data';
+import { ThemeContext } from '../../../context/theme.context';
+import { getTrendingNews } from '../../../api/data';
 import LoadingScreen from './LoadingScreen';
 
 
@@ -21,8 +21,6 @@ import LoadingScreen from './LoadingScreen';
 // import {Q} from '@nozbe/watermelondb';
 // import withObservables from '@nozbe/with-observables';
 
-const ITEM_WIDTH = Math.round(screenWidth * 1);
-const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3));
 
 /*
    Enhanced News Card
@@ -33,6 +31,10 @@ const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3));
 // }))(ImageBGCard);
 
 const TrendingSection = props => {
+
+  const ITEM_WIDTH = Math.round(screenWidth * 1);
+  const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3.5));
+
   const {
     navigation
   } = props
@@ -53,7 +55,7 @@ const TrendingSection = props => {
     getTrendingNews()
       .then(res => {
         console.log(res.data)
-        setPosts(res.data.body.results.slice(0,PAGINATE_BY));
+        setPosts(res.data.body.results.slice(0, PAGINATE_BY));
         setLoading(false)
       })
       .catch(error => console.log(error));
@@ -101,7 +103,7 @@ const TrendingSection = props => {
   return (
     <View>
       {/* <SectionHeader label={"Recent News"} /> */}
-      <SectionHeader label={'Trending'} />
+      <SectionHeader label={'Trending'} onPress={() => navigateToListViewPage(navigation,"normal","Trending")}/>
       <View style={styles.recentCardContainer}>
         {isLoading === true ? (
           <LoadingScreen containerHeight={ITEM_HEIGHT} containerWidth={ITEM_WIDTH} />
@@ -120,13 +122,13 @@ const TrendingSection = props => {
               parallaxScrollingOffset: 1,
             }}
             onSnapToItem={index => updateCurrentIndex(index)}
-            renderItem={({index, item}) => (
-              <View style={{paddingHorizontal: 16}}>
+            renderItem={({ index, item }) => (
+              <View style={{ paddingHorizontal: 16 }}>
                 <ImageBGCard
-                  image={{uri: item.articles[0].cover_image}}
+                  image={{ uri: item.articles[0].cover_image }}
                   author={item.articles[0].author}
                   headline={item.articles[0].title}
-                  onPress={() => navigateToArticle(navigation,item.articles[0].id, item.articles[0].slug)}
+                  onPress={() => navigateToArticle(navigation, item.articles[0].id, item.articles[0].slug)}
                 />
               </View>
             )}

src/constants/functions.js

@@ -107,3 +107,8 @@ export const validateEmail = (email) => {
 export const navigateToArticle = (navigation,article_id,article_slug) => {
     navigation.push("NewsDetailPage",{slug: article_slug, id: article_id})
   }
+
+
+export const navigateToListViewPage = (navigation,topic_type,topic) => {
+    navigation.navigate("NewsListPage", {type: topic_type, title: topic })
+}

src/constants/metrics.js

@@ -1,6 +1,6 @@
 import { Dimensions, useWindowDimensions } from 'react-native';
 
-const { width, height } = Dimensions.get('screen');
+const { width, height } = Dimensions.get('window');
 
 const guidelineBaseWidth = 375;
 const guidelineBaseHeight = 812;

src/navigation/HomePageNavigator.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { getScreenType } from '../constants/functions';
@@ -10,6 +10,7 @@ import BookmarkNavigator from './BookmarkNavigator';
 import ProfileNavigator from './ProfileNavigator';
 import { horizontalScale, verticalScale } from '../constants/metrics';
 import IonIcon from 'react-native-vector-icons/Ionicons'
+import { ThemeContext } from '../context/theme.context';
 
 const Drawer = createDrawerNavigator();
 const Tab = createBottomTabNavigator();
@@ -25,7 +26,7 @@ const HomePageNavigator = () => {
             initialRouteName="HomePage"
             screenOptions={{
                 drawerType: 'front',
-                drawerStyle: getScreenType === "Mobile" ? { width: '100%' } : {width: '100%'},
+                drawerStyle: getScreenType === "Mobile" ? { width: '100%' } : { width: '100%' },
             }}
             drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
             <Drawer.Screen name="HomePageTabs" component={HomePageTabsNavigator} options={(navigation) => ({
@@ -37,11 +38,18 @@ const HomePageNavigator = () => {
 }
 
 const HomePageTabsNavigator = ({ route, navigation }) => {
+    
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
     return (
         <Tab.Navigator
             screenOptions={({ route }) => ({
                 tabBarItemStyle: { paddingHorizontal: horizontalScale(36), flex: 0 },
-                tabBarStyle: { backgroundColor: colors().dominant_variant,height: verticalScale(64), alignItems: 'center'},
+                tabBarStyle: { 
+                    backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
+                    height: verticalScale(64),
+                    alignItems: 'center' 
+                },
                 tabBarShowLabel: false,
                 tabBarIcon: ({ focused, color, size }) => {
                     let iconName;
@@ -75,23 +83,23 @@ const HomePageTabsNavigator = ({ route, navigation }) => {
             <Tab.Screen
                 name="MainNav"
                 component={MainPageNavigator}
-                options={(navigation) => ({ ...defaultScreenOptions })} 
-                />
+                options={(navigation) => ({ ...defaultScreenOptions })}
+            />
             <Tab.Screen
                 name="SearchNav"
                 component={SearchNavigator}
-                options={(navigation) => ({ ...defaultScreenOptions })} 
-                />
+                options={(navigation) => ({ ...defaultScreenOptions })}
+            />
             <Tab.Screen
                 name="BookmarkNav"
                 component={BookmarkNavigator}
                 options={(navigation) => ({ ...defaultScreenOptions })}
-                />
+            />
             <Tab.Screen
                 name="ProfileNav"
                 component={ProfileNavigator}
                 options={(navigation) => ({ ...defaultScreenOptions })}
-                />
+            />
         </Tab.Navigator>
 
     )

src/screens/News/NewsDetailPage.js

@@ -7,7 +7,7 @@ import {
   Image,
   Linking,
 } from 'react-native';
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import colors from '../../constants/colors';
@@ -41,10 +41,12 @@ import ButtonWrapper from '../../components/atoms/Buttons/ButtonWrapper';
 import images from '../../assets/images/images';
 import SectionHeader from '../../components/molecules/Header/SectionHeader';
 import VerticalNewsCard from '../../components/molecules/Cards/VerticalNewsCard';
+import { TextInput } from 'react-native-paper';
+import FormTextInput from '../../components/atoms/Input/FormTextInput';
 
 const NewsDetailPage = props => {
-  const {navigation, route} = props;
-  const {id, slug} = route.params;
+  const { navigation, route } = props;
+  const { id, slug } = route.params;
 
   const [isLoading, setLoading] = React.useState(true);
   const [article, setArticle] = React.useState({});
@@ -99,8 +101,8 @@ const NewsDetailPage = props => {
   });
 
   const styles = StyleSheet.create({
-    container: {backgroundColor: colors().dominant, minHeight: '100%'},
-    newsContainer: {paddingHorizontal: horizontalScale(16)},
+    container: { backgroundColor: colors().dominant, minHeight: '100%' },
+    newsContainer: { paddingHorizontal: horizontalScale(16) },
     newsTitle: {
       fontFamily: fonts.type.semibold,
       color: colors().recessive,
@@ -155,12 +157,17 @@ const NewsDetailPage = props => {
       width: 42,
       borderRadius: 32,
       marginRight: horizontalScale(16),
+      marginVertical: verticalScale(8),
+      backgroundColor: colors().primaryColor
     },
     commentInput: {
-      paddingVertical: verticalScale(16),
-      alignItems: 'center',
-      justifyContent: 'flex-start',
+      marginVertical: verticalScale(16),
+      alignItems:'stretch',
+      // backgroundColor: colors().black_variant,
       flexDirection: 'row',
+      flex: 1
+      // paddingVertical: verticalScale(16)
+      // width:'100%'
     },
     utilButtons: {
       flexDirection: 'row',
@@ -222,7 +229,7 @@ const NewsDetailPage = props => {
               <Text style={styles.newsDescriptor}>{article.source}</Text>
             </View>
             <View style={styles.imagesContainer}>
-              <Image source={{uri: article.cover_image}} style={styles.image} />
+              <Image source={{ uri: article.cover_image }} style={styles.image} />
             </View>
             <View style={styles.utilButtons}>
               <TouchableWithoutFeedback onPress={handlePresentModalPress}>
@@ -237,7 +244,7 @@ const NewsDetailPage = props => {
                   </Text>
                 </View>
               </TouchableWithoutFeedback>
-              <View style={{flexDirection: 'row'}}>
+              <View style={{ flexDirection: 'row' }}>
                 <BookmarkButton
                   buttonStyle={styles.buttonStyle}
                   iconSize={20}
@@ -273,8 +280,8 @@ const NewsDetailPage = props => {
                   minHeight: '100%',
                 }}
                 handleStyle={{
-                  backgroundColor: colors().dominant_variant,
-                  
+                  backgroundColor: colors().dominant,
+
                 }}>
                 <BottomSheetScrollView>
                   <BottomSheetView
@@ -298,13 +305,44 @@ const NewsDetailPage = props => {
                         />
                       </ButtonWrapper>
                     </BottomSheetView>
-                    <View style={styles.commentInput}>
+                    <BottomSheetView style={styles.commentInput}>
                       <Image
                         source={images.imageCard}
                         style={[styles.profileImage]}
                       />
-                      <Text>Comment Text Input</Text>
-                    </View>
+                      {/* <View style={{}}> */}
+                        <TextInput
+                          multiline
+                          mode="outlined"
+                          placeholder='Add your Comment Here'
+                          placeholderTextColor={colors().grayShade_400}
+                          dense
+                          style={{
+                            backgroundColor: colors().dominant,
+                            height: verticalScale(64),
+                            // justifyContent:'',
+                            flexGrow: 1
+                          
+                          }}
+                          contentStyle={{
+                            color: colors().recessive,
+                            fontFamily: fonts.type.regular,
+                            fontSize: moderateScale(16),
+                            
+                          }}
+                          outlineStyle={{
+                            borderRadius: moderateScale(16),
+                            borderColor: colors().secondaryColor
+                           
+
+                            // borderColor: colors().dominant,
+                          }}
+                          cursorColor={colors().primaryColor}
+                        />
+                        {/* <FormTextInput/> */}
+                      {/* </View> */}
+
+                    </BottomSheetView>
                     <>
                       <Text
                         style={{
@@ -315,7 +353,7 @@ const NewsDetailPage = props => {
                         View all Comments({comments.results.length})
                       </Text>
                     </>
-                    <BottomSheetView style={{gap: moderateScale(16)}}>
+                    <BottomSheetView style={{ gap: moderateScale(16) }}>
                       {comments.results.length <= 0 ? (
                         <LoadingScreen />
                       ) : (
@@ -332,11 +370,11 @@ const NewsDetailPage = props => {
         <ScrollView
           horizontal
           contentContainerStyle={styles.recommendationContainer}
-          style={{flexDirection: 'row'}}
+          style={{ flexDirection: 'row' }}
           showsHorizontalScrollIndicator={false}>
           {recommendations.map(item => (
             <VerticalNewsCard
-              image={{uri: item.cover_image}}
+              image={{ uri: item.cover_image }}
               headline={item.title}
               onPress={() => navigateToArticle(navigation, item.id, item.slug)}
             />

src/screens/News/NewsListPage.js

@@ -1,19 +1,156 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { FlatList, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
-
+import { navigateToArticle, useConstructor } from '../../constants/functions'
+import { getArticlesByCategory, getTrendingNews } from '../../api/data'
+import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
+import colors from '../../constants/colors'
+import OctiIcon from 'react-native-vector-icons/Octicons'
+import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
+import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
 const NewsListPage = props => {
+
+  const {
+    navigation,
+    route
+  } = props
+
+  const {
+    type,
+    title
+  } = route.params
+
+  const fetchNews = (title,page = 1) => {
+    getArticlesByCategory(title,page)
+      .then(res => {
+        setNews(prev => [...prev, ...res.data.body.results])
+      }).catch(err => console.error(err))
+  }
+
+  const fetchTrendingNews = () => {
+    getTrendingNews()
+      .then(res => {
+        setNews(prev => [...prev, ...res.data.body.results.map(item => item.articles[0])])
+      }).catch(err => console.error(err))
+  }
+  const [headerName, setHeaderName] = React.useState("")
+  const [news, setNews] = React.useState([])
+  const [pagesLoaded, setPagesLoaded] = React.useState(0)
+
+  const initializeNews = () => {
+    
+    if (type === "normal") {
+      setHeaderName(title)
+      switch (title) {
+        case "Trending":
+          fetchTrendingNews()
+          setPagesLoaded(1)
+          break;
+        case "Bookmark":
+          break
+        default:
+          break;
+      }
+    } else if (type === "category") {
+      setHeaderName(title)
+      fetchNews(title,1)
+      setPagesLoaded(1)
+    }
+   
+  } 
+
+  //FlatList Optimizations
+
+  const renderItem = (news) => {
+    let newsItem = news.item; return <HorizontalNewsCardVariant
+      onPress={() => navigateToArticle(navigation, newsItem.id, newsItem.slug)}
+      timestamp={newsItem.published_on}
+      headline={newsItem.title}
+      image={{ uri: newsItem.cover_image }}
+      category={newsItem.category}
+      tagline={newsItem.id}
+    />
+  }
+
+  const keyExtractor = (item) => news.indexOf(item)
+
+  const scrollPagination = () => {
+
+    
+    if (type === "normal") {
+      setHeaderName(title)
+      switch (title) {
+        case "Trending":
+          fetchTrendingNews()
+          break;
+        case "Bookmark":
+          break
+        default:
+          break;
+      }
+    } else if (type === "category") {
+      setHeaderName(title)
+      fetchNews(title,pagesLoaded + 1)
+      setPagesLoaded(pagesLoaded + 1)
+    }
+    console.log(pagesLoaded)
+    console.log(news.length)
+  }
+
+  useConstructor(() => {
+    scrollPagination()
+  })
+
+
+
+  const styles = StyleSheet.create({
+    pageContainer: {
+      backgroundColor: colors().dominant
+    },
+    newsContainer: {
+      backgroundColor: colors().dominant,
+      minHeight: "100%",
+      height: 'auto',
+      paddingHorizontal: horizontalScale(16),
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: horizontalScale(16),
+      paddingVertical: verticalScale(16),
+      numColumns: 2
+
+    }
+  })
+
   
-    const {
-        navigation,
-        route
-    } = props
-    return (
-    <View>
-      <Text>NewsListPage</Text>
+
+  return (
+    <View style={styles.pageContainer}>
+      <NewscoutCenteredTitleHeader title={headerName} backButtonShown={true} onBackClick={() => navigation.goBack()}>
+        <TouchableWithoutFeedback onPress={() => { navigation.toggleDrawer() }}>
+          <OctiIcon name='three-bars' size={24} color={colors().primaryColor} />
+        </TouchableWithoutFeedback>
+      </NewscoutCenteredTitleHeader>
+      {
+        news.length <= 0 ?
+          <LoadingScreen />
+          :
+
+          <FlatList
+            contentContainerStyle={styles.newsContainer}
+            showsVerticalScrollIndicator={false}
+            data={news}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            onEndReached={scrollPagination}
+            onEndReachedThreshold={200}
+          />
+
+
+
+      }
     </View>
   )
 }
 
 export default NewsListPage
 
-const styles = StyleSheet.create({})

src/screens/Sidebar/SidebarPage.js

@@ -7,6 +7,7 @@ import {
   View,
   ScrollView,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 import React from 'react';
 import { List } from 'react-native-paper';
@@ -17,6 +18,9 @@ import fonts from '../../constants/fonts';
 import CircularPrimaryBackButton from '../../components/atoms/Buttons/CircularPrimaryBackButton';
 import colors from '../../constants/colors';
 import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader';
+import { navigateToListViewPage, useConstructor } from '../../constants/functions';
+import { getArticlesByCategory, getCategories } from '../../api/data';
+import { BASE_URL } from '../../api/urls';
 
 const data = [
   {
@@ -53,17 +57,9 @@ const data = [
 
 const SidebarPage = ({ navigation, route }) => {
 
-  const navigateToCategoryPage = (topic) => {
-    navigation.navigate("CategoryPage", { category: topic })
-  }
-
-  // if (
-  //   Platform.OS === 'android' &&
-  //   UIManager.setLayoutAnimationEnabledExperimental
-  // ) {
-  //   UIManager.setLayoutAnimationEnabledExperimental(true);
-  // }
+  const [data, setData] = React.useState([])
 
+  
 
   const [expandedId, setExpandedId] = React.useState('');
 
@@ -71,6 +67,17 @@ const SidebarPage = ({ navigation, route }) => {
     setExpandedId(accordionId === expandedId ? '' : accordionId);
   };
 
+  const fetchMenus = () => {
+    getCategories().then(res => {
+      setData(res.data.body.results)
+    }).catch(err => console.error(err))
+      .finally(() => console.log("Fetch Sidebar Categories Executed"))
+  }
+
+  useConstructor(() => {
+    fetchMenus()
+  })
+
   const styles = StyleSheet.create({
     sideBarContainer: {
       paddingHorizontal: horizontalScale(24),
@@ -85,12 +92,12 @@ const SidebarPage = ({ navigation, route }) => {
       justifyContent: 'center',
       alignItems: 'center',
     },
-    buttonContainer: {paddingVertical: verticalScale(8)},
+    buttonContainer: { paddingVertical: verticalScale(8) },
     accordionContainer: {
       paddingVertical: verticalScale(16),
       gap: moderateScale(8),
       height: '100%'
-      
+
     },
     accordionStyle: {
       backgroundColor: colors().dominant_variant,
@@ -112,21 +119,21 @@ const SidebarPage = ({ navigation, route }) => {
 
   return (
     <View >
-       <ScrollView style={{backgroundColor: colors().dominant, minHeight: '100%'}} showsVerticalScrollIndicator={false}>
-      <NewscoutHomeHeader />
-      <View style={styles.sideBarContainer}>
+      <ScrollView style={{ backgroundColor: colors().dominant, minHeight: '100%' }} showsVerticalScrollIndicator={false}>
+        <NewscoutHomeHeader />
+        <View style={styles.sideBarContainer}>
+
+          <View style={styles.buttonContainer}>
+            <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
+          </View>
 
-        <View style={styles.buttonContainer}>
-          <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
-        </View>
 
-       
           <View style={styles.accordionContainer}>
             <List.AccordionGroup
               expandedId={expandedId}
               onAccordionPress={handleAccordionPress}>
               {data.map(item => {
-                let acc_check = item.title.toLowerCase();
+                let acc_check = item.heading.name.toLowerCase();
                 return (
                   <List.Accordion
                     key={acc_check}
@@ -157,12 +164,23 @@ const SidebarPage = ({ navigation, route }) => {
                     }}
                     left={() => (
                       <View style={{ paddingLeft: 16 }}>
-                        <EntypoIcon
+                        {/* <EntypoIcon
                           name={item.icon}
                           size={24}
                           color={
                             acc_check === expandedId ? colors().white : colors().recessive
                           }
+                        /> */}
+                        <Image
+                          source={{ uri: BASE_URL + "/" + item.heading.icon }}
+                          style={{ 
+                            height: 24,
+                            width: 24,
+                            tintColor: 
+                              acc_check === expandedId ?
+                              colors().white : 
+                              colors().recessive 
+                            }}
                         />
                       </View>
                     )}
@@ -177,16 +195,23 @@ const SidebarPage = ({ navigation, route }) => {
                         }
                       />
                     )}
-                    title={item.title}>
-                    {item.subTitles.map(subTitle => (
-                      <TouchableOpacity onPress={() => navigateToCategoryPage(subTitle)}>
+                    title={item.heading.name}>
+                    {item.heading.submenu.map(subTitle => (
+                      <TouchableOpacity 
+                        onPress={
+                          () => {
+                            navigation.toggleDrawer()
+                            navigateToListViewPage(navigation,"category",subTitle.name)
+                            
+                        }}
+                      >
                         <List.Item
-                          key={`${item.title}_${subTitle}`}
+                          key={`${item.title}_${subTitle.name}`}
                           // key={`${item.title}_${item.subTitles.indexOf(subTitle)}`}
                           //key={`Sidebar_${item.title}_${item.subTitles.indexOf(subTitle)}`}
                           style={styles.accordionItemStyle}
                           titleStyle={styles.accordionItemTextStyle}
-                          title={subTitle}
+                          title={subTitle.name}
                         />
                       </TouchableOpacity>
                     ))}
@@ -195,8 +220,8 @@ const SidebarPage = ({ navigation, route }) => {
               })}
             </List.AccordionGroup>
           </View>
-        
-      </View>
+
+        </View>
       </ScrollView>
     </View>
   );