Phase 2 Updates

src/assets/images/images.js

@@ -9,7 +9,8 @@ const images = {
     verticalCard: require("./vertcard.png"),
     noBookmark: require("./no_bookmark.png"),
     account_successful: require("./account_successful.png"),
-    account_not_successful: require("./account_not_successful.png")
+    account_not_successful: require("./account_not_successful.png"),
+    forgot_password: require("./forgot_password.png")
 }
 
 export default images;

src/components/atoms/Buttons/BookmarkButton.js

@@ -1,6 +1,6 @@
 import { StyleSheet} from 'react-native'
 import React, { useContext } from 'react'
-import IonIcon from 'react-native-vector-icons/Ionicons'
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
 import ButtonWrapper from './ButtonWrapper'
 import colors from '../../../constants/colors'
 import { moderateScale } from '../../../constants/metrics'
@@ -19,14 +19,14 @@ const BookmarkButton = ({ buttonStyle,iconSize,iconColor, onPress}) => {
         },
         icon:{
             color: colors().primaryColor,
-            fontSize: moderateScale(16)
+            fontSize: moderateScale(20)
         }
     
     })
 
     return (
         <ButtonWrapper onPress={onPress} buttonStyle={buttonStyle}>
-            <IonIcon name='ios-bookmark-outline' color={iconColor ? iconColor : currentTheme === 'light' ? colors().primaryColor : colors().white} size={iconSize ? iconSize : styles.icon.fontSize}/>
+            <FontAwesomeIcon name='bookmark' color={iconColor ? iconColor : currentTheme === 'light' ? colors().grayShade_400 : colors().white} size={iconSize ? iconSize : styles.icon.fontSize}/>
         </ButtonWrapper>
     )
 }

src/components/atoms/Buttons/ShareButton.js

@@ -5,6 +5,7 @@ import colors from '../../../constants/colors'
 import ButtonWrapper from './ButtonWrapper'
 import { moderateScale } from '../../../constants/metrics'
 import { ThemeContext } from '../../../context/theme.context'
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5'
 const ShareButton = ({ size, buttonStyle, iconColor, iconSize, onPress }) => {
 
   const theme = useContext(ThemeContext)
@@ -19,14 +20,14 @@ const ShareButton = ({ size, buttonStyle, iconColor, iconSize, onPress }) => {
     },
     icon: {
       color: colors().primaryColor,
-      fontSize: moderateScale(16)
+      fontSize: moderateScale(18)
     }
   
   })
 
   return (
     <ButtonWrapper onPress={onPress} buttonStyle={buttonStyle}>
-      <IonIcon name='share-social-outline' color={iconColor ? iconColor :currentTheme === 'light' ? colors().primaryColor : colors().white} size={iconSize ? iconSize : styles.icon.fontSize} />
+      <FontAwesomeIcon name='share-alt' color={iconColor ? iconColor :currentTheme === 'light' ? colors().grayShade_400 : colors().white} size={iconSize ? iconSize : styles.icon.fontSize} />
     </ButtonWrapper>
   )
 }

src/components/atoms/Header/Header.js

@@ -5,7 +5,7 @@ import colors from '../../../constants/colors'
 import { horizontalScale } from '../../../constants/metrics'
 import { ThemeContext } from '../../../context/theme.context'
 
