UI Fixes

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -65,7 +65,7 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
     headline: {
       fontFamily: fonts.type.semibold,
       fontSize: moderateScale(15),
-      color : colors().recessive
+      color : colors().recessive,
 
     },
     tagline: {
@@ -109,7 +109,7 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
 
 
   return (
-    <TouchableOpacity onPress={onPress}>
+    // <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.cardContainer}>
         <View style={styles.topSection}>
           <View style={styles.textContainer}>
@@ -133,7 +133,7 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
           </View>
         </View>
       </View>
-    </TouchableOpacity>
+    // </TouchableWithoutFeedback>
   )
 }
 

src/components/molecules/Header/SectionHeader.js

@@ -8,47 +8,47 @@ import fonts from '../../../constants/fonts'
 import { ThemeContext } from '../../../context/theme.context'
 
 
-const SectionHeader = ({ label, onPress }) => {
+const SectionHeader = ({ label, onPress, isButtonShown }) => {
   const theme = useContext(ThemeContext)
   const currentTheme = theme.state.theme
   const styles = StyleSheet.create({
     recentHeader: {
-        paddingHorizontal: horizontalScale(16),
-        // backgroundColor: colors().dominant,
-        elevation: 0
-      },
-      recentHeaderText: {
-        fontFamily: fonts.type.semibold,
-        fontSize: moderateScale(16),
-        color: colors().recessive
-      },
-      seeAllText: {
-        fontFamily: fonts.type.semibold,
-        color: colors().primaryColor,
-        paddingRight: horizontalScale(16),
-        alignSelf: 'stretch'
-    
-      },
-      recentHeaderIcon: {
-    
-      },
-      recentCardContainer: {
-        flexDirection: 'column',
-        paddingHorizontal: horizontalScale(16),
-        overflow: 'hidden'
-      },
-})
-    return (
-        <Header headerStyle={styles.recentHeader}
-          backIconTextComponent={<Text style={styles.recentHeaderText}>{label}</Text>}
-        >
-            
-            <TouchableOpacity onPress={onPress} style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-                <Text style={styles.seeAllText}>See All</Text>
-                <List.Icon style={styles.recentHeaderIcon} icon="arrow-right" color={colors().primaryColor} />
-            </TouchableOpacity>
-        </Header>
-    )
+      paddingHorizontal: horizontalScale(16),
+      // backgroundColor: colors().dominant,
+      elevation: 0
+    },
+    recentHeaderText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      color: colors().recessive
+    },
+    seeAllText: {
+      fontFamily: fonts.type.semibold,
+      color: colors().primaryColor,
+      paddingRight: horizontalScale(16),
+      alignSelf: 'stretch'
+
+    },
+    recentHeaderIcon: {
+
+    },
+    recentCardContainer: {
+      flexDirection: 'column',
+      paddingHorizontal: horizontalScale(16),
+      overflow: 'hidden'
+    },
+  })
+  return (
+    <Header headerStyle={styles.recentHeader}
+      backIconTextComponent={<Text style={styles.recentHeaderText}>{label}</Text>}
+    >
+
+      {isButtonShown ?? <TouchableOpacity onPress={onPress} style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
+        <Text style={styles.seeAllText}>See All</Text>
+        <List.Icon style={styles.recentHeaderIcon} icon="arrow-right" color={colors().primaryColor} />
+      </TouchableOpacity>}
+    </Header>
+  )
 }
 
 export default SectionHeader

src/components/organisms/Sections/CategorySection.js

@@ -1,6 +1,6 @@
-import {StyleSheet, Text, View, ScrollView} from 'react-native';
-import React, {useContext, useEffect} from 'react';
-import {ToggleButton} from 'react-native-paper';
+import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { ToggleButton } from 'react-native-paper';
 import fonts from '../../../constants/fonts';
 import colors from '../../../constants/colors';
 import HorizontalNewsCardVariant from '../../molecules/Cards/HorizontalNewsCardVariant';
@@ -17,19 +17,19 @@ import {
   moderateScale,
   verticalScale,
 } from '../../../constants/metrics';
-import {ThemeContext} from '../../../context/theme.context';
-import {getArticlesByCategory, getCategories} from '../../../api/data';
+import { ThemeContext } from '../../../context/theme.context';
+import { getArticlesByCategory, getCategories } from '../../../api/data';
 import LoadingScreen from './LoadingScreen';
 import { NEWSCOUT_NEWS_URL, PAGINATE_BY } from '../../../api/urls';
 
 
