src/components/atoms/Header/Header.js

@@ -23,10 +23,10 @@ const Header = ({ headerStyle, children, backButtonShown, onBackClick, backIconT
   return (
     <View style={[styles.headerContainer, headerStyle]}>
 
-      <View style={{ flexDirection: 'row', gap: horizontalScale(4), alignItems:'center' }}>
-        <TouchableOpacity onPress={onBackClick}>
-          {backButtonShown === true && backButtonShown !== undefined ? <FeatherIcon name='chevron-left' size={24} color={colors().recessive} /> : <></>}
-        </TouchableOpacity>
+      <View style={{ flexDirection: 'row', gap: horizontalScale(4), alignItems: 'center' }}>
+        {backButtonShown === true && backButtonShown !== undefined ? <TouchableOpacity style={{ paddingHorizontal: horizontalScale(8) }} onPress={onBackClick}>
+          <FeatherIcon name='chevron-left' size={24} color={colors().recessive} />
+        </TouchableOpacity> : <></>}
         {backIconTextComponent}
       </View>
       {children}

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -100,21 +100,16 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
       padding: moderateScale(8),
       width: 64,
       justifyContent: 'space-between'
-      //  padding:0
-      // alignItems: 'flex-start',
-      // justifyContent: 'flex-end',
-      // backgroundColor: colors.black
     }
   })
 
 
   return (
-    // <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.cardContainer}>
         <View style={styles.topSection}>
           <View style={styles.textContainer}>
             <TouchableWithoutFeedback onPress={onPress}>
-              <Text style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
+              <Text numberOfLines={4} style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
             </TouchableWithoutFeedback>
           </View>
           <View style={styles.imageContainer}>
@@ -133,7 +128,6 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
           </View>
         </View>
       </View>
-    // </TouchableWithoutFeedback>
   )
 }
 

src/components/molecules/Cards/ImageBGCard.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, ImageBackground, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, ImageBackground, Pressable } from 'react-native'
 import React from 'react'
 import LinearGradient from 'react-native-linear-gradient'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