-const Header = ({ style, children, backButtonShown, onBackClick, backIconTextComponent }) => {
+const Header = ({ headerStyle, children, backButtonShown, onBackClick, backIconTextComponent }) => {
 
   const styles = StyleSheet.create({
     headerContainer: {
@@ -15,14 +15,15 @@ const Header = ({ style, children, backButtonShown, onBackClick, backIconTextCom
       justifyContent: 'space-between',
       height: 60,
       maxHeight: 60,
+      // elevation: 4,
       backgroundColor: colors().dominant
     }
   })
 
   return (
-    <View style={[styles.headerContainer, style]}>
+    <View style={[styles.headerContainer, headerStyle]}>
 
-      <View style={{ flexDirection: 'row', gap: horizontalScale(4) }}>
+      <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>

src/components/atoms/Input/FormTextInput.js

@@ -10,13 +10,16 @@ const FormTextInput = props => {
     const {
         placeholder,
         inputContainerStyle,
-        inputTheme,
+        inputStyle,
         value,
         label,
         type,
         multiline,
     } = props
 
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+
     const [inputValue, setInputValue] = useState(value)
     let isSecureTextType = false
     let renderType = () => null
@@ -38,7 +41,7 @@ const FormTextInput = props => {
                 color: colors().recessive,
                 fontFamily: fonts.type.medium
             },
-            style: {
+            inputStyle: {
                 paddingVertical: verticalScale(4),
                 // paddingHorizontal: horizontalScale(4)
                 height: multiline ? verticalScale(96) : null
@@ -67,10 +70,10 @@ const FormTextInput = props => {
                 placeholder={placeholder ?? ''}
                 placeholderTextColor={colors().grayShade_300}
                 dense
-                style={styles.style}
+                style={[styles.inputStyle,inputStyle]}
                 outlineStyle={styles.outlineStyle}
                 contentStyle={styles.contentStyle}
-                cursorColor={inputTheme === 'light' ? colors().secondaryColor : colors().white}
+                cursorColor={currentTheme === 'light' ? colors().secondaryColor : colors().white}
                 onChangeText={(text) => {
                     if (text.length > 0) {
                         setInputValue(text)
@@ -88,26 +91,3 @@ const FormTextInput = props => {
 
 export default FormTextInput
 
-// inputTheme === 'light' ?
-        // {
-            // labelText: {
-                // color: colors().black,
-                // fontFamily: fonts.type.medium
-            // },
-            // style: {
-                // paddingVertical: verticalScale(4)
-            // },
-            // outlineStyle: {
-                // borderColor: colors.secondaryColor,
-            // },
-            // contentStyle: {
-                // fontFamily: fonts.type.medium
-            // },
-            // activeOutlineColor: colors.black,
-            // outlineColor: colors.black,
-            // activeUnderlineColor: colors.black,
-            // underlineColor: colors.black,
-            // cursorColor: colors.black
-// 
-// 
-        // } :

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -11,7 +11,7 @@ import { ThemeContext } from '../../../context/theme.context'
 
 
 
-const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress }) => {
+const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress, onBookmarkPress, onSharePress}) => {
 
   const theme = useContext(ThemeContext)
   const currentTheme = theme.state.theme
@@ -20,46 +20,51 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
     cardContainer: {
       borderRadius: moderateScale(16),
       width: 'auto',
+      // minWidth: horizontalScale(320),
       maxWidth: horizontalScale(320),
-      maxHeight: verticalScale(220),
+      maxHeight: verticalScale(200),
       backgroundColor: currentTheme === 'light' ? colors().white: colors().black_variant,
       elevation: 4,
       marginHorizontal: horizontalScale(8),
-      padding: moderateScale(16)
+      padding: moderateScale(16),
+      paddingBottom: 0
       // paddingBottom:fonts.getSize(24)
     },
     topSection: {
 
-      height: "65%",
+      height: "70%",
+      maxHeight: 'auto',
       flexDirection: 'row',
       width: '100%',
       maxWidth: '100%',
-      justifyContent: 'space-between'
+      justifyContent: 'flex-start'
 
     },
     middleSection: {
       flexDirection: 'row',
-
+      alignItems: 'baseline',
       justifyContent: 'space-between'
     },
     bottomSection: {
 
     },
     imageContainer: {
-      width: "35%",
+      width: "40%",
 
     },
     textContainer: {
-      width: "60%",
+      width: "55%",
+      
       height: '100%',
-
+      maxHeight: 'auto',
+      justifyContent: 'center',
       // justifyContent: 'center',
       gap: moderateScale(12),
       marginRight: "5%"
     },
     headline: {
       fontFamily: fonts.type.semibold,
-      fontSize: moderateScale(16),
+      fontSize: moderateScale(15),
       color : colors().recessive
 
     },
@@ -77,8 +82,9 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
       fontFamily: fonts.type.light
     },
     timeDescriptor: {
-      fontFamily: fonts.type.light,
-      color: colors().recessive
+      fontFamily: fonts.type.regular,
+      color: currentTheme == 'light' ? colors().grayShade_300 : colors().white,
+      fontSize:moderateScale(12)
     },
     imageSub: {
       alignItems: 'flex-end',
@@ -119,16 +125,13 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
         </View>
         <View style={styles.middleSection}>
           <View style={styles.descriptors}>
-            <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
+            <Text style={styles.timeDescriptor}>{getTimestamp(timestamp)}</Text>
           </View>
           <View style={styles.utilButtons}>
-            <BookmarkButton size={20} onPress={true} />
-            <ShareButton size={20} onPress={true} />
+            <BookmarkButton size={20} onPress={onBookmarkPress} />
+            <ShareButton size={20} onPress={onSharePress} />
           </View>
         </View>
-        <View style={styles.bottomSection}>
-          <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
-        </View>
       </View>
     </TouchableOpacity>
   )

src/components/molecules/Cards/NotificationCard.js

@@ -1,7 +1,7 @@
 import { Image, StyleSheet, Text, View } from 'react-native'
 import React from 'react'
 import images from '../../../assets/images/images'
-import { horizontalScale, moderateScale } from '../../../constants/metrics'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 import colors from '../../../constants/colors'
 import { getTimestamp } from '../../../constants/functions'
 import fonts from '../../../constants/fonts'
@@ -19,11 +19,11 @@ const NotificationCard = ({ navigation, profileImage, tagline, headline, timesta
       width: '100%',
       justifyContent: 'space-between',
       alignItems: 'center',
-      padding: 8,
-      height: 88,
-      backgroundColor: colors().dominant_variant,
-      borderRadius: 16,
-      elevation: moderateScale(4)
+      padding: moderateScale(8),
+      height: verticalScale(88),
+      backgroundColor: colors().dominant,
+      borderRadius: moderateScale(16),
+      elevation: moderateScale(2)
     },
     profileIcon: {
       height: PROFILE_IMAGE,

src/components/molecules/Cards/ProfileImageCard.js

@@ -4,10 +4,10 @@ import { horizontalScale, moderateScale, verticalScale } from '../../../constant
 import colors from '../../../constants/colors';
 import images from '../../../assets/images/images';
 import EditButton from '../../atoms/Buttons/EditButton';
-
+import IonIcon from 'react-native-vector-icons/Ionicons'
 
 const PROFILE_SIZE = 128;
-const EDIT_ICON_SIZE = 14
+const EDIT_ICON_SIZE = 20
 
 const ProfileImageCard = (props) => {
     const {
@@ -46,9 +46,9 @@ const ProfileImageCard = (props) => {
     return (
         <View style={styles.profileImageContainer}>
             <ImageBackground source={source ?? images.imageCard} style={styles.profileImageView} imageStyle={styles.profileImage}>
-                <TouchableOpacity onPress={true}>
+                <TouchableOpacity onPress={onEdit}>
                     <View style={styles.editIcon}>
-                        <EditButton iconSize={EDIT_ICON_SIZE} iconColor={colors().white} onPress={onEdit} />
+                        <IonIcon name={'camera'} color={colors().white} size={EDIT_ICON_SIZE} />
                     </View>
                 </TouchableOpacity>
             </ImageBackground>

src/components/molecules/Header/NewscoutHomeHeader.js

@@ -1,19 +1,20 @@
-import { StyleSheet} from 'react-native'
+import { StyleSheet, View} from 'react-native'
 import React from 'react'
 import colors from '../../../constants/colors'
 import Header from '../../atoms/Header/Header'
-import { moderateScale } from '../../../constants/metrics'
+import { horizontalScale, moderateScale } from '../../../constants/metrics'
 import NewscoutLogo from '../../atoms/Logo/NewscoutLogo'
 
 
 
-const NewscoutHomeHeader = ({ children, headerStyle}) => {
+const NewscoutHomeHeader = ({ children, backButtonShown, onBackClick, headerStyle, left}) => {
   
 
   const styles = StyleSheet.create({
     headerLogo: {
       height: moderateScale(64),
-      width: moderateScale(64)
+      width: moderateScale(64),
+      marginLeft: backButtonShown ? horizontalScale(16) : 0 
     },
     header:{
       backgroundColor: colors().dominant,
@@ -22,13 +23,19 @@ const NewscoutHomeHeader = ({ children, headerStyle}) => {
       shadowOffset: {width: -2, height: 4},
       shadowOpacity: 0.2,
       shadowRadius: 3,
-      
+      alignItems:'center',
+      // justifyContent: 'center'
     }
   })
 
   return (
-    <Header style={[styles.header,headerStyle]}
-      backIconTextComponent={<NewscoutLogo style={styles.headerLogo} />}
+    <Header headerStyle={[styles.header,headerStyle]}
+      onBackClick={onBackClick}
+      backButtonShown={backButtonShown}
+      backIconTextComponent={<View style={{flexDirection: 'row',alignItems:'center', gap: horizontalScale(8)}}>
+        { left }
+        <NewscoutLogo style={styles.headerLogo} />
+      </View>}
     >
       
 

src/components/molecules/Header/NewscoutTextHeader.js

@@ -28,7 +28,7 @@ const NewscoutTextHeader = props => {
     })
   
     return (
-      <Header style={[styles.header,headerStyle]}
+      <Header headerStyle={[styles.header,headerStyle]}
         backIconTextComponent={<NewscoutTextLogo style={styles.headerLogo} />}
       >
         

src/components/molecules/Header/NewscoutTitleHeader.js

@@ -2,12 +2,12 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import React from 'react'
 import FeatherIcon from 'react-native-vector-icons/dist/Feather'
 import colors from '../../../constants/colors'
-import { moderateScale } from '../../../constants/metrics'
+import { horizontalScale, moderateScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'
 import Header from '../../atoms/Header/Header'
 
 
-const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onBackClick}) => {
+const NewscoutTitleHeader = ({ title, headerStyle,titleStyle, children, backButtonShown, onBackClick,left}) => {
     
     const styles = StyleSheet.create({
         title: {
@@ -18,17 +18,23 @@ const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onB
         titleContainer:{
             flexDirection:'row',
             alignItems:'center',
-            gap: 8
+            gap: 8,
+            elevation: 1
     
         }
     })
 
     return (
         <Header 
+            headerStyle={headerStyle}
             backButtonShown={backButtonShown} 
             onBackClick={onBackClick}
             backIconTextComponent={
-                <Text style={[styles.title, titleStyle]}>{title}</Text>
+                <View style={{flexDirection:'row',gap: horizontalScale(16),alignItems:'center'}}>
+                    {left}
+                    <Text style={[styles.title, titleStyle]}>{title}</Text>
+                </View>
+              
             }   
         
         >

src/components/molecules/Header/SectionHeader.js

@@ -14,7 +14,8 @@ const SectionHeader = ({ label, onPress }) => {
   const styles = StyleSheet.create({
     recentHeader: {
         paddingHorizontal: horizontalScale(16),
-        backgroundColor: colors().dominant
+        // backgroundColor: colors().dominant,
+        elevation: 0
       },
       recentHeaderText: {
         fontFamily: fonts.type.semibold,
@@ -38,7 +39,7 @@ const SectionHeader = ({ label, onPress }) => {
       },
 })
     return (
-        <Header style={styles.recentHeader}
+        <Header headerStyle={styles.recentHeader}
           backIconTextComponent={<Text style={styles.recentHeaderText}>{label}</Text>}
         >
             

src/components/organisms/Sections/CategorySection.js

@@ -5,11 +5,11 @@ import fonts from '../../../constants/fonts';
 import colors from '../../../constants/colors';
 import HorizontalNewsCardVariant from '../../molecules/Cards/HorizontalNewsCardVariant';
 import {
-  PAGINATE_BY,
   getScreenType,
   useConstructor,
   navigateToArticle,
   navigateToListViewPage,
+  onShare,
 } from '../../../constants/functions';
 import SectionHeader from '../../molecules/Header/SectionHeader';
 import {
@@ -20,6 +20,8 @@ import {
 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 theme = useContext(ThemeContext);
@@ -126,6 +128,7 @@ const CategorySection = ({navigation}) => {
       gap: moderateScale(16),
       flexWrap: 'wrap',
       flexDirection: 'row',
+
     },
   });
 
@@ -180,6 +183,14 @@ const CategorySection = ({navigation}) => {
                       onPress={() =>
                         navigateToArticle(navigation, item.id, item.slug)
                       }
+                      onSharePress={() => {
+                        onShare({
+                        title: "Newscout",
+                        message: "Check out unbiased news in Newscout",
+                        url: NEWSCOUT_NEWS_URL(item.slug),
+                      }).catch(err => console.error(err))
+                      .finally(() => console.log("Share Link Button"))
+                    }}
                     />
                   ))
                 ) : (

src/components/organisms/Sections/NoBookmarkSection.js

@@ -1,17 +1,27 @@
-import { Image, ImageBackground, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import { Image, ImageBackground, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
 import images from '../../../assets/images/images'
 import fonts from '../../../constants/fonts'
 import colors from '../../../constants/colors'
-import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
+import { horizontalScale, moderateScale, screenHeight, verticalScale } from '../../../constants/metrics'
+import ThemedTextButton from '../../molecules/Buttons/ThemeTextButton'
+import { navigateToHomePage } from '../../../constants/functions'
+import { useNavigation } from '@react-navigation/native'
 
 
-const NoBookmarkSection = () => {
+const NoBookmarkSection = props => {
+
+  const {
+    navigation,
+    route
+  } = props
+  
 
   const styles = StyleSheet.create({
     container: {
       backgroundColor: colors().dominant,
       height: '100%',
+      minHeight: '100vh',
       alignItems: 'center',
       justifyContent: 'center',
       paddingHorizontal: horizontalScale(16)
@@ -50,13 +60,17 @@ const NoBookmarkSection = () => {
   })
 
   return (
-    <View style={styles.container}>
-      <View style={styles.imageContainer}><Image source={images.noBookmark} style={[styles.image]} /></View>
-      <Text style={styles.headline}>You have no bookmarked news</Text>
-      <TouchableWithoutFeedback onPress={null}>
+    <ScrollView contentContainerStyle={{minHeight: '100%'}}showsVerticalScrollIndicator={false}>
+      <View style={styles.container}>
+        <View style={styles.imageContainer}><Image source={images.noBookmark} style={[styles.image]} /></View>
+        <Text style={styles.headline}>You have no bookmarked news</Text>
+        <ThemedTextButton title={"Explore News"} theme={"secondary-contained"} buttonStyle={{ minWidth: '100%' }} onPress={navigateToHomePage(navigation)} />
+        {/* <TouchableWithoutFeedback onPress={null}>
         <View style={styles.button}><Text style={styles.buttonText}>Explore News</Text></View>
-      </TouchableWithoutFeedback>
-    </View>
+      </TouchableWithoutFeedback> */}
+      </View>
+    </ScrollView>
+
   )
 }
 

src/components/organisms/Sections/RecentPostsSection.js

@@ -54,6 +54,8 @@ const RecentPostsSection = props => {
             image={{uri :item.cover_image}}
             author={item.author}
             headline={item.title}
+            tagline={item.blurb}
+            timestamp={item.published_on}
             onPress={() => navigateToArticle(navigation,item.id,item.slug)}
           />)}
 

src/components/organisms/Sections/TrendingSection.js

@@ -2,7 +2,7 @@ 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, navigateToListViewPage, useConstructor } from '../../../constants/functions';
+import { navigateToArticle, navigateToListViewPage, useConstructor } from '../../../constants/functions';
 import fonts from '../../../constants/fonts';
 import colors from '../../../constants/colors';
 import ImageBGCard from '../../molecules/Cards/ImageBGCard';
@@ -15,12 +15,13 @@ import SectionHeader from '../../molecules/Header/SectionHeader';
 import { ThemeContext } from '../../../context/theme.context';
 import { getTrendingNews } from '../../../api/data';
 import LoadingScreen from './LoadingScreen';
+import { PAGINATE_BY } from '../../../api/urls';
 
 
 const TrendingSection = props => {
 
   const ITEM_WIDTH = Math.round(screenWidth * 1);
-  const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3.5));
+  const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3.25));
 
   const {
     navigation
@@ -71,7 +72,8 @@ const TrendingSection = props => {
     recentCardContainer: {
       alignItems: 'center',
       paddingHorizontal: 8,
-      width: screenWidth,
+      minWidth: screenHeight,
+      width: '100%',
       backgroundColor: colors().dominant,
     },
     paginationContainer: {

src/constants/colors.js

@@ -11,7 +11,7 @@ const colors = () => {
         recessive: 'black',
         recessive_variant: "#262626",
         dominant: 'white',
-        dominant_variant: "#E3E3E3",
+        dominant_variant: "#e8e8e8",
         primaryColor: "#FF6E67",
         primaryTintColor: "#FFF0F0",
         secondaryColor: "#1E656D",
@@ -29,12 +29,12 @@ const colors = () => {
         dominant: 'black',
         dominant_variant: "#262626",
         recessive: 'white',
-        recessive_variant: "#E3E3E3",
+        recessive_variant: "#e8e8e8",
         primaryColor: "#FF6E67",
         primaryTintColor: "#FFF0F0",
         secondaryColor: "#1E656D",
 
-        grayShade_100: "#444444",
+        grayShade_100: "#444444", 
         grayShade_200: "#696969",
         grayShade_300: "#A1A1A1",
         grayShade_400: "#E7E7E7",

src/constants/functions.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { screenWidth } from "./metrics";
+import { Share } from "react-native";
 
-export const PAGINATE_BY = 5
 
 /*
     Executes before Render
@@ -40,7 +40,7 @@ export const getTimestamp = (iso_date_str) => {
     var result = "Timestamp Not Found"
     for (const key of Object.keys(diffObj)) {
         if (diffObj[key] > 0) {
-            result = `${diffObj[key]} ${capitalize(key)}${ diffObj[key] > 1 ? "s" : ""} ago`
+            result = `${diffObj[key]} ${capitalize(key)}${diffObj[key] > 1 ? "s" : ""} ago`
             break
         }
     }
@@ -90,9 +90,9 @@ export const getScreenType = () => {
     let screenType;
     if (screenWidth <= MOBILE_SCREEN_BREAKPOINT) {
         screenType = MOBILE_SCREEN
-    }else if(screenWidth <= TABLET_SCREEN_BREAKPOINT){
+    } else if (screenWidth <= TABLET_SCREEN_BREAKPOINT) {
         screenType = TABLET_SCREEN
-    }else {
+    } else {
         screenType = DESKTOP_SCREEN
     }
     return screenType
@@ -104,12 +104,26 @@ export const validateEmail = (email) => {
 }
 
 
-export const navigateToArticle = (navigation,article_id,article_slug) => {
-    navigation.push("NewsDetailPage",{slug: article_slug, id: article_id})
-    navigation.navigate("NewsDetailPage",{slug: article_slug, id: article_id})
-  }
+export const navigateToArticle = (navigation, article_id, article_slug) => {
+    // navigation.navigate("HomePageNav",{screen:"MainNav",params:{screen:'NewsDetailPage',params:{slug: article_slug, id: article_id}}})
+
+    navigation.push("NewsDetailPage", { slug: article_slug, id: article_id })
+    navigation.navigate("NewsDetailPage",  { slug: article_slug, id: article_id })
+}
+
+
+export const navigateToListViewPage = (navigation, topic_type, topic) => {
+    navigation.navigate("NewsListPage",  { type: topic_type, title: topic } )
+}
 
+export const navigateToHomePage = (navigation) => {
+    navigation.navigate("MainPage")
+}
 
-export const navigateToListViewPage = (navigation,topic_type,topic) => {
-    navigation.navigate("MainNav",{ screen : "NewsListPage", params :{type: topic_type, title: topic }})
-}
+export const onShare = async (myOptions) => {
+    try {
+      await Share.share(myOptions);
+    } catch (error) {
+      alert(error.message);
+    }
+  };

src/constants/metrics.js

@@ -17,7 +17,7 @@ Use ModerateScale for font-size, borderRadius , likewise
 */
 
 
-const screenDimensions = Dimensions.get("screen")
+const screenDimensions = Dimensions.get("window")
 const screenWidth = screenDimensions.width
 const screenHeight = screenDimensions.height
 

src/navigation/HomePageNavigator.jsx

@@ -26,7 +26,7 @@ const HomePageNavigator = () => {
             initialRouteName="HomePage"
             screenOptions={{
                 drawerType: 'front',
-                drawerStyle: getScreenType === "Mobile" ? { width: '100%' } : { width: '100%' },
+                drawerStyle:  {width: '100%'},
             }}
             drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
             <Drawer.Screen name="HomePageTabs" component={HomePageTabsNavigator} options={(navigation) => ({
@@ -38,17 +38,17 @@ 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: { 
+                tabBarStyle: {
                     backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
                     height: verticalScale(64),
-                    alignItems: 'center' 
+                    alignItems: 'center'
                 },
                 tabBarShowLabel: false,
                 tabBarIcon: ({ focused, color, size }) => {
@@ -100,6 +100,7 @@ const HomePageTabsNavigator = ({ route, navigation }) => {
                 component={ProfileNavigator}
                 options={(navigation) => ({ ...defaultScreenOptions })}
             />
+
         </Tab.Navigator>
 
     )

src/navigation/LandingPageNavigator.jsx

@@ -9,6 +9,8 @@ import ChooseTopicPage from '../screens/Auth/ChooseTopicPage';
 import FillProfile from '../screens/Profile/FillProfile';
 import ForgotPasswordPage from '../screens/Auth/ForgotPasswordPage';
 import OTPPage from '../screens/Auth/OTPPage';
+import NewsListPage from '../screens/News/NewsListPage';
+import NewsDetailPage from '../screens/News/NewsDetailPage';
 
 
 const Stack = createNativeStackNavigator()
@@ -21,14 +23,56 @@ const LandingPageNavigator = () => {
     return (
 
         <Stack.Navigator initialRouteName="Landing">
-            <Stack.Screen name="Landing" component={LandingPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="UnsignedPage" component={UnsignedPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="SignIn" component={SignInPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="SignUp" component={SignUpPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="ChooseTopic" component={ChooseTopicPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="FillProfile" component={FillProfile} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="ForgotPassword" component={ForgotPasswordPage} options={{ ...defaultScreenOptions }} />
-            <Stack.Screen name="OTP" component={OTPPage} options={{ ...defaultScreenOptions }} />
+            <Stack.Screen 
+                name="Landing" 
+                component={LandingPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="UnsignedPage" 
+                component={UnsignedPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="SignIn" 
+                component={SignInPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="SignUp" 
+                component={SignUpPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="ChooseTopic" 
+                component={ChooseTopicPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="FillProfile" 
+                component={FillProfile} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="ForgotPassword" 
+                component={ForgotPasswordPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen 
+                name="OTP" 
+                component={OTPPage} 
+                options={{ ...defaultScreenOptions }} 
+            />
+            <Stack.Screen
+                name="NewsDetailPage"
+                component={NewsDetailPage}
+                options={{ ...defaultScreenOptions }}
+            />
+            <Stack.Screen
+                name="NewsListPage"
+                component={NewsListPage}
+                options={{ ...defaultScreenOptions }}
+            />
         </Stack.Navigator>
 
     )

src/navigation/ProfileNavigator.jsx

@@ -18,7 +18,7 @@ const defaultScreenOptions = {
 const ProfileNavigator = () => {
   return (
     <Stack.Navigator
-        initialRouteName='BookmarkPage'
+        initialRouteName='ProfilePage'
     >
         <Stack.Screen
             name="ProfilePage"

src/screens/Auth/ForgotPasswordPage.js

@@ -1,11 +1,53 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+import fonts from '../../constants/fonts'
+import colors from '../../constants/colors'
+import { moderateScale, screenHeight, screenWidth, verticalScale } from '../../constants/metrics'
+import Header from '../../components/atoms/Header/Header'
+import images from '../../assets/images/images'
+import FormTextInput from '../../components/atoms/Input/FormTextInput'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+
+const ForgotPasswordPage = props => {
+  const {
+    navigation,
+    route
+  } = props
+
+  const styles = StyleSheet.create({
+    signInText: {
+      fontFamily: fonts.type.bold,
+      color: colors().recessive,
+      alignSelf: 'center',
+      fontSize: moderateScale(24)
+    },
+    logoContainer:{
+      padding: moderateScale(16),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors().dominant,
+      minHeight: 600
+    },
+    logo:{
+      height:320,
+      width:'100%'
+    }
+  })
 
-const ForgotPasswordPage = () => {
   return (
-    <View>
-      <Text>ForgotPassword</Text>
-    </View>
+    <ScrollView showsVerticalScrollIndicator={false}>
+      <NewscoutTitleHeader backButtonShown onBackClick={() => navigation.goBack()} />
+      <Header headerStyle={{ elevation: 0 }} >
+        <Text style={styles.signInText}>Forgot Password</Text>
+        <View></View>
+      </Header>
+      <View style={styles.logoContainer}>
+        <Image source={images.forgot_password} style={styles.logo}/>
+        <FormTextInput label={"Email"} placeholder={"loremipsum@gmail.com"} inputContainerStyle={{width: '100%',marginVertical: verticalScale(16)}}/>
+        <ThemedTextButton theme={"secondary-contained"} title={"Submit"} titleStyle={{width: '100%'}} onPress={() => navigation.navigate('OTP')}/>
+      </View>
+    </ScrollView>
   )
 }
 

src/screens/Auth/OTPPage.js

@@ -1,11 +1,46 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View, ScrollView } from 'react-native'
 import React from 'react'
+import fonts from '../../constants/fonts'
+import colors from '../../constants/colors'
+import { moderateScale } from '../../constants/metrics'
+import Header from '../../components/atoms/Header/Header'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+
+const OTPPage = props => {
+
+  const {
+    navigation,
+    route
+  } = props
+
+  const styles = StyleSheet.create({
+    signInText: {
+      fontFamily: fonts.type.bold,
+      color: colors().recessive,
+      alignSelf: 'center',
+      fontSize: moderateScale(24)
+    },
+    logoContainer: {
+      padding: moderateScale(16),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors().dominant,
+      minHeight: 600
+    },
+    logo: {
+      height: 320,
+      width: '100%'
+    }
+  })
 
-const OTPPage = () => {
   return (
-    <View>
-      <Text>OTPPage</Text>
-    </View>
+    <ScrollView showsVerticalScrollIndicator={false}>
+      <NewscoutTitleHeader backButtonShown onBackClick={() => navigation.goBack()} />
+      <Header headerStyle={{ elevation: 0 }} >
+        <Text style={styles.signInText}>Forgot Password</Text>
+        <View></View>
+      </Header>
+    </ScrollView>
   )
 }
 

src/screens/Auth/SignInPage.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Image } from 'react-native'
 import React, { useContext } from 'react'
 import { ThemeContext } from '../../context/theme.context'
 import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
@@ -9,6 +9,8 @@ import { horizontalScale, moderateScale, verticalScale } from '../../constants/m
 import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
 import FormTextInput from '../../components/atoms/Input/FormTextInput'
 import Header from '../../components/atoms/Header/Header'
+import images from '../../assets/images/images'
+import NewscoutCenteredLogoHeader from '../../components/molecules/Header/NewscoutCenteredLogoHeader'
 
 const SignInPage = props => {
     const { navigation, route } = props
@@ -64,8 +66,9 @@ const SignInPage = props => {
     return (
         
             <View style={styles.container}>
-                <NewscoutHomeHeader />
-                <Header backButtonShown onBackClick={() => navigation.goBack()}>
+                {/* <NewscoutHomeHeader headerStyle={{elevation:0}}/> */}
+                <NewscoutCenteredLogoHeader />
+                <Header headerStyle={{elevation:0}} backButtonShown onBackClick={() => navigation.goBack()}>
                     <Text style={styles.signInText}>Sign In</Text>
                     <View></View>
                 </Header>
@@ -77,7 +80,7 @@ const SignInPage = props => {
                             <FormTextInput placeholder={"Password"} />
                         </View>
                         <ThemedTextButton title={"Login"} theme={'secondary'} onPress={navigateToHome}/>
-                        <TouchableOpacity><Text style={styles.forgotPasswordText}>Forgot Password</Text></TouchableOpacity>
+                        <TouchableOpacity onPress={() => navigation.navigate('ForgotPassword')}><Text style={styles.forgotPasswordText}>Forgot Password</Text></TouchableOpacity>
                     </View>
 
 

src/screens/Auth/SignUpPage.js

@@ -71,7 +71,7 @@ const SignUpPage = props => {
 
     <View style={styles.container}>
       <ScrollView>
-      <NewscoutHomeHeader />
+      <NewscoutHomeHeader headerStyle={{elevation: 0}}/>
       <Header backButtonShown onBackClick={() => navigation.goBack()}>
         <Text style={styles.signInText}>Sign Up</Text>
         <View></View>

src/screens/Auth/UnsignedPage.js

@@ -127,7 +127,7 @@ const UnsignedPage = props => {
 
                     {
                         isDimissed === false ? <View style={styles.loginContainer}>
-                            <NewscoutHomeHeader >
+                            <NewscoutHomeHeader headerStyle={{elevation: 0}}>
                                 <CloseButton onPress={() => setDismissed(!isDimissed)} />
                             </NewscoutHomeHeader>
                             <Text style={styles.loginText}>You are not logged in. Sign in or log in to bookmark news leave comment and a lot more!</Text>

src/screens/Bookmarks/BookmarkPage.js

@@ -7,6 +7,8 @@ import { ScrollView } from 'react-native-gesture-handler'
 import NoBookmarkSection from '../../components/organisms/Sections/NoBookmarkSection'
 import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant'
 import { horizontalScale, verticalScale } from '../../constants/metrics'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+
 const BookmarkPage = props => {
 
   const [bookmarks, setBookmarks] = React.useState([])
@@ -15,29 +17,40 @@ const BookmarkPage = props => {
 
   const styles = StyleSheet.create({
     bookmarkContainer: {
-      backgroundColor: colors().dominant,
+      // backgroundColor: colors().dominant,
       paddingVertical: verticalScale(16),
       paddingHorizontal: horizontalScale(16),
       gap: verticalScale(8),
-      flexDirection:'row',
+      flexDirection: 'row',
       flexWrap: 'wrap',
       minHeight: '100%'
     }
   })
 
   return (
-    <View style={{ backgroundColor: colors().dominant, }}>
-      <NewscoutTitleHeader title={"My Bookmarks"} backButtonShown={true}>
-        <TouchableWithoutFeedback onPress={() => { navigation.toggleDrawer() }}>
-          <OctiIcon name='three-bars' size={24} color={colors().primaryColor} />
+    <View style={{ backgroundColor: colors().dominant, minHeight: '100%', maxHeight: 'auto' }}>
+      <NewscoutTitleHeader title={"My Bookmarks"} left={
+        <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+          <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
+        </TouchableWithoutFeedback>
+      }>
+        <TouchableWithoutFeedback onPress={() => {
+          navigation.navigate('ProfilePage')
+          navigation.navigate("SettingsPage")
+        }}>
+          <AntIcon name='setting' color={colors().primaryColor} size={24} />
         </TouchableWithoutFeedback>
       </NewscoutTitleHeader>
 
       {
         bookmarks.length <= 0 ?
-          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ height: '100%' }} style={{}}>
-            <NoBookmarkSection />
-          </ScrollView> : <ScrollView contentContainerStyle={styles.bookmarkContainer} >
+          // <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ justifyContent: 'center', alignItems: 'center'}} style={{minHeight: '100%'}} >
+
+          <NoBookmarkSection navigation={navigation} />
+
+
+          // </ScrollView>
+          : <ScrollView contentContainerStyle={styles.bookmarkContainer} >
             {bookmarks.map((item) => <HorizontalNewsCardVariant />)}
           </ScrollView>
       }

src/screens/Help/AboutUsPage.js

@@ -29,10 +29,10 @@ const AboutUsPage = props => {
         },
         aboutText: {
             textAlign: 'left',
-            paddingVertical: 16,
+            paddingVertical: 8,
             paddingHorizontal: 24,
             color: colors().recessive,
-            // fontFamily: fonts.type.regular,
+            fontFamily: fonts.type.regular,
         },
     });
 

src/screens/Help/FAQPage.js

@@ -84,7 +84,7 @@ const FAQPage = props => {
             borderColor: colors().grayShade_400,
             borderRadius: moderateScale(16),
             height: 'auto',
-            paddingVertical: verticalScale(16),
+            paddingVertical: verticalScale(4),
             backgroundColor: colors().dominant
         },
         accordionTitle: {

src/screens/HomePage/HomePage.js

@@ -6,31 +6,41 @@ import TrendingSection from '../../components/organisms/Sections/TrendingSection
 import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 import colors from '../../constants/colors'
-
-
+import OctiIcon from 'react-native-vector-icons/Octicons'
+import AntIcon from 'react-native-vector-icons/AntDesign'
 const HomePage = props => {
 
   const { navigation, route } = props
 
   return (
-    <View style={{backgroundColor: colors().dominant}}>
 
-      <ScrollView showsHorizontalScrollIndicator={false}>
-        <NewscoutHomeHeader>
+    <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.toggleDrawer()}>
-              <MaterialIcon name='list' color={colors().primaryColor} size={30} />
+            <TouchableWithoutFeedback onPress={() => {
+                navigation.navigate('ProfilePage')
+                navigation.navigate("SettingsPage")
+                }}>
+              <AntIcon name='setting' color={colors().primaryColor} size={24} />
             </TouchableWithoutFeedback>
           </View>
         </NewscoutHomeHeader>
-        <TrendingSection navigation={navigation}/>
-        <CategorySection navigation={navigation} />
-        <RecentPostsSection  navigation={navigation}  />
-      </ScrollView>
-    </View>
+      </View>
+
+      <TrendingSection navigation={navigation} />
+      <CategorySection navigation={navigation} />
+      <RecentPostsSection navigation={navigation} />
+    </ScrollView>
   )
 }
 

src/screens/News/NewsDetailPage.js

@@ -43,6 +43,7 @@ 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';
+import OctiIcon from 'react-native-vector-icons/Octicons'
 
 const NewsDetailPage = props => {
   const { navigation, route } = props;
@@ -113,7 +114,7 @@ const NewsDetailPage = props => {
       flexDirection: 'row',
       gap: horizontalScale(8)
     },
-    hashTag:{
+    hashTag: {
       color: colors().primaryColor,
       backgroundColor: colors().dominant_variant,
       padding: moderateScale(4),
@@ -171,7 +172,7 @@ const NewsDetailPage = props => {
     },
     commentInput: {
       marginVertical: verticalScale(16),
-      alignItems:'stretch',
+      alignItems: 'stretch',
       // backgroundColor: colors().black_variant,
       flexDirection: 'row',
       flex: 1
@@ -208,16 +209,20 @@ const NewsDetailPage = props => {
       backgroundColor: colors().dominant,
       flexDirection: 'row',
     },
+    heading: {
+      flexDirection: 'row',
+      gap: horizontalScale(8)
+    }
   });
 
   return (
     <BottomSheetModalProvider>
       <ScrollView ref={mainPageRef} contentContainerStyle={styles.container}>
-        <NewscoutTitleHeader
+        <NewscoutTitleHeader headerStyle={{elevation: 0}}
           backButtonShown
           onBackClick={() => navigation.goBack()}>
           <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
-            <MaterialIcon name="list" color={colors().primaryColor} size={30} />
+            <OctiIcon name="three-bars" color={colors().primaryColor} size={moderateScale(24)} />
           </TouchableWithoutFeedback>
         </NewscoutTitleHeader>
         {isLoading === true ? (
@@ -302,21 +307,33 @@ const NewsDetailPage = props => {
                       paddingHorizontal: horizontalScale(24),
                     }}>
                     <BottomSheetView style={styles.commentInputContainer}>
-                      <Text
-                        style={{
-                          fontFamily: fonts.type.semibold,
-                          color: colors().recessive,
-                          fontSize: moderateScale(16),
-                        }}>
-                        Comments
-                      </Text>
-                      <ButtonWrapper onPress={handleCloseModalPress}>
-                        <IonIcon
-                          name="close-sharp"
-                          size={moderateScale(20)}
-                          color={colors().recessive}
-                        />
-                      </ButtonWrapper>
+                      <BottomSheetView style={styles.heading}>
+                        <Text
+                          style={{
+                            fontFamily: fonts.type.semibold,
+                            color: colors().recessive,
+                            fontSize: moderateScale(16),
+                          }}>
+                          Comments
+                        </Text>
+                        <Text
+                          style={{
+                            fontFamily: fonts.type.semibold,
+                            color: colors().recessive,
+                            fontSize: moderateScale(16),
+                            color: colors().primaryColor
+                          }}>
+                          {comments.results.length}
+                        </Text>
+                        </BottomSheetView>
+                        <ButtonWrapper onPress={handleCloseModalPress}>
+                          <IonIcon
+                            name="close-sharp"
+                            size={moderateScale(20)}
+                            color={colors().recessive}
+                          />
+                        </ButtonWrapper>
+                      
                     </BottomSheetView>
                     <BottomSheetView style={styles.commentInput}>
                       <Image
@@ -324,35 +341,35 @@ const NewsDetailPage = props => {
                         style={[styles.profileImage]}
                       />
                       {/* <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
-                           
+                      <TextInput
+                        multiline
+                        mode="outlined"
+                        placeholder='Add your Comment Here'
+                        placeholderTextColor={colors().grayShade_400}
+                        dense
+                        style={{
+                          backgroundColor: colors().dominant,
+                          height: verticalScale(64),
+                          // justifyContent:'',
+                          flexGrow: 1
 
-                            // borderColor: colors().dominant,
-                          }}
-                          cursorColor={colors().primaryColor}
-                        />
-                        {/* <FormTextInput/> */}
+                        }}
+                        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>

src/screens/News/NewsListPage.js

@@ -100,7 +100,7 @@ const NewsListPage = props => {
       paddingHorizontal: horizontalScale(16),
       flexDirection: 'row',
       flexWrap: 'wrap',
-      gap: horizontalScale(16),
+      gap: moderateScale(8),
       paddingVertical: verticalScale(16),
       numColumns: 2