-const CategorySection = ({navigation}) => {
+const CategorySection = ({ navigation }) => {
   const theme = useContext(ThemeContext);
   const currentTheme = theme.state.theme;
 
   const [isLoading, setLoading] = React.useState(true);
 
-  const [news, setNews] = React.useState({all: []});
+  const [news, setNews] = React.useState({ all: [] });
   const updateNewsByCategories = (key, value) => {
     setNews(prevObject => ({
       ...prevObject,
@@ -47,11 +47,11 @@ const CategorySection = ({navigation}) => {
         setCategories(categoryData);
         setNews(
           categoryData.reduce(
-            (result, key) => ({...result, [key.heading.name]: []}),
+            (result, key) => ({ ...result, [key.heading.name]: [] }),
             {},
           ),
         )
-       
+
         return categoryData
       }).then(categoryData => {
         categoryData.forEach((category) => fetchNews(category.heading.name))
@@ -68,7 +68,7 @@ const CategorySection = ({navigation}) => {
     getArticlesByCategory(category)
       .then(res => {
         console.log(`Fetch News Trial : ${res.data.body.results}`)
-        updateNewsByCategories(category, res.data.body.results.slice(0,PAGINATE_BY))
+        updateNewsByCategories(category, res.data.body.results.slice(0, PAGINATE_BY))
       })
       .catch(err => console.error(`Fetch News : ${err}`))
       .finally(() => console.log('Fetch News Executed'));
@@ -133,70 +133,70 @@ const CategorySection = ({navigation}) => {
   });
 
   return (
-    <View style={styles.categoriesContainer}>
-      <SectionHeader label={'Categories'} onPress={() => navigateToListViewPage(navigation,"category",categoryValue)}/>
+    <View>
+      <SectionHeader label={'Categories'} onPress={() => navigateToListViewPage(navigation, "category", categoryValue)} />
       {isLoading === true ? (
         <LoadingScreen containerHeight={240} />
       ) : (
         <>
-          <View style={styles.categoriesPillContainer}>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-              <ToggleButton.Group
-                onValueChange={value => {
-                  setCategoryValue(value)
-                }}>
-                {categories.map(category => (
-                  <ToggleButton
-                    key={category.heading.name}
-                    icon={() => (
-                      <Text
-                        style={[
-                          category.heading.name === categoryValue
-                            ? styles.selectedPillText
-                            : styles.pillText,
-                        ]}>
-                        {category.heading.name}
-                      </Text>
-                    )}
-                    style={[
-                      category.heading.name === categoryValue
-                        ? styles.selectedContainer
-                        : styles.container,
-                      {marginHorizontal: horizontalScale(4)},
-                    ]}
-                    value={category.heading.name}
-                  />
-                ))}
-              </ToggleButton.Group>
-            </ScrollView>
-          </View>
+          <ScrollView horizontal contentContainerStyle={styles.categoriesPillContainer} showsHorizontalScrollIndicator={false}>
+            <ToggleButton.Group
+              onValueChange={value => {
+                setCategoryValue(value)
+              }}>
+              {categories.map(category => (
+                <ToggleButton
+                  key={category.heading.name}
+                  icon={() => (
+                    <Text
+                      style={[
+                        category.heading.name === categoryValue
+                          ? styles.selectedPillText
+                          : styles.pillText,
+                      ]}>
+                      {category.heading.name}
+                    </Text>
+                  )}
+                  style={[
+                    category.heading.name === categoryValue
+                      ? styles.selectedContainer
+                      : styles.container,
+                    { marginHorizontal: horizontalScale(4) },
+                  ]}
+                  value={category.heading.name}
+                />
+              ))}
+            </ToggleButton.Group>
+          </ScrollView>
           <View>
-            <ScrollView showsVerticalScrollIndicator={false}>
-              <View style={styles.categoriesNewsContainer}>
-                {news[categoryValue] !== undefined ? (
-                  news[categoryValue].map(item => (
-                    <HorizontalNewsCardVariant
-                      headline={item.title}
-                      image={{uri: item.cover_image}}
-                      timestamp={item.published_on}
-                      tagline={""}
-                      onPress={() =>
-                        navigateToArticle(navigation, item.id, item.slug)
-                      }
-                      onSharePress={() => {
-                        onShare({
+            <ScrollView contentContainerStyle={styles.categoriesNewsContainer} showsVerticalScrollIndicator={false}>
+
+              {news[categoryValue] !== undefined ? 
+                <FlatList
+                data={news[categoryValue]}
+                renderItem={newsObject => 
+                  <HorizontalNewsCardVariant
+                    headline={newsObject.item.title}
+                    image={{ uri: newsObject.item.cover_image }}
+                    timestamp={newsObject.item.published_on}
+                    tagline={""}
+                    onPress={() =>
+                      navigateToArticle(navigation, newsObject.item.id, newsObject.item.slug)
+                    }
+                    onSharePress={() => {
+                      onShare({
                         title: "Newscout",
                         message: "Check out unbiased news in Newscout",
-                        url: NEWSCOUT_NEWS_URL(item.slug),
+                        url: NEWSCOUT_NEWS_URL(newsObject.item.slug),
                       }).catch(err => console.error(err))
-                      .finally(() => console.log("Share Link Button"))
+                        .finally(() => console.log("Share Link Button"))
                     }}
-                    />
-                  ))
-                ) : (
-                  <LoadingScreen containerHeight={240}/>
-                )}
-              </View>
+                  />}
+
+              /> : (
+                <LoadingScreen containerHeight={240} />
+              )}
+
             </ScrollView>
           </View>
         </>

src/navigation/MainPageNavigator.jsx

@@ -1,4 +1,4 @@
-import { View, Text} from 'react-native';
+import { View, Text, TouchableWithoutFeedback} from 'react-native';
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import SearchPage from '../screens/Search/SearchPage';
@@ -6,7 +6,11 @@ import HomePage from '../screens/HomePage/HomePage';
 import NotificationPage from '../screens/Notifications/NotificationPage';
 import NewsDetailPage from '../screens/News/NewsDetailPage';
 import NewsListPage from '../screens/News/NewsListPage';
-
+import NewscoutHomeHeader from '../components/molecules/Header/NewscoutHomeHeader';
+import colors from '../constants/colors';
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import OctiIcon from 'react-native-vector-icons/Octicons'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 
 const Stack = createNativeStackNavigator();
 
@@ -22,12 +26,32 @@ const MainPageNavigator = () => {
         <Stack.Screen
             name="MainPage"
             component={HomePage}
-            options={{...defaultScreenOptions}}
+            options={{
+                header: ({navigation,route}) => <NewscoutHomeHeader
+                left={
+                  <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                    <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
+                  </TouchableWithoutFeedback>
+                }
+              >
+                <View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
+                  <TouchableWithoutFeedback onPress={() => navigation.navigate('NotificationPage')}>
+                    <MaterialIcon name='notifications-none' color={colors().secondaryColor} size={30} />
+                  </TouchableWithoutFeedback>
+                  <TouchableWithoutFeedback onPress={() => {
+                    navigation.navigate('ProfileNav', { screen: 'SettingsPage' })
+                  }}>
+                    <AntIcon name='setting' color={colors().primaryColor} size={24} />
+                  </TouchableWithoutFeedback>
+                </View>
+              </NewscoutHomeHeader>
+            }}
+            
         />
         <Stack.Screen
             name="NotificationPage"
             component={NotificationPage}
-            options={{...defaultScreenOptions}}
+            options={{header: ({route,navigation}) => {}}}
         />
         <Stack.Screen
             name="NewsDetailPage"

src/screens/HomePage/HomePage.js

@@ -13,34 +13,14 @@ const HomePage = props => {
   const { navigation, route } = props
 
   return (
+    <View>
+      <ScrollView contentContainerStyle={{ backgroundColor: colors().dominant }} showsHorizontalScrollIndicator={false}>
+        <TrendingSection navigation={navigation} />
+        <CategorySection navigation={navigation} />
+        <RecentPostsSection navigation={navigation} />
+      </ScrollView>
+    </View>
 
-    <ScrollView contentContainerStyle={{ backgroundColor: colors().dominant }} showsHorizontalScrollIndicator={false}>
-      <View>
-        <NewscoutHomeHeader
-          left={
-            <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
-              <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
-            </TouchableWithoutFeedback>
-          }
-        >
-          <View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
-            <TouchableWithoutFeedback onPress={() => navigation.navigate('NotificationPage')}>
-              <MaterialIcon name='notifications-none' color={colors().secondaryColor} size={30} />
-            </TouchableWithoutFeedback>
-            <TouchableWithoutFeedback onPress={() => {
-                navigation.navigate('ProfilePage')
-                navigation.navigate("SettingsPage")
-                }}>
-              <AntIcon name='setting' color={colors().primaryColor} size={24} />
-            </TouchableWithoutFeedback>
-          </View>
-        </NewscoutHomeHeader>
-      </View>
-
-      <TrendingSection navigation={navigation} />
-      <CategorySection navigation={navigation} />
-      <RecentPostsSection navigation={navigation} />
-    </ScrollView>
   )
 }
 

src/screens/News/NewsDetailPage.js

@@ -173,11 +173,8 @@ const NewsDetailPage = props => {
     commentInput: {
       marginVertical: verticalScale(16),
       alignItems: 'stretch',
-      // backgroundColor: colors().black_variant,
       flexDirection: 'row',
       flex: 1
-      // paddingVertical: verticalScale(16)
-      // width:'100%'
     },
     utilButtons: {
       flexDirection: 'row',
@@ -340,7 +337,7 @@ const NewsDetailPage = props => {
                         source={images.imageCard}
                         style={[styles.profileImage]}
                       />
-                      {/* <View style={{}}> */}
+                      
                       <TextInput
                         multiline
                         mode="outlined"
@@ -350,7 +347,7 @@ const NewsDetailPage = props => {
                         style={{
                           backgroundColor: colors().dominant,
                           height: verticalScale(64),
-                          // justifyContent:'',
+                        
                           flexGrow: 1
 
                         }}
@@ -363,15 +360,9 @@ const NewsDetailPage = props => {
                         outlineStyle={{
                           borderRadius: moderateScale(16),
                           borderColor: colors().secondaryColor
-
-
-                          // borderColor: colors().dominant,
                         }}
                         cursorColor={colors().primaryColor}
                       />
-                      {/* <FormTextInput/> */}
-                      {/* </View> */}
-
                     </BottomSheetView>
                     <>
                       <Text
@@ -396,7 +387,7 @@ const NewsDetailPage = props => {
             </>
           </View>
         )}
-        <SectionHeader label={'Recommendations'} />
+        <SectionHeader label={'Recommendations'} isButtonShown={false}/>
         <ScrollView
           horizontal
           contentContainerStyle={styles.recommendationContainer}

src/screens/Sidebar/SidebarPage.js

@@ -78,6 +78,10 @@ const SidebarPage = ({ navigation, route }) => {
     accordionItemStyle: {
       backgroundColor: colors().dominant
     },
+    accordionItemTextStyle: {
+      color: colors().recessive,
+      fontFamily: fonts.type.regular
+    },
 
   });
 
@@ -113,7 +117,7 @@ const SidebarPage = ({ navigation, route }) => {
                   <List.Accordion
                     key={acc_check}
                     id={acc_check}
-
+                    theme={{colors:{background: colors().dominant}}}
                     style={[
                       styles.accordionStyle,
                       acc_check === expandedId && {
@@ -129,15 +133,7 @@ const SidebarPage = ({ navigation, route }) => {
                         fontFamily: fonts.type.semibold,
                       },
                     ]}
-                    onPress={() => {
-                      // setExpandedsetIsShowingText(!isShowingText);
-                      // LayoutAnimation.configureNext(
-                      //   LayoutAnimation.Presets.easeInEaseOut,
-                      // )
-                      // const nextState = { ...isExpanded };
-                      // nextState[item.title] = !nextState[item.title];
-                      //console.log("set state changes");
-                    }}
+                    onPress={() => {}}
                     left={() => (
                       <View style={{ paddingLeft: 16 }}>
                         <Image
@@ -158,7 +154,7 @@ const SidebarPage = ({ navigation, route }) => {
                         name={
                           acc_check === expandedId ? 'chevron-up' : 'chevron-down'
                         }
-                        size={12}
+                        size={moderateScale(16)}
                         color={
                           acc_check === expandedId ? colors().white : colors().recessive
                         }