@@ -34,7 +34,7 @@ const ImageBGCard = ({image, author, headline, onPress, }) => {
   })
 
   return (
-    <TouchableOpacity onPress={onPress}>
+    <Pressable onPress={onPress}>
       <ImageBackground source={image}
         imageStyle={{ borderRadius: moderateScale(8), }}
         style={styles.cardImage}
@@ -52,7 +52,7 @@ const ImageBGCard = ({image, author, headline, onPress, }) => {
         </LinearGradient>
       </ImageBackground>
 
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

src/components/molecules/Cards/VerticalNewsCard.js

@@ -45,22 +45,10 @@ const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress
             fontSize: moderateScale(13),
             color: colors().recessive,
             paddingBottom: 4,
-            // width: '100%'
         },
-        // tagline: {
-        //     fontSize: 12,
-        //     fontFamily: fonts.type.regular,
-        //     height: 'auto',
-        //     maxHeight: '25%',
-        //     overflow: 'hidden',
-        //     color: colors().recessive
-
-        // },
         descriptorContainer: {
             flexDirection: 'row',
-            // padding: moderateScale(16),
             justifyContent: 'space-between',
-            // alignItems: 'baseline'
         },
         timeDescriptor: {
             color: colors().recessive_variant,
@@ -90,8 +78,8 @@ const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress
                 </View>
                 <View style={styles.detailsContainer}>
 
-                    <Text style={styles.headline}> {headline}</Text>
-                    {/* <Text style={styles.tagline}>{tagline}</Text> */}
+                    <Text numberOfLines={4} style={styles.headline}> {headline}</Text>
+                  
 
                     <View style={styles.descriptorContainer}>
                         <Text style={styles.timeDescriptor}>{getTimestamp(timestamp)}</Text>

src/components/molecules/Header/NewscoutHomeHeader.js

@@ -14,7 +14,6 @@ const NewscoutHomeHeader = ({ children, backButtonShown, onBackClick, headerStyl
     headerLogo: {
       height: moderateScale(64),
       width: moderateScale(64),
-      marginLeft: backButtonShown ? horizontalScale(16) : 0 
     },
     header:{
       backgroundColor: colors().dominant,

src/components/organisms/Sections/NotificationSection.js

@@ -15,8 +15,8 @@ const NotificationSection = ({ navigation, timestamp, notifications }) => {
     timestampText: {
       paddingHorizontal: horizontalScale(16),
       paddingVertical: verticalScale(8),
-      fontFamily: fonts.type.light,
-      color: colors().grayShade_400
+      fontFamily: fonts.type.regular,
+      color: colors().grayShade_200
     },
     notificationContainer: {
       backgroundColor: colors().dominant,

src/components/organisms/Sections/TrendingSection.js

@@ -32,8 +32,8 @@ const TrendingSection = props => {
 
   const [currentCardIndex, setCurrentCardIndex] = React.useState(0);
   const updateCurrentIndex = index => {
-    console.log('current index:', index);
     setCurrentCardIndex(index);
+    console.log('current index:', index);
   };
 
   const [posts, setPosts] = React.useState([]);
@@ -91,7 +91,7 @@ const TrendingSection = props => {
 
   return (
     <View>
-      <SectionHeader label={'Trending'} onPress={() => navigateToListViewPage(navigation,"normal","Trending")}/>
+      <SectionHeader label={'Trending'} onPress={() => navigateToListViewPage(navigation, "normal", "Trending")} />
       <View style={styles.recentCardContainer}>
         {isLoading === true ? (
           <LoadingScreen containerHeight={ITEM_HEIGHT} containerWidth={ITEM_WIDTH} />
@@ -103,12 +103,16 @@ const TrendingSection = props => {
             style={styles.recentCardContainer}
             autoPlay={true}
             data={posts}
-            scrollAnimationDuration={2000}
+            scrollAnimationDuration={1500}
             mode="parallax"
             modeConfig={{
               parallaxScrollingScale: 1,
               parallaxScrollingOffset: 1,
             }}
+            panGestureHandlerProps={{
+              activeOffsetX: [0, 200],
+            }}
+            pagingEnabled
             onSnapToItem={index => updateCurrentIndex(index)}
             renderItem={({ index, item }) => (
               <View style={{ paddingHorizontal: 16 }}>

src/constants/metrics.js

@@ -16,13 +16,11 @@ Use ModerateScale for font-size, borderRadius , likewise
 
 */
 
+const screenWidth =  width < height ? width : height
+const screenHeight = width < height ? height: width
 
-const screenDimensions = Dimensions.get("window")
-const screenWidth = screenDimensions.width
-const screenHeight = screenDimensions.height
-
-const horizontalScale = (size) => (width / guidelineBaseWidth) * size;
-const verticalScale = (size) => (height / guidelineBaseHeight) * size;
+const horizontalScale = (size) => (screenWidth / guidelineBaseWidth) * size;
+const verticalScale = (size) => (screenHeight / guidelineBaseHeight) * size;
 const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
 
 export { horizontalScale, verticalScale, moderateScale, screenHeight,screenWidth};

src/screens/News/NewsDetailPage.js

@@ -14,6 +14,7 @@ import colors from '../../constants/colors';
 import {
   horizontalScale,
   moderateScale,
+  screenWidth,
   verticalScale,
 } from '../../constants/metrics';
 import {
@@ -172,9 +173,10 @@ const NewsDetailPage = props => {
     },
     commentInput: {
       marginVertical: verticalScale(16),
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
       flexDirection: 'row',
-      flex: 1
+      maxWidth: '100%',
     },
     utilButtons: {
       flexDirection: 'row',
@@ -215,7 +217,7 @@ const NewsDetailPage = props => {
   return (
     <BottomSheetModalProvider>
       <ScrollView ref={mainPageRef} contentContainerStyle={styles.container}>
-        <NewscoutTitleHeader headerStyle={{elevation: 0}}
+        <NewscoutTitleHeader headerStyle={{ elevation: 0 }}
           backButtonShown
           onBackClick={() => navigation.goBack()}>
           <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
@@ -322,22 +324,22 @@ const NewsDetailPage = props => {
                           }}>
                           {comments.results.length}
                         </Text>
-                        </BottomSheetView>
-                        <ButtonWrapper onPress={handleCloseModalPress}>
-                          <IonIcon
-                            name="close-sharp"
-                            size={moderateScale(20)}
-                            color={colors().recessive}
-                          />
-                        </ButtonWrapper>
-                      
+                      </BottomSheetView>
+                      <ButtonWrapper onPress={handleCloseModalPress}>
+                        <IonIcon
+                          name="close-sharp"
+                          size={moderateScale(20)}
+                          color={colors().recessive}
+                        />
+                      </ButtonWrapper>
+
                     </BottomSheetView>
-                    <BottomSheetView style={styles.commentInput}>
+                    <View style={styles.commentInput}>
                       <Image
                         source={images.imageCard}
                         style={[styles.profileImage]}
                       />
-                      
+
                       <TextInput
                         multiline
                         mode="outlined"
@@ -346,16 +348,16 @@ const NewsDetailPage = props => {
                         dense
                         style={{
                           backgroundColor: colors().dominant,
-                          height: verticalScale(64),
-                        
-                          flexGrow: 1
+                          minHeight: verticalScale(64),
+                          maxHeight: 'auto',
+                          flex: 1,
+                          paddingVertical: verticalScale(8)
 
                         }}
                         contentStyle={{
                           color: colors().recessive,
                           fontFamily: fonts.type.regular,
                           fontSize: moderateScale(16),
-
                         }}
                         outlineStyle={{
                           borderRadius: moderateScale(16),
@@ -363,7 +365,7 @@ const NewsDetailPage = props => {
                         }}
                         cursorColor={colors().primaryColor}
                       />
-                    </BottomSheetView>
+                    </View>
                     <>
                       <Text
                         style={{
@@ -387,21 +389,21 @@ const NewsDetailPage = props => {
             </>
           </View>
         )}
-        <SectionHeader label={'Recommendations'} isButtonShown={false}/>
-        <ScrollView
-          horizontal
-          contentContainerStyle={styles.recommendationContainer}
-          style={{ flexDirection: 'row' }}
-          showsHorizontalScrollIndicator={false}>
-          {recommendations.map(item => (
-            <VerticalNewsCard
-              image={{ uri: item.cover_image }}
-              headline={item.title}
-              timestamp={item.published_on}
-              onPress={() => navigateToArticle(navigation, item.id, item.slug)}
-            />
-          ))}
-        </ScrollView>
+        {recommendations.length > 0 ? <><SectionHeader label={'Recommendations'} isButtonShown={false} />
+          <ScrollView
+            horizontal
+            contentContainerStyle={styles.recommendationContainer}
+            style={{ flexDirection: 'row' }}
+            showsHorizontalScrollIndicator={false}>
+            {recommendations.map(item => (
+              <VerticalNewsCard
+                image={{ uri: item.cover_image }}
+                headline={item.title}
+                timestamp={item.published_on}
+                onPress={() => navigateToArticle(navigation, item.id, item.slug)}
+              />
+            ))}
+          </ScrollView></> : <></>}
       </ScrollView>
     </BottomSheetModalProvider>
   );

src/screens/Notifications/NotificationPage.js

@@ -1,7 +1,7 @@
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import OctiIcon from 'react-native-vector-icons/Octicons'
 import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
 import colors from '../../constants/colors'
 import NotificationSection from '../../components/organisms/Sections/NotificationSection'
@@ -14,7 +14,7 @@ const NotificationPage = props => {
         <SafeAreaView>
             <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown={true} onBackClick={() => navigation.goBack()}>
                 <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
-                    <MaterialIcon name='list' color={colors().primaryColor} size={30} />
+                    <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
                 </TouchableWithoutFeedback>
             </NewscoutCenteredTitleHeader>
             <NotificationSection/>

src/screens/Settings/SettingsPage.js

@@ -6,143 +6,143 @@ import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitle
 import { List } from 'react-native-paper'
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 import { ThemeContext } from '../../context/theme.context'
+import { moderateScale } from '../../constants/metrics'
 
 const SettingsPage = props => {
-    const { navigation, route } = props
+  const { navigation, route } = props
 
-    const theme = useContext(ThemeContext)
-    const currentTheme = theme.state.theme
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
 
-    const listItem = [
-        {
-            id: 1,
-            title: 'Edit Profile',
-            icon: 'account',
-            navigation: () => navigation.navigate('EditProfile'),
-        },
-        {
-            id: 2,
-            title: 'Notification',
-            icon: 'bell',
-            navigation: () => navigation.navigate('Notification'),
-        },
-        {
-            id: 3,
-            title: 'Security',
-            icon: 'security',
-            navigation: () => navigation.navigate('Security'),
-        },
-        {
-            id: 4,
-            title: 'Invite Friends',
-            icon: 'account-multiple-plus',
-            navigation: () => navigation.navigate('InviteFriends'),
-        },
-        {
-            id: 5,
-            title: 'Help',
-            icon: 'chat-question',
-            navigation: () => navigation.navigate('HelpPageNav'),
-        },
-        {
-            id: 6,
-            title: 'Switch Theme',
-            icon: 'theme-light-dark',
-            navigation: () => {
-                if (currentTheme === 'dark')
-                  theme.dispatch({ type: "LIGHTMODE" });
-                else
-                  theme.dispatch({ type: "DARKMODE" });
-              }
-        },
-        {
-            id: 7,
-            title: 'Logout',
-            icon: 'logout',
-            navigation: () => true
-        },
-    ]
+  const listItem = [
+    {
+      id: 1,
+      title: 'Edit Profile',
+      icon: 'account',
+      navigation: () => navigation.navigate('EditProfile'),
+    },
+    {
+      id: 2,
+      title: 'Notification',
+      icon: 'bell',
+      navigation: () => navigation.navigate('Notification'),
+    },
+    {
+      id: 3,
+      title: 'Security',
+      icon: 'security',
+      navigation: () => navigation.navigate('Security'),
+    },
+    {
+      id: 4,
+      title: 'Invite Friends',
+      icon: 'account-multiple-plus',
+      navigation: () => navigation.navigate('InviteFriends'),
+    },
+    {
+      id: 5,
+      title: 'Help',
+      icon: 'chat-question',
+      navigation: () => navigation.navigate('HelpPageNav'),
+    },
+    {
+      id: 6,
+      title: 'Switch Theme',
+      icon: 'theme-light-dark',
+      navigation: () => {
+        if (currentTheme === 'dark')
+          theme.dispatch({ type: "LIGHTMODE" });
+        else
+          theme.dispatch({ type: "DARKMODE" });
+      }
+    },
+    {
+      id: 7,
+      title: 'Logout',
+      icon: 'logout',
+      navigation: () => true
+    },
+  ]
 
-    const styles = StyleSheet.create({
-        container: {
-          backgroundColor: colors().dominant,
-          height: '100%',
-        },
-        
-      });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors().dominant,
+      height: '100%',
+    },
 
-    return (
-        <View style={styles.container}>
-            <NewscoutTitleHeader
-                title="Settings"
-                backButtonShown={true}
-                onBackClick={() => navigation.goBack()}
-                headerStyle={{elevation: 2}}
+  });
+
+  return (
+    <View style={styles.container}>
+      <NewscoutTitleHeader
+        title="Settings"
+        backButtonShown={true}
+        onBackClick={() => navigation.goBack()}
+        headerStyle={{ elevation: 2 }}
+      />
+      <View>
+        <ScrollView>
+          {listItem.map(item => (
+            <SettingListItem
+              title={item.title}
+              key={item.id}
+              id={item.id}
+              icon={item.icon}
+              onPress={item.navigation}
             />
-            <View>
-                <ScrollView>
-                    {listItem.map(item => (
-                        <SettingListItem
-                            title={item.title}
-                            key={item.id}
-                            id={item.id}
-                            icon={item.icon}
-                            onPress={item.navigation}
-                        />
-                    ))}
-                </ScrollView>
-            </View>
+          ))}
+        </ScrollView>
+      </View>
 
 
-        </View>
-    )
+    </View>
+  )
 }
 
 const SettingListItem = props => {
-    const {title, id, icon, onPress} = props;
-    const theme = useContext(ThemeContext)
-    const currentTheme = theme.state.theme
-    const styles = StyleSheet.create({
-        listItemText: {
-            fontFamily: fonts.type.medium,
-            color: colors().recessive
-          },
-          circularIcon: {
-            backgroundColor: currentTheme === 'light' ? colors().primaryTintColor : colors().black_variant,
-            marginLeft: 20,
-            padding: 8,
-            // maxHeight:48,
-            // maxWidth: 48,
-            borderRadius: 32,
-          },
-    })
+  const { title, id, icon, onPress } = props;
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+  const styles = StyleSheet.create({
+    listItemText: {
+      fontFamily: fonts.type.medium,
+      color: colors().recessive
+    },
+    circularIcon: {
+      backgroundColor: currentTheme === 'light' ? colors().primaryTintColor : colors().black_variant,
+      marginLeft: 20,
+      padding: 8,
+      borderRadius: 32,
+    },
+  })
 
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <List.Item
-          title={title}
-          titleStyle={styles.listItemText}
-          key={id}
-          left={props => (
-            <List.Icon
-              {...props}
-              size={24}
-              style={styles.circularIcon}
-              icon={icon}
-              color={colors().primaryColor}
-            />
-          )}
-          right={props => (
-            <EntypoIcon
-              name="chevron-thin-right"
-              size={16}
-              color={colors().recessive}
-            />
-          )}
-        />
-      </TouchableOpacity>
-    );
-  };
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <List.Item
+        title={title}
+        titleStyle={styles.listItemText}
+        key={id}
+        left={props => (
+          <List.Icon
+            {...props}
+            size={24}
+            style={styles.circularIcon}
+            icon={icon}
+            color={colors().primaryColor}
+          />
+        )}
+        right={props => (
+          <View style={{justifyContent:'center'}}><EntypoIcon
+            name="chevron-thin-right"
+            size={moderateScale(16)}
+            color={colors().recessive}
+          /></View>
+        )}
+
+      />
+    </TouchableOpacity>
+  );
+};
 
 export default SettingsPage
 

src/screens/Sidebar/SidebarPage.js

@@ -102,11 +102,6 @@ const SidebarPage = ({ navigation, route }) => {
         <NewscoutHomeHeader backButtonShown={true} onBackClick={() => navigation.toggleDrawer()} />
         <View style={styles.sideBarContainer}>
 
-          {/* <View style={styles.buttonContainer}>
-            <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
-          </View> */}
-
-
           <View style={styles.accordionContainer}>
             <List.AccordionGroup
               expandedId={expandedId}