Initial Commit

src/assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/images/images.js

@@ -0,0 +1,15 @@
+const images = {
+    newscoutDark: require("./newscout_logo_dark.png"),
+    newscoutLight: require("./newscout_logo_light.png"),
+    newscoutTextLight: require("./newscout_text_light.png"),
+    newscoutTextDark: require("./newscout_text_dark.png"),
+    getStarted: require("./get_started.png"),
+    imageCard: require("./hp_newscard.png"),
+    horizontalCard: require("./pubg.png"),
+    verticalCard: require("./vertcard.png"),
+    noBookmark: require("./no_bookmark.png"),
+    account_successful: require("./account_successful.png"),
+    account_not_successful: require("./account_not_successful.png")
+}
+
+export default images;

src/components/atoms/Buttons/BookmarkButton.js

@@ -0,0 +1,35 @@
+import { StyleSheet} from 'react-native'
+import React, { useContext } from 'react'
+import IonIcon from 'react-native-vector-icons/Ionicons'
+import ButtonWrapper from './ButtonWrapper'
+import colors from '../../../constants/colors'
+import { moderateScale } from '../../../constants/metrics'
+import { ThemeContext } from '../../../context/theme.context'
+
+const BookmarkButton = ({ buttonStyle,iconSize,iconColor, onPress}) => {
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+
+    const styles = StyleSheet.create({
+        buttonStyle:{
+            alignItems: 'center',
+            justifyContent: 'center',
+            height:'auto',
+            width:'auto'
+        },
+        icon:{
+            color: colors().primaryColor,
+            fontSize: moderateScale(16)
+        }
+    
+    })
+
+    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}/>
+        </ButtonWrapper>
+    )
+}
+
+export default BookmarkButton
+

src/components/atoms/Buttons/Button.js

@@ -0,0 +1,25 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { moderateScale } from '../../../constants/metrics'
+
+const Button = ({ style, onPress, children }) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={[styles.button,style]}>
+                {children}
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+
+export default Button
+
+const styles = StyleSheet.create({
+    button:{
+        paddingVertical: moderateScale(12),
+        paddingHorizontal: moderateScale(12),
+        backgroundColor: 'grey',
+        borderRadius: moderateScale(4)
+    }
+})

src/components/atoms/Buttons/ButtonWrapper.js

@@ -0,0 +1,23 @@
+import { StyleSheet, Text, View, TouchableWithoutFeedback, TouchableOpacity} from 'react-native'
+import React from 'react'
+
+const ButtonWrapper = ({ onPress, children, buttonStyle}) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={[styles.buttonStyle, buttonStyle]}>
+                {children}
+            </View>
+        </TouchableOpacity>
+    )
+}
+
+export default ButtonWrapper
+
+const styles = StyleSheet.create({
+    buttonStyle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 'auto',
+        width: 'auto'
+    }, 
+})

src/components/atoms/Buttons/CircularPrimaryBackButton.js

@@ -0,0 +1,40 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { horizontalScale, verticalScale } from '../../../constants/metrics';
+import colors from '../../../constants/colors';
+
+
+const CircularPrimaryBackButton = ({onPress}) => {
+
+  const styles = StyleSheet.create({
+    buttonContainer: {
+      borderRadius: 128,
+      
+      height: verticalScale(34),
+      width: horizontalScale(34),
+      backgroundColor: colors().dominant_variant,
+      borderColor: colors().recessive_variant,
+      borderWidth: 2,
+      paddingVertical: verticalScale(6),
+      paddingHorizontal: horizontalScale(6)
+    },
+  });
+  
+  return (
+    <TouchableWithoutFeedback onPress={onPress}>
+      <View style={styles.buttonContainer}>
+        <EntypoIcon
+          color={colors().secondaryColor}
+          size={20}
+          name="chevron-thin-left"
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default CircularPrimaryBackButton;
+
+

src/components/atoms/Buttons/CloseButton.js

@@ -0,0 +1,47 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React, { useContext } from 'react'
+import IonIcon from 'react-native-vector-icons/Ionicons'
+import colors from '../../../constants/colors'
+import ButtonWrapper from './ButtonWrapper'
+import { ThemeContext } from '../../../context/theme.context'
+
+const CloseButton = (props) => {
+
+    const theme = useContext(ThemeContext)
+
+    const {
+        onPress,
+        buttonStyle,
+        iconColor,
+        iconSize
+    } = props
+
+    let finalIconColor;
+    switch (iconColor) {
+        case "primary":
+            finalIconColor = colors().primaryColor
+            break;
+        case "secondary":
+            finalIconColor = colors().secondaryColor
+            break
+        default:
+            finalIconColor = colors().recessive
+            break;
+    }
+    
+    const styles = StyleSheet.create({
+        icon: {
+            fontSize: 20,
+            color: colors().primaryColor
+        }
+    })
+
+    return (
+        <ButtonWrapper onPress={onPress} buttonStyle={buttonStyle}>
+            <IonIcon name='close' color={finalIconColor} size={iconSize ? iconSize : styles.icon.fontSize} />
+        </ButtonWrapper>
+    )
+}
+
+export default CloseButton
+

src/components/atoms/Buttons/EditButton.js

@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import ButtonWrapper from './ButtonWrapper'
+import colors from '../../../constants/colors'
+const EditButton = (props) => {
+
+  const {
+    onPress,
+    buttonStyle,
+    iconColor,
+    iconSize
+  } = props
+
+
+  const styles = StyleSheet.create({
+    icon: {
+      fontSize: 20,
+      color: colors().primaryColor
+    }
+  })
+  return (
+    <ButtonWrapper onPress={onPress} buttonStyle={buttonStyle}>
+      <MaterialIcon name='create' color={iconColor ? iconColor : styles.icon.color} size={iconSize ? iconSize : styles.icon.fontSize} />
+    </ButtonWrapper>
+  )
+}
+
+export default EditButton

src/components/atoms/Buttons/SettingsButton.js

@@ -0,0 +1,25 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import ButtonWrapper from './ButtonWrapper'
+import colors from '../../../constants/colors'
+
+
+const SettingsButton = ({ onPress, buttonStyle, iconColor, iconSize }) => {
+
+  const styles = StyleSheet.create({
+    icon: {
+      fontSize: 20,
+      color: colors().primaryColor
+    }
+  })
+
+  return (
+    <ButtonWrapper onPress={onPress} buttonStyle={buttonStyle}>
+      <FeatherIcon name='settings' color={iconColor ? iconColor : styles.icon.color} size={iconSize ? iconSize : styles.icon.fontSize} />
+    </ButtonWrapper>
+  )
+}
+
+export default SettingsButton
+

src/components/atoms/Buttons/ShareButton.js

@@ -0,0 +1,35 @@
+import { StyleSheet, } from 'react-native'
+import React, { useContext } from 'react'
+import IonIcon from 'react-native-vector-icons/Ionicons'
+import colors from '../../../constants/colors'
+import ButtonWrapper from './ButtonWrapper'
+import { moderateScale } from '../../../constants/metrics'
+import { ThemeContext } from '../../../context/theme.context'
+const ShareButton = ({ size, buttonStyle, iconColor, iconSize, onPress }) => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const styles = StyleSheet.create({
+    buttonStyle: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 'auto',
+      width: 'auto'
+    },
+    icon: {
+      color: colors().primaryColor,
+      fontSize: moderateScale(16)
+    }
+  
+  })
+
+  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} />
+    </ButtonWrapper>
+  )
+}
+
+export default ShareButton
+

src/components/atoms/Header/Header.js

@@ -0,0 +1,37 @@
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import React, { useContext } from 'react'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import colors from '../../../constants/colors'
+import { horizontalScale } from '../../../constants/metrics'
+import { ThemeContext } from '../../../context/theme.context'
+
+const Header = ({ style, children, backButtonShown, onBackClick, backIconTextComponent }) => {
+
+  const styles = StyleSheet.create({
+    headerContainer: {
+      paddingHorizontal: horizontalScale(20),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 60,
+      maxHeight: 60,
+      backgroundColor: colors().dominant
+    }
+  })
+
+  return (
+    <View style={[styles.headerContainer, style]}>
+
+      <View style={{ flexDirection: 'row', gap: horizontalScale(4) }}>
+        <TouchableOpacity onPress={onBackClick}>
+          {backButtonShown === true && backButtonShown !== undefined ? <FeatherIcon name='chevron-left' size={24} color={colors().recessive} /> : <></>}
+        </TouchableOpacity>
+        {backIconTextComponent}
+      </View>
+      {children}
+    </View>
+  )
+}
+
+export default Header
+

src/components/atoms/Input/FormTextInput.js

@@ -0,0 +1,113 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React, { useContext, useState } from 'react'
+import { ThemeContext } from '../../../context/theme.context'
+import { TextInput } from 'react-native-paper'
+import colors from '../../../constants/colors'
+import { horizontalScale, verticalScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+
+const FormTextInput = props => {
+    const {
+        placeholder,
+        inputContainerStyle,
+        inputTheme,
+        value,
+        label,
+        type,
+        multiline,
+    } = props
+
+    const [inputValue, setInputValue] = useState(value)
+    let isSecureTextType = false
+    let renderType = () => null
+    switch (type) {
+        case "password":
+            isSecureTextType = true
+            break;
+        case "email":
+
+            break
+        case "text":
+        default:
+            break;
+    }
+
+    const styles = StyleSheet.create(
+        {
+            labelText: {
+                color: colors().recessive,
+                fontFamily: fonts.type.medium
+            },
+            style: {
+                paddingVertical: verticalScale(4),
+                // paddingHorizontal: horizontalScale(4)
+                height: multiline ? verticalScale(96) : null
+            },
+            outlineStyle: {
+                borderColor: colors().lightGray,
+
+            },
+            contentStyle: {
+                fontFamily: fonts.type.medium,
+               
+            },
+            activeOutlineColor: { borderColor: colors().lightGray },
+            outlineColor: colors().lightGray,
+            activeUnderlineColor: colors().black,
+            underlineColor: colors().black,
+            cursorColor: colors().primaryColor
+        })
+
+    return (
+        <View style={inputContainerStyle}>
+            {label ? <Text style={styles.labelText}>{label}</Text> : <></>}
+            <TextInput
+                editable
+                mode='outlined'
+                placeholder={placeholder ?? ''}
+                placeholderTextColor={colors().grayShade_300}
+                dense
+                style={styles.style}
+                outlineStyle={styles.outlineStyle}
+                contentStyle={styles.contentStyle}
+                cursorColor={inputTheme === 'light' ? colors().secondaryColor : colors().white}
+                onChangeText={(text) => {
+                    if (text.length > 0) {
+                        setInputValue(text)
+                    } else {
+                        setInputValue("")
+                    }
+                }}
+                multiline={multiline}
+                onSubmitEditing={null}
+            // onChangeText={text => onChangeText(text)}
+            />
+        </View>
+    )
+}
+
+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/atoms/Input/SearchTextInput.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const SearchTextInput = () => {
+  return (
+    <View>
+      <Text>SearchTextInput</Text>
+    </View>
+  )
+}
+
+export default SearchTextInput
+
+const styles = StyleSheet.create({})

src/components/atoms/Logo/NewscoutLogo.js

@@ -0,0 +1,26 @@
+import { StyleSheet, Image, View } from 'react-native'
+import React, { useContext } from 'react'
+import images from '../../../assets/images/images'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+const NewscoutLogo = ({style}) => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  return (
+    <View>
+      <Image source={currentTheme === 'light' ? images.newscoutLight : images.newscoutDark} style={[styles.image,style]}/>
+    </View>
+  )
+}
+
+export default NewscoutLogo
+
+const styles = StyleSheet.create({
+    image:{
+        height:32,
+        width:32
+    }
+})

src/components/atoms/Logo/NewscoutTextLogo.js

@@ -0,0 +1,27 @@
+import { StyleSheet, Text, View, Image } from 'react-native'
+import React, { useContext } from 'react'
+import images from '../../../assets/images/images'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+const NewscoutTextLogo = ({style}) => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  return (
+    <View>
+        <Image source={currentTheme === 'light' ? images.newscoutTextLight : images.newscoutTextDark} style={[styles.image,style]}/>
+    </View>
+  )
+}
+
+export default NewscoutTextLogo
+
+const styles = StyleSheet.create({
+    image:{
+        aspectRatio: 3.0,
+        width: '100%',
+        height: 64
+    }
+})

src/components/molecules/Buttons/ThemeTextButton.js

@@ -0,0 +1,127 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import fonts from '../../../constants/fonts';
+import colors from '../../../constants/colors';
+import Button from '../../atoms/Buttons/Button';
+
+
+const ThemedTextButton = ({ theme, onPress, title, titleStyle, buttonStyle}) => {
+
+    let style = {};
+    switch (theme) {
+        case 'primary-outline':
+            style = {
+
+                buttonStyle: {
+                    backgroundColor: colors().dominant,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderColor: colors().primaryColor,
+                    borderRadius: 6,
+                    borderWidth: 1
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().secondaryColor,
+                }
+            }
+            break;
+        case 'secondary-outline':
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors().dominant,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderColor: colors().secondaryColor,
+                    borderRadius: 6,
+                    borderWidth: 1
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().primaryColor,
+                }
+            }
+            break;
+        case 'secondary-contained':
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors().secondaryColor,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().white,
+                }
+
+            }
+            break;
+        case "white":
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors().white_variant,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center',
+                    borderRadius: 6,
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().black,
+                }
+
+            }
+            break
+        case "black":
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors().black_variant,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center'
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().white,
+                }
+
+            }
+            break
+        case 'primary-contained':
+        default:
+            style = {
+                buttonStyle: {
+                    backgroundColor: colors().primaryColor,
+                    maxWidth: '100%',
+                    width: '100%',
+                    alignItems: 'center'
+                },
+                buttonTextStyle: {
+                    fontFamily: fonts.type.medium,
+                    color: colors().white,
+                }
+
+            }
+            break;
+    }
+
+    const styles = StyleSheet.create(style)
+
+    return (
+        <Button
+            onPress={onPress}
+            style={[styles.buttonStyle, buttonStyle]}
+        >
+            <Text style={[styles.buttonTextStyle, titleStyle]}>
+                {title}
+            </Text>
+        </Button>
+    )
+}
+
+export default ThemedTextButton
+

src/components/molecules/Cards/CategoryCard.js

@@ -0,0 +1,40 @@
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import colors from '../../../constants/colors'
+import { moderateScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+
+const CategoryCard = ({ onPress, title, textStyle, cardStyle }) => {
+
+    const styles = StyleSheet.create({
+        cardContainer: {
+            height: 164,
+            width: 164,
+            backgroundColor: colors().secondaryColor,
+            borderRadius: moderateScale(8),
+            padding: moderateScale(12),
+            justifyContent: 'flex-end',
+
+        },
+        cardText: {
+            fontFamily: fonts.type.semibold,
+            alignSelf: 'flex-end',
+            color: colors().dominant,
+            fontSize: moderateScale(16),
+            maxWidth: "80%",
+            textAlign: 'right'
+        }
+
+    })
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={[cardStyle, styles.cardContainer]}>
+                <Text style={[textStyle, styles.cardText]}>{title}</Text>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default CategoryCard
+

src/components/molecules/Cards/CommentCard.js

@@ -0,0 +1,187 @@
+import { Image, StyleSheet, Text, View } from 'react-native'
+import React, { useState } from 'react'
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import LineIcon from 'react-native-vector-icons/SimpleLineIcons'
+import { Menu, Provider } from 'react-native-paper'
+import colors from '../../../constants/colors'
+import fonts from '../../../constants/fonts'
+import ButtonWrapper from '../../atoms/Buttons/ButtonWrapper'
+import { getTimestamp } from '../../../constants/functions'
+import images from '../../../assets/images/images'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
+
+
+const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeCount, }) => {
+
+    // * Like Counter
+    const [isDisliked, setDisliked] = useState(false)
+    const [isLiked, setLiked] = useState(false)
+    const [likeCounter, setLikeCounter] = useState(likeCount ?? 123)
+    const [dislikeCounter, setDislikeCounter] = useState(dislikeCount ?? 452)
+
+    // * Menu Visibility
+    const [optionsMenuVisible, setOptionsMenuVisible] = React.useState(false);
+    const openOptionsMenu = () => setOptionsMenuVisible(true);
+    const closeOptionsMenu = () => setOptionsMenuVisible(false);
+    const toggleOptionsMenu = () => setOptionsMenuVisible(!optionsMenuVisible)
+
+    const [optionsMenuAnchor, setOptionsMenuAnchor] = React.useState({ y: 0, x: 0 })
+    const onOptionsMenuPress = (event) => {
+        const { nativeEvent } = event;
+        console.log(nativeEvent)
+        const anchor = {
+            x: nativeEvent.locationX,
+            y: nativeEvent.locationY,
+            // x:0,
+            // y:0
+        };
+
+        setOptionsMenuAnchor(anchor);
+        toggleOptionsMenu()
+    }
+
+
+    const handleToggleDislike = () => {
+        setDisliked(!isDisliked)
+        setDislikeCounter(isDisliked === true ? dislikeCounter - 1 : dislikeCounter + 1)
+    }
+
+    const handleToggleLike = () => {
+        setLiked(!isLiked)
+        setLikeCounter(isLiked === true ? likeCounter - 1 : likeCounter + 1)
+    }
+
+    const styles = StyleSheet.create({
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+        },
+        commentContainer: {
+            width: '100%',
+            height: 150,
+            // height: 'auto',
+            paddingVertical: verticalScale(4)
+        },
+        profileIcon: {
+            height: 42,
+            width: 42,
+            borderRadius: 42,
+            marginRight: horizontalScale(8),
+
+        },
+        buttonStyle: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 'auto',
+            width: 'auto'
+        },
+        icon: {
+            color: colors().primaryColor,
+            fontSize: moderateScale(16)
+        },
+        name: {
+            fontFamily: fonts.type.regular,
+            color: colors().recessive,
+            fontSize: moderateScale(12)
+        },
+        timestamp: {
+            fontFamily: fonts.type.regular,
+            color: colors().gray,
+            fontSize: moderateScale(9)
+        },
+        replyIcon: {
+            height: 22,
+            width: 22,
+            borderColor: colors().recessive,
+            borderWidth: 1,
+            borderRadius: 24,
+            marginRight: -8
+        },
+        utilContainer: {
+            flexDirection: 'row',
+            gap: 12
+        },
+        utilButtons: {
+            flexDirection: 'row',
+            alignItems: 'baseline'
+        },
+        utilText: {
+            fontFamily: fonts.type.medium,
+            color: colors().recessive,
+            paddingRight: 4
+        },
+
+    })
+
+
+
+    return (
+        <Provider>
+            <View style={styles.commentContainer}>
+
+                <View style={styles.header}>
+                    <View style={{ flexDirection: 'row' }}>
+                        <Image source={images.imageCard} style={styles.profileIcon} />
+                        <View style={{ justifyContent: 'center' }}>
+                            <Text style={styles.name}>Semina Gurung</Text>
+                            <Text style={styles.timestamp}>{getTimestamp(timestamp)}</Text>
+                        </View>
+                    </View>
+                    <View>
+                        <Menu
+                            visible={optionsMenuVisible}
+                            onDismiss={closeOptionsMenu}
+                            anchor={<ButtonWrapper onPress={onOptionsMenuPress} buttonStyle={styles.buttonStyle}>
+                                <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
+                            </ButtonWrapper>}
+                        >
+                            <Menu.Item onPress={() => { }} title="Item 1" />
+                            <Menu.Item onPress={() => { }} title="Item 2" />
+                            <Menu.Item onPress={() => { }} title="Item 3" />
+                        </Menu>
+
+                    </View>
+
+                </View>
+
+                <Text style={{ paddingVertical: fonts.getSize(13), fontFamily: fonts.type.regular, fontSize: fonts.getSize(11) }}>
+                    Lorem Ip sum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply du
+                </Text>
+                <View style={styles.header}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <View style={{ flexDirection: 'row', paddingRight: fonts.getSize(16) }}>
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                        </View>
+                        <Text style={styles.utilText}>View 14 replies</Text>
+                    </View>
+                    <View style={styles.utilContainer}>
+                        <ButtonWrapper
+                            buttonStyle={styles.utilButtons}
+                            onPress={() => {
+                                handleToggleLike()
+                            }}
+                        >
+                            <Text style={styles.utilText}>{`${likeCounter}`}</Text>
+                            <AntIcon name={isLiked ? "like1" : "like2"} color={styles.icon.color} size={16} />
+                        </ButtonWrapper>
+                        <ButtonWrapper
+                            buttonStyle={styles.utilButtons}
+                            onPress={() => {
+                                handleToggleDislike()
+                            }}
+                        >
+                            <Text style={styles.utilText}>{`${dislikeCounter}`}</Text>
+                            <AntIcon name={isDisliked ? "dislike1" : "dislike2"} color={styles.icon.color} size={16} />
+                        </ButtonWrapper>
+                    </View>
+                </View>
+            </View>
+        </Provider>
+    )
+}
+
+export default CommentCard
+

src/components/molecules/Cards/HorizontalNewsCard.js

@@ -0,0 +1,106 @@
+import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import images from '../../../assets/images/images'
+import ShareButton from '../Buttons/ShareButton'
+import { getTimestamp } from '../../../constants/functions'
+import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
+import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+import colors from '../../../constants/colors'
+import { unsubscribeFromKeyboardEvents } from 'react-native-reanimated/lib/typescript/reanimated2/core'
+
+
+const HorizontalNewsCard = ({ style, headline, tagline, category, timestamp, image, onPress }) => {
+
+    const styles = StyleSheet.create({
+        cardContainer: {
+            width: 'auto',
+            maxWidth: screenWidth,
+            height: verticalScale(190),
+            backgroundColor: colors().dominant_variant,
+            borderRadius: moderateScale(4),
+            flexDirection: 'row',
+            // paddingBottom:fonts.getSize(24)
+        },
+        imageContainer: {
+            width: "45%",
+
+        },
+        textContainer: {
+            width: "55%",
+            paddingVertical: verticalScale(8),
+            paddingLeft: horizontalScale(16),
+            justifyContent: 'flex-start',
+            gap: moderateScale(12)
+        },
+        headline: {
+            fontFamily: fonts.type.medium,
+            textDecorationLine: 'underline',
+            fontSize: moderateScale(16),
+            color: colors().recessive
+        },
+        tagline: {
+            fontSize: moderateScale(12),
+            fontFamily: fonts.type.regular,
+            maxHeight: '40%',
+            overflow: 'hidden',
+
+        },
+        descriptors: {
+            flexDirection: 'row',
+            justifyContent: 'space-around'
+        },
+        categoryDescriptor: {
+            fontFamily: fonts.type.light
+        },
+        timeDescriptor: {
+            fontFamily: fonts.type.light
+        },
+        imageSub: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: moderateScale(14),
+            paddingBottom: 0
+        },
+        utilButtons: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around'
+        }
+    })
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={[styles.cardContainer, style]}>
+                <View>
+                    <View style={styles.textContainer}>
+                        <View>
+                            <Text style={styles.headline}> {headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
+                            <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
+                        </View>
+
+                    </View>
+                    <View style={styles.imageContainer}>
+                        <View style={styles.imageSub}>
+                            <Image source={image ?? images.horizontalCard} style={{ aspectRatio: 0.9 }} />
+                        </View>
+
+                    </View>
+                </View>
+                <View>
+                    <View style={styles.descriptors}>
+                        <Text style={styles.categoryDescriptor}>{category ?? "Sports"}</Text>
+                        <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
+                    </View>
+                    <View style={styles.utilButtons}>
+                        <BookmarkButton onPress={true} />
+                        <ShareButton onPress={true} />
+                    </View>
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default HorizontalNewsCard
+

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -0,0 +1,138 @@
+import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback, Image } from 'react-native'
+import React, { useContext } from 'react'
+import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
+import ShareButton from '../../atoms/Buttons/ShareButton'
+import { moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+import colors from '../../../constants/colors'
+import { getScreenType, getTimestamp } from '../../../constants/functions'
+import images from '../../../assets/images/images'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+
+const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress }) => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      borderRadius: moderateScale(16),
+      width: 'auto',
+      maxWidth: getScreenType === "Mobile" ? 320 :  screenWidth,
+      maxHeight: verticalScale(220),
+      backgroundColor: currentTheme === 'light' ? colors().white: colors().black_variant,
+      elevation: 2,
+     
+      padding: moderateScale(16)
+      // paddingBottom:fonts.getSize(24)
+    },
+    topSection: {
+
+      height: "65%",
+      flexDirection: 'row',
+      width: '100%',
+      maxWidth: '100%',
+      justifyContent: 'space-between'
+
+    },
+    middleSection: {
+      flexDirection: 'row',
+
+      justifyContent: 'space-between'
+    },
+    bottomSection: {
+
+    },
+    imageContainer: {
+      width: "35%",
+
+    },
+    textContainer: {
+      width: "60%",
+      height: '100%',
+
+      // justifyContent: 'center',
+      gap: moderateScale(12),
+      marginRight: "5%"
+    },
+    headline: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      color : colors().recessive
+
+    },
+    tagline: {
+      fontSize: moderateScale(12),
+      fontFamily: fonts.type.regular,
+      overflow: 'hidden',
+      color : colors().recessive
+    },
+    descriptors: {
+      justifyContent: 'center',
+      
+    },
+    categoryDescriptor: {
+      fontFamily: fonts.type.light
+    },
+    timeDescriptor: {
+      fontFamily: fonts.type.light,
+      color: colors().recessive
+    },
+    imageSub: {
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: moderateScale(8)
+    },
+    utilButtons: {
+      flexDirection: 'row',
+      padding: moderateScale(8),
+      width: 64,
+      justifyContent: 'space-between'
+      //  padding:0
+      // alignItems: 'flex-start',
+      // justifyContent: 'flex-end',
+      // backgroundColor: colors.black
+    }
+  })
+
+
+  return (
+    <TouchableOpacity 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>
+            </TouchableWithoutFeedback>
+          </View>
+          <View style={styles.imageContainer}>
+            <View style={styles.imageSub}>
+              <Image source={image ?? images.horizontalCard} style={styles.image} />
+            </View>
+          </View>
+        </View>
+        <View style={styles.middleSection}>
+          <View style={styles.descriptors}>
+            <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
+          </View>
+          <View style={styles.utilButtons}>
+            <BookmarkButton size={20} onPress={true} />
+            <ShareButton size={20} onPress={true} />
+          </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>
+  )
+}
+
+export default HorizontalNewsCardVariant
+

src/components/molecules/Cards/ImageBGCard.js

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, ImageBackground, TouchableOpacity } from 'react-native'
+import React from 'react'
+import LinearGradient from 'react-native-linear-gradient'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
+import colors from '../../../constants/colors'
+import fonts from '../../../constants/fonts'
+
+const ImageBGCard = ({image, author, headline, onPress, }) => {
+
+
+  const styles = StyleSheet.create({
+    cardImage: {
+      height: 'auto',
+      width: 'auto',
+  
+    },
+    gradient: {
+      borderRadius: moderateScale(8),
+      height: verticalScale(240),
+      justifyContent: 'flex-end',
+      paddingHorizontal: horizontalScale(16),
+      paddingVertical: verticalScale(10)
+    },
+    authorText: {
+      color: colors().white,
+      fontFamily: fonts.type.bold,
+      fontSize: moderateScale(12)
+    },
+    headlineText: {
+      color: colors().white,
+      fontFamily: fonts.type.medium,
+      fontSize: moderateScale(16)
+    }
+  })
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <ImageBackground source={image}
+        imageStyle={{ borderRadius: moderateScale(8), }}
+        style={styles.cardImage}
+      >
+        <LinearGradient
+          colors={['transparent', 'black']}
+          style={styles.gradient}
+          start={{ x: 0.5, y: 0.3 }}
+
+        >
+          <Text style={styles.authorText}>
+            by {author}
+          </Text>
+          <Text style={styles.headlineText}>{headline}</Text>
+        </LinearGradient>
+      </ImageBackground>
+
+    </TouchableOpacity>
+  )
+}
+
+export default ImageBGCard
+

src/components/molecules/Cards/NotificationCard.js

@@ -0,0 +1,74 @@
+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 colors from '../../../constants/colors'
+import { getTimestamp } from '../../../constants/functions'
+import fonts from '../../../constants/fonts'
+
+
+const PROFILE_IMAGE = 52
+const NOTIFICATION_IMAGE = PROFILE_IMAGE
+
+const NotificationCard = ({ navigation, profileImage, tagline, headline, timestamp, image }) => {
+
+
+  const styles = StyleSheet.create({
+    cardContainer: {
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: 8,
+      height: 88,
+      backgroundColor: colors().dominant,
+      borderRadius: 16
+    },
+    profileIcon: {
+      height: PROFILE_IMAGE,
+      width: PROFILE_IMAGE,
+      borderRadius: PROFILE_IMAGE,
+
+    },
+    notificationImage: {
+      height: NOTIFICATION_IMAGE,
+      width: NOTIFICATION_IMAGE,
+      borderRadius: 8,
+    },
+    headline: {
+      fontFamily: fonts.type.bold,
+      color: colors().grayShade_100,
+      fontSize: moderateScale(12)
+    },
+    tagline: {
+      fontFamily: fonts.type.regular,
+      color: colors().grayShade_200,
+      fontSize: 12
+    },
+    timestamp: {
+      fontFamily: fonts.type.light,
+      color: colors().grayShade_300,
+      fontSize: 12
+    }
+  })
+
+  return (
+    <View style={styles.cardContainer}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Image source={images.imageCard ?? profileImage} style={styles.profileIcon} />
+        <View style={{ paddingLeft: horizontalScale(8) }}>
+          <Text style={styles.headline}>{headline ?? "semina is now following you"}</Text>
+          <Text style={styles.tagline}>{tagline ?? "semi has posted new politics news"}</Text>
+          <Text style={styles.timestamp}>{getTimestamp(timestamp) ?? getTimestamp("2023-06-16T11:57:52.458032Z")}</Text>
+        </View>
+      </View>
+      <View>
+        {image ? <Image source={images.horizontalCard ?? image} style={styles.notificationImage} /> : <></>}
+      </View>
+
+    </View>
+  )
+}
+
+export default NotificationCard
+

src/components/molecules/Cards/ProfileImageCard.js

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'
+import React from 'react'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics';
+import colors from '../../../constants/colors';
+import images from '../../../assets/images/images';
+import EditButton from '../../atoms/Buttons/EditButton';
+
+
+const PROFILE_SIZE = 128;
+const EDIT_ICON_SIZE = 14
+
+const ProfileImageCard = (props) => {
+    const {
+        source,
+        onEdit
+    } = props
+
+    const styles = StyleSheet.create({
+        profileImageContainer: {
+            paddingVertical: 16,
+            alignItems: 'center',
+            backgroundColor: colors().dominant
+        },
+        profileImage: {
+            height: verticalScale(PROFILE_SIZE),
+            width: horizontalScale(PROFILE_SIZE),
+            borderRadius: moderateScale(PROFILE_SIZE)
+        },
+        profileImageView: {
+            height: verticalScale(PROFILE_SIZE),
+            width: horizontalScale(PROFILE_SIZE),
+            borderRadius: moderateScale(PROFILE_SIZE),
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+            padding: 8
+        },
+        editIcon: {
+            alignSelf: 'flex-end',
+            justifyContent: 'flex-end',
+            backgroundColor: colors().primaryColor,
+            padding: 4,
+            borderRadius: 32
+        }
+    })
+
+    return (
+        <View style={styles.profileImageContainer}>
+            <ImageBackground source={source ?? images.imageCard} style={styles.profileImageView} imageStyle={styles.profileImage}>
+                <TouchableOpacity onPress={true}>
+                    <View style={styles.editIcon}>
+                        <EditButton iconSize={EDIT_ICON_SIZE} iconColor={colors().white} onPress={onEdit} />
+                    </View>
+                </TouchableOpacity>
+            </ImageBackground>
+        </View>
+    )
+}
+
+export default ProfileImageCard
+

src/components/molecules/Cards/VerticalNewsCard.js

@@ -0,0 +1,76 @@
+import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React, { useContext } from 'react'
+import colors from '../../../constants/colors'
+import images from '../../../assets/images/images'
+import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+const VerticalNewsCard = ({ image, headline, tagline, style, onPress }) => {
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+
+    const styles = StyleSheet.create({
+        cardContainer: {
+            width: 'auto',
+            maxWidth: horizontalScale(210),
+            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant ,
+            borderRadius: moderateScale(4),
+            height: verticalScale(300),
+            maxHeight: verticalScale(300),
+            marginRight: horizontalScale(16),
+            paddingBottom: verticalScale(24),
+            elevation: 4
+        },
+        textContainer: {
+            width: horizontalScale(210),
+            maxWidth: screenWidth,
+            height: "50%",
+            paddingHorizontal: horizontalScale(14),
+            paddingVertical: verticalScale(8)
+        },
+        imagesContainer: {
+            width: '100%',
+            height: '50%'
+
+        },
+        image: {
+            borderRadius: moderateScale(4),
+            width: '100%',
+            height: '100%'
+        },
+        headline: {
+            fontFamily: fonts.type.medium,
+            textDecorationLine: 'underline',
+            fontSize: 14,
+            color: colors().recessive ,
+            paddingBottom: 8
+        },
+        tagline: {
+            fontSize: 12,
+            fontFamily: fonts.type.regular,
+            maxHeight: '40%',
+            overflow: 'hidden',
+            color: colors().recessive
+            
+        }
+    })
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={[styles.cardContainer, style]}>
+                <View style={styles.imagesContainer}>
+                    <Image source={image ?? images.verticalCard} style={styles.image} />
+                </View>
+                <View style={styles.textContainer}>
+                    <Text style={styles.headline}> {headline ?? "Aston Villa avoid relegation on final day"}</Text>
+                    <Text style={styles.tagline}>{tagline ?? "The reason behind their disappointment is that iPir disappointment is that iPhonsers have been."}</Text>
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    )
+}
+
+export default VerticalNewsCard
+

src/components/molecules/Header/NewscoutCenteredTitleHeader.js

@@ -0,0 +1,36 @@
+import { StyleSheet, Text} from 'react-native'
+import React, { useContext } from 'react'
+import Header from '../../atoms/Header/Header'
+import colors from '../../../constants/colors'
+import { moderateScale } from '../../../constants/metrics'
+import fonts from '../../../constants/fonts'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+const NewscoutCenteredTitleHeader = ({children, backButtonShown, onBackClick, title, titleStyle }) => {
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+    const styles = StyleSheet.create({
+        title: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(16),
+            color: colors().recessive,
+        },
+        titleContainer:{
+            flexDirection:'row',
+            alignItems:'center',
+            gap: 8
+
+        }
+    })
+    return (
+        <Header onBackClick={onBackClick} backButtonShown={backButtonShown}>
+            
+            <Text style={[styles.title, titleStyle]}>{title ?? "Title"}</Text>
+            {children}
+        </Header>
+    )
+}
+
+export default NewscoutCenteredTitleHeader

src/components/molecules/Header/NewscoutHomeHeader.js

@@ -0,0 +1,35 @@
+import { StyleSheet} from 'react-native'
+import React from 'react'
+import colors from '../../../constants/colors'
+import Header from '../../atoms/Header/Header'
+import { moderateScale } from '../../../constants/metrics'
+import NewscoutLogo from '../../atoms/Logo/NewscoutLogo'
+
+
+
+const NewscoutHomeHeader = ({ children, headerStyle}) => {
+  
+
+  const styles = StyleSheet.create({
+    headerLogo: {
+      height: moderateScale(64),
+      width: moderateScale(64)
+    },
+    header:{
+      backgroundColor: colors().dominant
+    }
+  })
+
+  return (
+    <Header style={[styles.header,headerStyle]}
+      backIconTextComponent={<NewscoutLogo style={styles.headerLogo} />}
+    >
+      
+
+      {children}
+    </Header>
+  )
+}
+
+export default NewscoutHomeHeader
+

src/components/molecules/Header/NewscoutTextHeader.js

@@ -0,0 +1,41 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import NewscoutTextLogo from '../../atoms/Logo/NewscoutTextLogo'
+import colors from '../../../constants/colors'
+import { moderateScale } from '../../../constants/metrics'
+import Header from '../../atoms/Header/Header'
+
+
+const NewscoutTextHeader = props => {
+
+    const {
+        navigation, 
+        route,
+        children,
+        headerStyle
+    }= props
+    
+  
+    const styles = StyleSheet.create({
+      headerLogo: {
+        height: moderateScale(32),
+        width: moderateScale(32)
+      },
+      header:{
+        backgroundColor: colors().dominant,
+        alignItems: 'center'
+      }
+    })
+  
+    return (
+      <Header style={[styles.header,headerStyle]}
+        backIconTextComponent={<NewscoutTextLogo style={styles.headerLogo} />}
+      >
+        
+  
+        {children}
+      </Header>
+    )
+}
+
+export default NewscoutTextHeader

src/components/molecules/Header/NewscoutTitleHeader.js

@@ -0,0 +1,47 @@
+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 fonts from '../../../constants/fonts'
+import Header from '../../atoms/Header/Header'
+
+
+const NewscoutTitleHeader = ({ title, titleStyle, children, backButtonShown, onBackClick}) => {
+    
+    const styles = StyleSheet.create({
+        title: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(16),
+            color: colors().recessive,
+        },
+        titleContainer:{
+            flexDirection:'row',
+            alignItems:'center',
+            gap: 8
+    
+        }
+    })
+
+    return (
+        <Header 
+            backButtonShown={backButtonShown} 
+            onBackClick={onBackClick}
+            backIconTextComponent={
+                <Text style={[styles.title, titleStyle]}>{title ?? "Title"}</Text>
+            }   
+        
+        >
+            {/* <View style={styles.titleContainer}> */}
+               
+                
+                
+                {children}
+            {/* </View> */}
+            
+        </Header>
+    )
+}
+
+export default NewscoutTitleHeader
+

src/components/molecules/Header/SectionHeader.js

@@ -0,0 +1,54 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useContext } from 'react'
+import { List } from 'react-native-paper'
+import Header from '../../atoms/Header/Header'
+import { horizontalScale, moderateScale } from '../../../constants/metrics'
+import colors from '../../../constants/colors'
+import fonts from '../../../constants/fonts'
+import { ThemeContext } from '../../../context/theme.context'
+
+
+const SectionHeader = ({ label, onPress }) => {
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+  const styles = StyleSheet.create({
+    recentHeader: {
+        paddingHorizontal: horizontalScale(16),
+        backgroundColor: colors().dominant
+      },
+      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 style={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>
+    )
+}
+
+export default SectionHeader
+

src/components/organisms/Sections/BookmarkSection.js

@@ -0,0 +1,42 @@
+import { StyleSheet, Text, View, FlatList } from 'react-native'
+import React from 'react'
+// import SearchTextInput from '../../molecules/SearchTextInput'
+import fonts from '../../../theme/fonts'
+import { horizontalScale, verticalScale } from '../../../constants/metrics'
+import HorizontalNewsCardVariant from '../../molecules/Cards/HorizontalNewsCardVariant'
+
+const BookmarkSection = ({ navigation, data }) => {
+
+    //const data = []
+    const detailPageNavigation = (slug, id) => {
+        navigation.navigate("Landing", { 'screen': 'NewsDetailPage', params: {articleId: id, articleSlug: slug} })
+    }
+
+    return (
+        <View style={styles.container}>
+            <View >
+                {/* <SearchTextInput /> */}
+                <FlatList
+                    showsVerticalScrollIndicator={false}
+                    ItemSeparatorComponent={() => <View style={{ height: verticalScale(8) }}></View>}
+                    // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+                    ListHeaderComponent={() => <View style={{ height: verticalScale(16) }}></View>}
+                    data={data}
+                    renderItem={(item) => <HorizontalNewsCardVariant onPress={() => detailPageNavigation("fox-news-hosts-own-words-come-back-to-haunt-trump-in-brutal-msnbc-supercut-2057347", "2057175")} />}
+                    keyExtractor={item => data.indexOf(item)}
+
+                />
+            </View>
+
+        </View>
+    )
+}
+
+export default BookmarkSection
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: horizontalScale(16),
+    }
+
+})

src/components/organisms/Sections/CategorySection.js

@@ -0,0 +1,218 @@
+import { StyleSheet, Text, View, ScrollView } 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';
+import { PAGINATE_BY, getScreenType, useConstructor } from '../../../constants/functions';
+import SectionHeader from '../../molecules/Header/SectionHeader';
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics';
+import { ThemeContext } from '../../../context/theme.context';
+
+
+// * API Handling
+
+const CategorySection = ({ navigation }) => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const [news, setNews] = React.useState({ all: [] });
+  const updateNewsByCategories = (key, value) => {
+    setNews(prevObject => ({
+      ...prevObject,
+      [key]: value,
+    }));
+  };
+
+  const [categoryValue, setCategoryValue] = React.useState('');
+  const [categories, setCategories] = React.useState([]);
+  const fetchCategories = () => {
+    fetch(`http://www.newscout.in/api/v1/menus/?domain=newscout`)
+      .then(res => res.json())
+      .then(json => {
+        let categoriesHeading = json.body.results.map(
+          item => item.heading.name,
+        );
+        setCategories(categoriesHeading);
+        setNews({});
+        setNews(
+          categoriesHeading.reduce(
+            (result, key) => ({ ...result, [key]: [] }),
+            {},
+          ),
+        ),
+          setCategoryValue(categoriesHeading[0]);
+        return categoriesHeading;
+      })
+      .then(cats => {
+        cats.forEach(cat => {
+          fetchNews(cat);
+        });
+        return cats;
+      })
+      .catch(err => console.log(err))
+      .finally(() => console.log('Fetch Categories Executed'));
+  };
+
+  const fetchNews = category => {
+    fetch(
+      `http://www.newscout.in/api/v1/article/search/?domain=newscout&category=${category}`,
+    )
+      .then(res => res.json())
+      .then(data => {
+        const newsDataFetch = data.body.results;
+        const finalNewsData = newsDataFetch
+          .slice(0, PAGINATE_BY)
+          .map(article => ({
+            headline: article.title,
+            image: { uri: article.cover_image },
+            category: article.category,
+            root_category: article.root_category,
+            timestamp: article.published_on,
+            tagline: 'Bruh Momento Oi Lorem Ipsum di rubi rabbi',
+            id: article.id,
+            slug: article.slug
+          }));
+        updateNewsByCategories(category, finalNewsData);
+        // categories.forEach((category) => {setNews((prev) => ({...prev,[category]:json.body.results}))})
+        return finalNewsData;
+      })
+      .catch(err => console.log(err))
+      .finally(() => console.log('Fetch Category News Executed'));
+  };
+
+  const detailPageNavigation = (slug, id) => {
+    navigation.push('NewsDetailPage', { articleId: id, articleSlug: slug })
+  }
+
+
+  useConstructor(() => {
+    const cat_data = fetchCategories();
+    //console.log(`construct ${categories}`)
+    // for (let category in cat_data) {
+    //     updateNewsByCategories(category,fetchNews(category))
+
+    // }
+  });
+
+  // useEffect(() => {
+  //     for (let category in cat_data) {
+  //         fetchNews(category)
+
+  //     }
+  // })
+
+  const styles = StyleSheet.create({
+    categoriesTitle: {
+      flexDirection: 'row',
+      paddingTop: verticalScale(20),
+      paddingHorizontal: horizontalScale(20),
+    },
+    categoriesTitleText: {
+      flex: 1,
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      color: colors().recessive,
+    },
+    categoriesPillContainer: {
+      paddingBottom: verticalScale(8),
+      flexDirection: 'row',
+      alignItems: 'space-between',
+      paddingHorizontal: horizontalScale(16),
+      backgroundColor: colors().dominant
+    },
+    container: {
+      borderRadius: moderateScale(18),
+      paddingVertical: verticalScale(8),
+      paddingHorizontal: horizontalScale(16),
+      backgroundColor: colors().dominant,
+      width: 'auto',
+    },
+    selectedContainer: {
+      paddingVertical: verticalScale(8),
+      paddingHorizontal: horizontalScale(16),
+      backgroundColor: colors().primaryColor,
+      borderRadius: moderateScale(18),
+      width: 'auto',
+    },
+    selectedPillText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(12),
+      color: colors().white,
+    },
+    pillText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(12),
+      color: colors().recessive,
+    },
+    categoriesNewsContainer: getScreenType === "mobile" ? {
+      paddingHorizontal: horizontalScale(16),
+      paddingTop: verticalScale(10),
+      backgroundColor: colors().dominant,
+      gap: moderateScale(8),
+      flexWrap: 'wrap',
+      flexDirection: 'row'
+
+    } : {},
+  });
+
+
+  return (
+    <View style={styles.categoriesContainer}>
+      <SectionHeader label={'Categories'} />
+      <View style={styles.categoriesPillContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <ToggleButton.Group
+            onValueChange={value => {
+              setCategoryValue(value);
+            }}>
+            {categories.map(category => (
+              <ToggleButton
+                key={category}
+                icon={() => (
+                  <Text
+                    style={[
+                      category === categoryValue
+                        ? styles.selectedPillText
+                        : styles.pillText,
+                    ]}>
+                    {category}
+                  </Text>
+                )}
+                style={[
+                  category === categoryValue
+                    ? styles.selectedContainer
+                    : styles.container,
+                  { marginHorizontal: horizontalScale(4) },
+                ]}
+                value={category}
+              />
+            ))}
+          </ToggleButton.Group>
+        </ScrollView>
+      </View>
+      <View><ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.categoriesNewsContainer}>
+          {news[categoryValue] !== undefined ? (
+            news[categoryValue].map(item => (
+              <HorizontalNewsCardVariant
+                headline={item.headline}
+                image={item.image}
+                timestamp={item.timestamp}
+                tagline={item.tagline}
+                onPress={() => detailPageNavigation(item.slug, item.id)}
+              />
+            ))
+          ) : (
+            <Text> News Not Present</Text>
+          )}
+        </View>
+      </ScrollView></View>
+
+    </View>
+  );
+};
+
+export default CategorySection;
+

src/components/organisms/Sections/CommentSection.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const CommentSection = () => {
+  return (
+    <View>
+      <Text>CommentSection</Text>
+    </View>
+  )
+}
+
+export default CommentSection
+
+const styles = StyleSheet.create({})

src/components/organisms/Sections/LoadingScreen.js

@@ -0,0 +1,26 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { ActivityIndicator } from 'react-native-paper'
+import colors from '../../../constants/colors'
+
+
+const LoadingScreen = ({ containerWidth, containerHeight }) => {
+
+  const styles = StyleSheet.create({
+    container: {
+      height: containerHeight ?? '100%',
+      width: containerWidth ?? "100%",
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  })
+
+  return (
+    <View style={[styles.container]}>
+      <ActivityIndicator animating color={colors().primaryColor} size="large" />
+    </View>
+  )
+}
+
+export default LoadingScreen
+

src/components/organisms/Sections/NoBookmarkSection.js

@@ -0,0 +1,64 @@
+import { Image, ImageBackground, 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'
+
+
+const NoBookmarkSection = () => {
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors().dominant,
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: horizontalScale(16)
+    },
+    imageContainer: {
+
+    },
+    image: {
+      height: 300,
+      width: 300,
+      maxHeight: '80%',
+      maxWidth: '80%'
+    },
+    headline: {
+      color: colors().primaryColor,
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      paddingBottom: verticalScale(32)
+    },
+    button: {
+      backgroundColor: colors().secondaryColor,
+      marginHorizontal: horizontalScale(24),
+      maxWidth: '100%',
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: moderateScale(4)
+    },
+    buttonText: {
+
+      paddingVertical: verticalScale(12),
+      color: colors().recessive,
+      fontFamily: fonts.type.regular
+    }
+  })
+
+  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}>
+        <View style={styles.button}><Text style={styles.buttonText}>Explore News</Text></View>
+      </TouchableWithoutFeedback>
+    </View>
+  )
+}
+
+export default NoBookmarkSection
+

src/components/organisms/Sections/NotificationSection.js

@@ -0,0 +1,44 @@
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import fonts from '../../../constants/fonts'
+import colors from '../../../constants/colors'
+import images from '../../../assets/images/images'
+import { getDate } from '../../../constants/functions'
+import NotificationCard from '../../molecules/Cards/NotificationCard'
+
+
+const NotificationSection = ({ navigation }) => {
+
+
+  const styles = StyleSheet.create({
+    timestampText: {
+      padding: 8,
+      fontFamily: fonts.type.light,
+      color: colors().grayShade_100
+    },
+    notificationContainer: {
+
+    }
+  })
+
+  return (
+    <View >
+      <Text style={styles.timestampText}>{getDate("2023-06-16T11:57:52.458032Z")}</Text>
+      <View style={{ paddingHorizontal: 8, gap: 8 }}>
+        <NotificationCard
+          image={images.imageCard}
+          profileImage={images.horizontalCard}
+          headline={"semi has posted new politics news"}
+          tagline={"semi has posted new  politics news"}
+          timestamp={"2023-04-16T11:57:52.458032Z"}
+        />
+        <NotificationCard />
+        <NotificationCard />
+        <NotificationCard />
+      </View>
+
+    </View>
+  )
+}
+
+export default NotificationSection

src/components/organisms/Sections/RecentPostsSection.js

@@ -0,0 +1,77 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import React, { useContext } from 'react'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
+import VerticalNewsCard from '../../molecules/Cards/VerticalNewsCard'
+import { useConstructor } from '../../../constants/functions'
+import SectionHeader from '../../molecules/Header/SectionHeader'
+import { ThemeContext } from '../../../context/theme.context'
+import colors from '../../../constants/colors'
+
+const RecentPostsSection = () => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const [posts, setPosts] = React.useState([{}, {}, {}, {}, {}])
+
+  const fetchPosts = () => {
+    fetch("http://www.newscout.in/api/v1/article/search/?domain=newscout&category=Sector%20Updates")
+      .then((res) => res.json())
+      .then((json) => {
+        const postsFetched = json.body.results
+        const finalPosts = postsFetched.map((item, index) => ({
+          key: index,
+          id: item.id,
+          image: { uri: item.cover_image },
+          author: item.author,
+          headline: item.title
+        }))
+        setPosts(finalPosts)
+        return postsFetched
+      })
+      .then((data) => {
+        console.log(data[0].keys())
+        return data
+      })
+      .catch((err) => console.log(err))
+      .finally(() => console.log("Fetch Posts Executed"))
+  }
+
+  useConstructor(function () {
+    const fetchPost = fetchPosts();
+    console.log(fetchPost)
+  })
+
+  const styles = StyleSheet.create({
+    recentPostsContainer: {
+      paddingHorizontal: horizontalScale(16),
+      gap: moderateScale(4),
+      paddingBottom: verticalScale(16),
+      backgroundColor: colors().dominant,
+      flexDirection:'row'
+    }
+  })
+
+
+  return (
+    <View style={styles.container}>
+      <SectionHeader label={"Recents Posts"} />
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View style={styles.recentPostsContainer}>
+
+          {posts.map((item) => <VerticalNewsCard
+            key={item.key}
+            id={item.id}
+            image={item.image}
+            author={item.author}
+            headline={item.headline}
+          />)}
+
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default RecentPostsSection
+

src/components/organisms/Sections/TrendingSection.js

@@ -0,0 +1,166 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useContext } from 'react'
+import images from '../../../assets/images/images'
+import Carousel from 'react-native-reanimated-carousel';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { PAGINATE_BY, useConstructor } from '../../../constants/functions'
+import fonts from '../../../constants/fonts'
+import colors from '../../../constants/colors'
+import ImageBGCard from '../../molecules/Cards/ImageBGCard'
+import { moderateScale, screenHeight, screenWidth } from '../../../constants/metrics';
+import SectionHeader from '../../molecules/Header/SectionHeader';
+import { ThemeContext } from '../../../context/theme.context';
+
+
+
+// import {Q} from '@nozbe/watermelondb';
+// import withObservables from '@nozbe/with-observables';
+
+
+const ITEM_WIDTH = Math.round(screenWidth * 1);
+const ITEM_HEIGHT = Math.round(screenHeight * (1 / 3));
+
+/*
+   Enhanced News Card
+*/
+
+// const EnhancedImageBGCard = withObservables(['recent_news'], ({news}) => ({
+//   news: news.observe(),
+// }))(ImageBGCard);
+
+
+const TrendingSection = () => {
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const [currentCardIndex, setCurrentCardIndex] = React.useState(0)
+  const updateCurrentIndex = (index) => {
+    console.log('current index:', index)
+    setCurrentCardIndex(index)
+  }
+
+  const [posts, setPosts] = React.useState([{}, {}, {}, {}, {}])
+
+  const fetchPosts = () => {
+    fetch("http://www.newscout.in/api/v1/trending?domain=newscout")
+      .then((res) => res.json())
+      .then((json) => {
+        let postData = json.body.results
+        // const finalPostData = postData.slice(0,5).map((item)=> ({
+        //   image:item.cover_image,
+        //   author: item.author,
+        //   headline: item.title,
+        //   id: item.id,
+        // }))
+        let buffer = []
+        postData.slice(0, PAGINATE_BY).forEach((item) => buffer.push(...item.articles))
+        // let buffer = [] 
+        // for (const item of postData.slice(0,PAGINATE_BY)) {
+        //   buffer.push(...item.articles)
+        // }
+        // console.log(`Bruh ` + buffer)
+        const finalPostData = buffer.map((item) => ({
+          image: item.cover_image,
+          author: item.author,
+          headline: item.title,
+          id: item.id,
+        }))
+        setPosts(finalPostData)
+        return finalPostData
+      })
+      .catch((err) => console.log(err))
+      .finally(() => console.log("Fetch Posts Executed"))
+  }
+
+  useConstructor(function () {
+    fetchPosts()
+
+  })
+
+
+
+  const styles = StyleSheet.create({
+    recentHeader: {
+      paddingHorizontal: 16,
+    },
+    recentHeaderText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      color: colors().recessive
+    },
+    seeAllText: {
+      fontFamily: fonts.type.semibold,
+      color: colors().primaryColor,
+      paddingRight: 16,
+      alignSelf: 'stretch'
+
+    },
+    recentHeaderIcon: {
+
+    },
+    recentCardContainer: {
+      alignItems: 'center',
+      paddingHorizontal: 8,
+      width: screenWidth,
+      backgroundColor: colors().dominant
+    },
+    paginationContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingTop: 8,
+      paddingBottom: 8,
+      flexDirection: 'row',
+      gap: 2,
+      backgroundColor: colors().dominant 
+    }
+  })
+
+  return (
+    <View>
+      {/* <SectionHeader label={"Recent News"} /> */}
+      <SectionHeader label={"Trending"} />
+      <View style={styles.recentCardContainer}>
+        <Carousel
+          loop
+          width={ITEM_WIDTH}
+          height={ITEM_HEIGHT}
+          style={styles.recentCardContainer}
+          autoPlay={true}
+          data={posts}
+          scrollAnimationDuration={2000}
+          mode="parallax"
+          modeConfig={{
+            parallaxScrollingScale: 1,
+            parallaxScrollingOffset: 1,
+          }}
+          onSnapToItem={(index) => updateCurrentIndex(index)}
+          renderItem={({ index, item }) => (
+            <View style={{ paddingHorizontal: 16 }}>
+              <ImageBGCard
+                image={{ uri: item.image } ?? images.imageCard}
+                author={item.author ?? "Anonymous Author"}
+                headline={item.headline ?? `Bruh Moment ${index}`}
+              />
+            </View>
+          )}
+        />
+
+      </View>
+      <View style={styles.paginationContainer}>
+        {posts.map((item, index) => {
+          return <MaterialComIcon 
+          key={`dot_${index}`} 
+          name={"checkbox-blank-circle"} 
+          color={currentCardIndex === index ?
+               colors().secondaryColor :
+               colors().white_variant} size={12} />
+        })}
+      </View>
+    </View>
+  )
+}
+
+export default TrendingSection
+

src/constants/colors.js

@@ -0,0 +1,50 @@
+import { useContext } from "react";
+import { ThemeContext } from "../context/theme.context";
+
+
+const colors = () => {
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+    
+    return currentTheme === 'light' ? {
+        recessive: 'black',
+        recessive_variant: "#262626",
+        dominant: 'white',
+        dominant_variant: "#E3E3E3",
+        primaryColor: "#FF6E67",
+        primaryTintColor: "#FFF0F0",
+        secondaryColor: "#1E656D",
+
+        grayShade_100: "#444444",
+        grayShade_200: "#696969",
+        grayShade_300: "#A1A1A1",
+        grayShade_400: "#E7E7E7",
+        grayShade_500: "#F2F2F2",
+        black: 'black',
+        black_variant: "#262626",
+        white: 'white',
+        white_variant: "#E3E3E3",
+    } : {
+        dominant: 'black',
+        dominant_variant: "#262626",
+        recessive: 'white',
+        recessive_variant: "#E3E3E3",
+        primaryColor: "#FF6E67",
+        primaryTintColor: "#FFF0F0",
+        secondaryColor: "#1E656D",
+
+        grayShade_100: "#444444",
+        grayShade_200: "#696969",
+        grayShade_300: "#A1A1A1",
+        grayShade_400: "#E7E7E7",
+        grayShade_500: "#F2F2F2",
+        black: 'black',
+        black_variant: "#262626",
+        white: 'white',
+        white_variant: "#E3E3E3",
+    }
+}
+
+
+export default colors;

src/constants/fonts.js

@@ -0,0 +1,34 @@
+
+const weight = {
+    full: '900',
+    semi: '600',
+    low: '400',
+    bold: 'bold',
+    normal: 'normal'
+}
+
+const type = {
+    black: "Poppins-Black",
+    black_italic:"Poppins-BlackItalic",
+    bold:"Poppins-Bold",
+    bold_italic: "Poppins-BoldItalic",
+    extra_bold: "Poppins-ExtraBold",
+    extra_bold_italic: "Poppins-ExtraBoldItalic",
+    extra_light: "Poppins-ExtraLight",
+    extra_LightItalic: "Poppins-ExtraLightItalic",
+    italic: "Poppins-Italic",
+    light: "Poppins-Light",
+    light_italic: "Poppins-LightItalic",
+    medium: "Poppins-Medium",
+    medium_italic: "Poppins-MediumItalic",
+    regular: "Poppins-Regular",
+    semibold: 'Poppins-SemiBold',
+    semibold_italic: "Poppins-SemiBoldItalic",
+    thin: "Poppins-Thin",
+    thin_italic: "Poppins-ThinItalic"
+}
+
+export default {
+    weight,
+    type,
+}

src/constants/functions.js

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { screenWidth } from "./metrics";
+
+export const PAGINATE_BY = 5
+
+/*
+    Executes before Render
+*/
+export const useConstructor = (callBack = () => { }) => {
+    const [hasBeenCalled, setHasBeenCalled] = useState(false);
+    if (hasBeenCalled) return;
+    callBack();
+    setHasBeenCalled(true);
+}
+
+const _MS_PER_SECOND = 1000;
+const _MS_PER_MINUTE = _MS_PER_SECOND * 60;
+const _MS_PER_HOUR = _MS_PER_MINUTE * 60;
+const _MS_PER_DAY = _MS_PER_HOUR * 24;
+const _MS_PER_MONTH = _MS_PER_DAY * 31;
+const _MS_PER_YEAR = _MS_PER_MONTH * 12;
+
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.substring(1, str.length).toLowerCase()
+
+export const getDifferenceInDates = (startDate, endDate) => {
+    var diff = Math.floor(startDate.getTime() - endDate.getTime());
+    return {
+        "year": Math.floor(diff / _MS_PER_YEAR),
+        "month": Math.floor(diff / _MS_PER_MONTH),
+        "day": Math.floor(diff / _MS_PER_DAY),
+        "hour": Math.floor(diff / _MS_PER_HOUR),
+        "minute": Math.floor(diff / _MS_PER_MINUTE),
+        "second": Math.floor(diff / _MS_PER_SECOND),
+    }
+
+}
+
+export const getTimestamp = (iso_date_str) => {
+    let diffObj = getDifferenceInDates(new Date(), new Date(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`
+            break
+        }
+    }
+    return result
+
+}
+
+const _getMonth = (index) => {
+    const months = {
+        0: "January",
+        1: "Febraury",
+        2: "March",
+        3: "April",
+        4: "May",
+        5: "June",
+        6: "July",
+        7: "August",
+        8: "September",
+        9: "October",
+        10: "November",
+        11: "December"
+    }
+    if (Object.hasOwn(months, index)) {
+        return months[index]
+
+    } else {
+        return "Month Not Found"
+    }
+
+}
+
+export const getDate = (iso_date_str) => {
+    let date = new Date(iso_date_str)
+    return `${date.getDate()} ${_getMonth(date.getMonth())} ${date.getFullYear()}`
+}
+
+const MOBILE_SCREEN_BREAKPOINT = 480;
+const TABLET_SCREEN_BREAKPOINT = 768;
+const LARGE_SCREEN_BREAKPOINT = 1180;
+
+
+export const MOBILE_SCREEN = "Mobile"
+export const TABLET_SCREEN = "Tablet"
+export const DESKTOP_SCREEN = "Desktop"
+
+export const getScreenType = () => {
+    let screenType;
+    if (screenWidth <= MOBILE_SCREEN_BREAKPOINT) {
+        screenType = MOBILE_SCREEN
+    }else if(screenWidth <= TABLET_SCREEN_BREAKPOINT){
+        screenType = TABLET_SCREEN
+    }else {
+        screenType = DESKTOP_SCREEN
+    }
+    return screenType
+}
+
+
+const validateEmail = (email) => {
+    const emailRegex = "^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$"
+    return String(email).match(emailRegex)
+}
+

src/constants/metrics.js

@@ -0,0 +1,28 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('screen');
+
+const guidelineBaseWidth = 375;
+const guidelineBaseHeight = 812;
+
+/*
+
+Use HorizontalScale for width, marginLeft, marginRight, paddingLeft,paddingRight,
+paddingHorizontal, likewise
+
+Use VerticalScale for width, marginTop, marginBottom, marginVertical, line-height,paddingTop, paddingBottom,paddingVertical, likewise
+
+Use ModerateScale for font-size, borderRadius , likewise
+
+*/
+
+
+const screenDimensions = Dimensions.get("screen")
+const screenWidth = screenDimensions.width
+const screenHeight = screenDimensions.height
+
+const horizontalScale = (size) => (width / guidelineBaseWidth) * size;
+const verticalScale = (size) => (height / guidelineBaseHeight) * size;
+const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
+
+export { horizontalScale, verticalScale, moderateScale, screenHeight,screenWidth};

src/context/auth.context.js

@@ -0,0 +1,52 @@
+import React, { createContext, useState } from 'react'
+
+const AuthContext = createContext(null)
+
+const initialState = {
+    isLoggedIn: false,
+    isLoginPending: false,
+    loginError: null
+}
+
+const AuthProvider = props => {
+    const [state, setState] = useState(initialState);
+
+    const setLoginPending = (isLoginPending) => setState({ isLoginPending });
+    const setLoginSuccess = (isLoggedIn) => setState({ isLoggedIn });
+    const setLoginError = (loginError) => setState({ loginError });
+
+    const login = (email, password) => {
+        setLoginPending(true);
+        setLoginSuccess(false);
+        setLoginError(null);
+
+        fetchLogin(email, password, error => {
+            setLoginPending(false);
+
+            if (!error) {
+                setLoginSuccess(true);
+            } else {
+                setLoginError(error);
+            }
+        })
+    }
+
+    const logout = () => {
+        setLoginPending(false);
+        setLoginSuccess(false);
+        setLoginError(null);
+    }
+
+    return (
+        <AuthContext.Provider
+            value={{ state, login, logout }}
+        >
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+export {
+    AuthContext,
+    AuthProvider
+}

src/context/theme.context.js

@@ -0,0 +1,38 @@
+import React, { createContext, useReducer } from 'react'
+import { Appearance, useColorScheme } from 'react-native';
+
+const ThemeContext = createContext()
+
+
+
+const themeReducer = (state, action) => {
+  switch (action.type) {
+    case "LIGHTMODE":
+      return { theme: 'light' };
+    case "DARKMODE":
+      return { theme: 'dark' };
+    default:
+      return state;
+  }
+};
+
+const ThemeProvider = ({ children }) => {
+
+  const initialState = {
+    theme: Appearance.getColorScheme()
+  }
+
+  const [state, dispatch] = useReducer(themeReducer, initialState);
+  return (
+    <ThemeContext.Provider
+      value={{ state: state, dispatch: dispatch }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export {
+  ThemeContext,
+  ThemeProvider
+}

src/navigation/AppNavigator.jsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomePageNavigator from './HomePageNavigator';
+import LandingPageNavigator from './LandingPageNavigator';
+
+const Stack = createNativeStackNavigator()
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const AppNavigator = () => {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator initialRouteName="Landing">
+                <Stack.Screen name="LandingPageNav" component={LandingPageNavigator} options={{ ...defaultScreenOptions }} />
+                <Stack.Screen name="HomePageNav" component={HomePageNavigator} options={{ ...defaultScreenOptions }} />
+            </Stack.Navigator>
+        </NavigationContainer>
+    )
+}
+
+export default AppNavigator
+
+const styles = StyleSheet.create({})

src/navigation/BookmarkNavigator.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import BookmarkPage from '../screens/Bookmarks/BookmarkPage';
+
+
+const Stack = createNativeStackNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const BookmarkNavigator = () => {
+  return (
+    <Stack.Navigator
+        initialRouteName='BookmarkPage'
+    >
+        <Stack.Screen
+            name="BookmarkPage"
+            component={BookmarkPage}
+            options={{...defaultScreenOptions}}
+        />
+    </Stack.Navigator>
+  )
+}
+
+export default BookmarkNavigator

src/navigation/HelpPageNavigator.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HelpPage from '../screens/Help/HelpPage';
+import FAQPage from '../screens/Help/FAQPage';
+import TermsConditionPage from '../screens/Help/TermsConditionPage';
+import PrivacyPolicyPage from '../screens/Help/PrivacyPolicyPage';
+import AboutUsPage from '../screens/Help/AboutUsPage';
+import ContactPage from '../screens/Help/ContactPage';
+
+
+const Stack = createNativeStackNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const HelpPageNavigator = () => {
+  return (
+    <Stack.Navigator
+        initialRouteName='HelpPage'
+    >
+        <Stack.Screen
+            name="HelpPage"
+            component={HelpPage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="FAQPage"
+            component={FAQPage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="ContactPage"
+            component={ContactPage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="TermsConditionsPage"
+            component={TermsConditionPage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="PrivacyPolicyPage"
+            component={PrivacyPolicyPage}
+            options={{...defaultScreenOptions}}
+        />
+         <Stack.Screen
+            name="AboutUsPage"
+            component={AboutUsPage}
+            options={{...defaultScreenOptions}}
+        />
+    </Stack.Navigator>
+  )
+}
+
+export default HelpPageNavigator

src/navigation/HomePageNavigator.jsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { getScreenType } from '../constants/functions';
+import colors from '../constants/colors';
+import SearchNavigator from './SearchNavigator';
+import MainPageNavigator from './MainPageNavigator';
+import SidebarPage from '../screens/Sidebar/SidebarPage';
+import BookmarkNavigator from './BookmarkNavigator';
+import ProfileNavigator from './ProfileNavigator';
+import { horizontalScale, verticalScale } from '../constants/metrics';
+import IonIcon from 'react-native-vector-icons/Ionicons'
+
+const Drawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const HomePageNavigator = () => {
+    return (
+
+        <Drawer.Navigator
+            initialRouteName="HomePage"
+            screenOptions={{
+                drawerType: 'front',
+                drawerStyle: getScreenType === "Mobile" ? { width: '100%' } : {width: '100%'},
+            }}
+            drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
+            <Drawer.Screen name="HomePageTabs" component={HomePageTabsNavigator} options={(navigation) => ({
+                headerShown: false
+            })} />
+        </Drawer.Navigator>
+
+    )
+}
+
+const HomePageTabsNavigator = ({ route, navigation }) => {
+    return (
+        <Tab.Navigator
+            screenOptions={({ route }) => ({
+                tabBarItemStyle: { paddingHorizontal: horizontalScale(36), flex: 0 },
+                tabBarStyle: { backgroundColor: colors().dominant_variant,height: verticalScale(64), alignItems: 'center'},
+                tabBarShowLabel: false,
+                tabBarIcon: ({ focused, color, size }) => {
+                    let iconName;
+                    let colorName;
+
+                    switch (route.name) {
+                        case "MainNav":
+                            iconName = "home-outline";
+                            break;
+                        case "SearchNav":
+                            iconName = "search-outline";
+                            break
+                        case "BookmarkNav":
+                            iconName = "bookmark-outline";
+                            break
+                        case "ProfileNav":
+                            iconName = 'person-outline';
+                            break
+                        default:
+                            break;
+                    }
+
+                    colorName = focused ? colors().primaryColor : colors().recessive;
+
+                    // You can return any component that you like here!
+                    return <IonIcon name={iconName} size={size} color={colorName} />;
+                },
+            })}
+
+        >
+            <Tab.Screen
+                name="MainNav"
+                component={MainPageNavigator}
+                options={(navigation) => ({ ...defaultScreenOptions })} 
+                />
+            <Tab.Screen
+                name="SearchNav"
+                component={SearchNavigator}
+                options={(navigation) => ({ ...defaultScreenOptions })} 
+                />
+            <Tab.Screen
+                name="BookmarkNav"
+                component={BookmarkNavigator}
+                options={(navigation) => ({ ...defaultScreenOptions })}
+                />
+            <Tab.Screen
+                name="ProfileNav"
+                component={ProfileNavigator}
+                options={(navigation) => ({ ...defaultScreenOptions })}
+                />
+        </Tab.Navigator>
+
+    )
+}
+
+export default HomePageNavigator

src/navigation/LandingPageNavigator.jsx

@@ -0,0 +1,37 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import UnsignedPage from '../screens/Auth/UnsignedPage';
+import LandingPage from '../screens/Auth/LandingPage';
+import SignInPage from '../screens/Auth/SignInPage';
+import SignUpPage from '../screens/Auth/SignUpPage';
+import ChooseTopicPage from '../screens/Auth/ChooseTopicPage';
+import FillProfile from '../screens/Profile/FillProfile';
+import ForgotPasswordPage from '../screens/Auth/ForgotPasswordPage';
+import OTPPage from '../screens/Auth/OTPPage';
+
+
+const Stack = createNativeStackNavigator()
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+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.Navigator>
+
+    )
+}
+
+export default LandingPageNavigator

src/navigation/MainPageNavigator.jsx

@@ -0,0 +1,34 @@
+import { View, Text} from 'react-native';
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import SearchPage from '../screens/Search/SearchPage';
+import HomePage from '../screens/HomePage/HomePage';
+import NotificationPage from '../screens/Notifications/NotificationPage';
+
+
+const Stack = createNativeStackNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const MainPageNavigator = () => {
+  return (
+    <Stack.Navigator
+        initialRouteName='MainPage'
+    >
+        <Stack.Screen
+            name="MainPage"
+            component={HomePage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="NotificationPage"
+            component={NotificationPage}
+            options={{...defaultScreenOptions}}
+        />
+    </Stack.Navigator>
+  )
+}
+
+export default MainPageNavigator

src/navigation/ProfileNavigator.jsx

@@ -0,0 +1,42 @@
+import { View, Text} from 'react-native';
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import SearchPage from '../screens/Search/SearchPage';
+import HomePage from '../screens/HomePage/HomePage';
+import BookmarkPage from '../screens/Bookmarks/BookmarkPage';
+import ProfilePage from '../screens/Profile/ProfilePage';
+import SettingsPage from '../screens/Settings/SettingsPage';
+import HelpPageNavigator from './HelpPageNavigator';
+
+
+const Stack = createNativeStackNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const ProfileNavigator = () => {
+  return (
+    <Stack.Navigator
+        initialRouteName='BookmarkPage'
+    >
+        <Stack.Screen
+            name="ProfilePage"
+            component={ProfilePage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="SettingsPage"
+            component={SettingsPage}
+            options={{...defaultScreenOptions}}
+        />
+        <Stack.Screen
+            name="HelpPageNav"
+            component={HelpPageNavigator}
+            options={{...defaultScreenOptions}}
+        />
+    </Stack.Navigator>
+  )
+}
+
+export default ProfileNavigator

src/navigation/SearchNavigator.jsx

@@ -0,0 +1,27 @@
+import { View, Text} from 'react-native';
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import SearchPage from '../screens/Search/SearchPage';
+
+const Stack = createNativeStackNavigator();
+
+const defaultScreenOptions = {
+    headerShown: false
+}
+
+const SearchNavigator = () => {
+  return (
+    <Stack.Navigator
+        initialRouteName='SearchPage'
+    >
+        <Stack.Screen
+            name="LandingPage"
+            component={SearchPage}
+            options={{...defaultScreenOptions}}
+        />
+    </Stack.Navigator>
+  )
+}
+
+export default SearchNavigator
+

src/screens/Auth/ChooseTopicPage.js

@@ -0,0 +1,64 @@
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import NewscoutTextHeader from '../../components/molecules/Header/NewscoutTextHeader'
+import colors from '../../constants/colors'
+import fonts from '../../constants/fonts'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+
+const ChooseTopicPage = props => {
+
+    const {
+        navigation, route
+    } = props
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors().dominant
+        },
+        skipButton: {
+            color: colors().recessive,
+            textDecorationLine: 'underline',
+            fontFamily: fonts.type.regular
+        },
+        topicsContainer: {
+            paddingHorizontal: horizontalScale(16),
+            backgroundColor: colors().dominant,
+            paddingBottom: verticalScale(16)
+        },
+        topicDescription: {
+            fontFamily: fonts.type.regular,
+            color: colors().recessive,
+            fontSize: moderateScale(16),
+            paddingVertical: verticalScale(16)
+        },
+        selectTopic:{
+            color: colors().recessive,
+            fontFamily: fonts.type.regular,
+            textAlign: 'center',
+            paddingVertical: verticalScale(16)
+        }
+    })
+
+    return (
+        <ScrollView>
+            <View style={styles.container}>
+                <NewscoutTextHeader>
+                    <TouchableOpacity>
+                        <Text style={styles.skipButton}>Skip</Text>
+                    </TouchableOpacity>
+                </NewscoutTextHeader>
+                <View style={styles.topicsContainer}>
+                    <Text style={styles.topicDescription}>Let’s choose the topic that interest you.</Text>
+                    <Text style={styles.selectTopic}>Select at least 3 topics*</Text>
+                    <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={() => navigation.navigate('FillProfile')}/>
+                </View>
+            </View>
+        </ScrollView>
+
+
+    )
+}
+
+export default ChooseTopicPage
+

src/screens/Auth/ForgotPasswordPage.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const ForgotPasswordPage = () => {
+  return (
+    <View>
+      <Text>ForgotPassword</Text>
+    </View>
+  )
+}
+
+export default ForgotPasswordPage
+
+const styles = StyleSheet.create({})

src/screens/Auth/LandingPage.js

@@ -0,0 +1,108 @@
+import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'
+import React, { useContext, useEffect } from 'react'
+import { ThemeContext } from '../../context/theme.context'
+import images from '../../assets/images/images'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+import colors from '../../constants/colors'
+import { moderateScale } from '../../constants/metrics'
+import fonts from '../../constants/fonts'
+import NewscoutTextLogo from '../../components/atoms/Logo/NewscoutTextLogo'
+
+
+
+
+const LandingPage = props => {
+  const {
+    navigation,
+    route
+  } = props
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const onClick = () => {
+    if (currentTheme === 'dark')
+      theme.dispatch({ type: "LIGHTMODE" });
+    else
+      theme.dispatch({ type: "DARKMODE" });
+  };
+
+
+  const styles = StyleSheet.create({
+    pageContainer: {
+
+    },
+    text: {
+      color: colors().recessive,
+      fontFamily: 'Poppins-Bold'
+    },
+    container: {
+      backgroundColor:  colors().dominant,
+      justifyContent: 'center',
+      flex: 1,
+      paddingHorizontal: moderateScale(16)
+    },
+    button: {
+      backgroundColor: colors().secondaryColor
+    },
+    logo: {
+      // width: moderateScale(84),
+      aspectRatio: 3.0,
+      width: '100%',
+      height: 64
+    },
+    logoContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: moderateScale(32)
+    },
+    sketchContainer: {
+      height: '42.5%',
+      width: '100%',
+
+    },
+    sketch: {
+      width: '100%',
+      height: '100%'
+    },
+    taglineContainer: {
+      padding: moderateScale(16),
+      paddingBottom: moderateScale(32)
+    },
+    tagline: {
+      fontFamily:fonts.type.medium,
+      fontSize: moderateScale(20)
+    }
+
+  })
+
+  const homePageNavigation = () => {
+    navigation.navigate('UnsignedPage')
+  }
+
+  return (
+    <View style={[styles.container]}>
+      <View style={styles.logoContainer}>
+        <NewscoutTextLogo style={styles.logo} />
+      </View>
+      <View style={styles.sketchContainer}>
+        <Image source={images.getStarted} style={[styles.sketch]} />
+      </View>
+      <View style={styles.taglineContainer}>
+        <Text style={[styles.tagline, { color: colors().recessive}]}> Get the latest news from </Text>
+        <Text style={[styles.tagline, { color: colors().primaryColor }]}> reliable sources. </Text>
+      </View>
+      <ThemedTextButton
+        title="Next"
+        theme={"secondary-contained"}
+        onPress={homePageNavigation}
+      />
+      <TouchableOpacity onPress={onClick} ><Text style={styles.text}>dsfsdhh</Text></TouchableOpacity>
+
+    </View>
+
+  )
+}
+
+export default LandingPage
+

src/screens/Auth/OTPPage.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const OTPPage = () => {
+  return (
+    <View>
+      <Text>OTPPage</Text>
+    </View>
+  )
+}
+
+export default OTPPage
+
+const styles = StyleSheet.create({})

src/screens/Auth/SignInPage.js

@@ -0,0 +1,96 @@
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'
+import React, { useContext } from 'react'
+import { ThemeContext } from '../../context/theme.context'
+import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
+import colors from '../../constants/colors'
+import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
+import fonts from '../../constants/fonts'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+import FormTextInput from '../../components/atoms/Input/FormTextInput'
+import Header from '../../components/atoms/Header/Header'
+
+const SignInPage = props => {
+    const { navigation, route } = props
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors().dominant,
+            flex: 1
+        },
+        signInText: {
+            fontFamily: fonts.type.bold,
+            color: colors().recessive,
+            alignSelf: 'center',
+            fontSize: moderateScale(24)
+        },
+        loginSection: {
+            paddingHorizontal: horizontalScale(24),
+            height: "max-content",
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flex: 1
+        },
+        loginDescription: {
+            backgroundColor: colors().dominant,
+            color: colors().recessive,
+            fontFamily: fonts.type.regular,
+            // paddingHorizontal: horizontalScale(24),
+            paddingVertical: verticalScale(16)
+        },
+        inputContainer: {
+            paddingVertical: verticalScale(16),
+            rowGap: verticalScale(16)
+        },
+        forgotPasswordText:{
+            color: colors().recessive,
+            fontFamily: fonts.type.regular,
+            paddingVertical: verticalScale(16),
+            textAlign: 'center',
+            textDecorationLine: 'underline'
+        }
+    })
+
+    const navigateToHome = () => {
+        navigation.reset({
+            index: 0,
+            routes: [{name: 'HomePageNav'}]
+        })
+    }
+
+    return (
+        
+            <View style={styles.container}>
+                <NewscoutHomeHeader />
+                <Header backButtonShown onBackClick={() => navigation.goBack()}>
+                    <Text style={styles.signInText}>Sign In</Text>
+                    <View></View>
+                </Header>
+                <View style={styles.loginSection}>
+                    <View>
+                        <Text style={styles.loginDescription}>Log In to your account to explore the article and news.</Text>
+                        <View style={styles.inputContainer}>
+                            <FormTextInput placeholder={"Email"} />
+                            <FormTextInput placeholder={"Password"} />
+                        </View>
+                        <ThemedTextButton title={"Login"} theme={'secondary'} onPress={navigateToHome}/>
+                        <TouchableOpacity><Text style={styles.forgotPasswordText}>Forgot Password</Text></TouchableOpacity>
+                    </View>
+
+
+
+                </View>
+                <View style={{ paddingBottom: verticalScale(32), paddingHorizontal: horizontalScale(24) }}>
+                    <ThemedTextButton title={"Create an Account"} theme={currentTheme === 'light' ? "white" : 'black'} onPress={() => navigation.navigate("SignUp")} />
+                </View>
+                
+            </View>
+        
+    )
+}
+
+export default SignInPage
+

src/screens/Auth/SignUpPage.js

@@ -0,0 +1,134 @@
+import { ScrollView, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
+import React, { useContext } from 'react'
+import { ThemeContext } from '../../context/theme.context'
+import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
+import Header from '../../components/atoms/Header/Header'
+import colors from '../../constants/colors'
+import fonts from '../../constants/fonts'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import FormTextInput from '../../components/atoms/Input/FormTextInput'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+
+const SignUpPage = props => {
+
+  const {
+    navigation,
+    route
+  } = props
+
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors().dominant,
+      height: '100%'
+    },
+    signInText: {
+      fontFamily: fonts.type.bold,
+      color: colors().recessive,
+      alignSelf: 'center',
+      fontSize: moderateScale(24)
+    },
+    signUpSection: {
+      paddingHorizontal: horizontalScale(24),
+      alignItems: 'center',
+    },
+    signUpDescription: {
+      backgroundColor: colors().dominant,
+      color: colors().recessive,
+      fontFamily: fonts.type.regular,
+      // paddingHorizontal: horizontalScale(24),
+      paddingVertical: verticalScale(16)
+    },
+    inputContainer: {
+      paddingVertical: verticalScale(16),
+      rowGap: verticalScale(8)
+    },
+    altLoginContainer: {
+      flexDirection: 'row',
+      gap: 16,
+      paddingTop: 8,
+      paddingVertical: verticalScale(16),
+    },
+    altLoginIcon: {
+      height: 64,
+      width: 64,
+      backgroundColor: colors().dominant_variant,
+      borderRadius: 16,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    alreadyAccountContainer:{
+      flexDirection: 'row',
+      
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  })
+
+  return (
+
+    <View style={styles.container}>
+      <ScrollView>
+      <NewscoutHomeHeader />
+      <Header backButtonShown onBackClick={() => navigation.goBack()}>
+        <Text style={styles.signInText}>Sign Up</Text>
+        <View></View>
+      </Header>
+      <View style={styles.signUpSection}>
+        <View>
+          <Text style={styles.signUpDescription}>Please fill up your detail to create an account.</Text>
+          <View style={styles.inputContainer}>
+            <FormTextInput label={"First Name"} placeholder={"First Name"} />
+            <FormTextInput label={"Last Name"} placeholder={"Last Name"} />
+            <FormTextInput label={"Email"} placeholder={"Email"} />
+            <FormTextInput label={"Password"} placeholder={"Password"} />
+          </View>
+          <ThemedTextButton title={"Sign Up"} theme={'secondary'} onPress={() => navigation.navigate('ChooseTopic')}/>
+        </View>
+
+        <View style={{paddingVertical: verticalScale(16)}}>
+          <Text style={{ textAlign: 'center', fontFamily: fonts.type.medium, color: colors().recessive }}>
+            or continue with
+          </Text>
+          <View style={styles.altLoginContainer}>
+            <TouchableOpacity>
+              <View style={styles.altLoginIcon}>
+                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <View style={styles.altLoginIcon}>
+                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <View style={styles.altLoginIcon}>
+                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity>
+              <View style={styles.altLoginIcon}>
+                <Text style={{ color: colors().white, fontFamily: fonts.type.regular }}>Test</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={styles.alreadyAccountContainer}>
+          <Text style={{ color:colors().recessive, fontFamily: fonts.type.regular, paddingBottom: 16 }}>Already have an account? </Text>
+          <TouchableOpacity>
+            <Text style={{ color: currentTheme === 'light' ? colors().secondaryColor : colors().primaryColor, fontFamily: fonts.type.regular, paddingBottom: 16 , paddingLeft: 4}}>Login </Text>
+          </TouchableOpacity>
+        </View>
+
+
+      </View>
+      </ScrollView>
+    </View>
+
+  )
+}
+
+export default SignUpPage
+

src/screens/Auth/UnsignedPage.js

@@ -0,0 +1,194 @@
+import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback } from 'react-native'
+import { useContext, useState } from 'react'
+import colors from '../../constants/colors'
+import { Portal, Modal, PaperProvider, IconButton } from 'react-native-paper'
+import fonts from '../../constants/fonts'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+import RecentPostsSection from '../../components/organisms/Sections/RecentPostsSection'
+import TrendingSection from '../../components/organisms/Sections/TrendingSection'
+import CategorySection from '../../components/organisms/Sections/CategorySection'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import CloseButton from '../../components/atoms/Buttons/CloseButton'
+import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
+import { ThemeContext } from '../../context/theme.context'
+
+
+const UnsignedPage = props => {
+    const {
+        navigation
+    } = props
+
+    const theme = useContext(ThemeContext)
+    const currentTheme = theme.state.theme
+
+    const [visible, setVisible] = useState(false);
+    const showModal = () => setVisible(true);
+    const hideModal = () => setVisible(false);
+
+    // For Login prompt
+    const [isDimissed, setDismissed] = useState(false);
+
+   
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors().dominant,
+            // paddingBottom: verticalScale(16)
+        },
+        loginContainer:{
+            backgroundColor: colors().dominant
+        },
+        loginText: {
+            fontFamily: fonts.type.regular,
+            padding: 16,
+            color: colors().recessive
+        },
+        underlinePillContainer: {
+            paddingVertical: 8,
+            flexDirection: 'row',
+            alignItems: 'space-between',
+
+        },
+        selectedPillText: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(12),
+            color: colors().recessive,
+            borderBottomWidth: verticalScale(4),
+            borderBottomColor: colors().secondaryColor,
+            borderRadius: 0
+
+
+        },
+        pillText: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(12),
+            color: colors().gray
+        },
+        underlinePill: {
+            width: 'auto',
+        },
+        cardContainer: {
+            gap: moderateScale(4),
+            paddingVertical: verticalScale(4)
+        },
+        modalContainerStyle: {
+            padding: moderateScale(16),
+            width: 'auto',
+            marginHorizontal: horizontalScale(32),
+            backgroundColor: colors().dominant,
+            borderRadius: moderateScale(4)
+        }
+    })
+
+    return (
+        <PaperProvider>
+            <View style={styles.container}>
+                <Portal>
+                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle}>
+                        <IconButton
+                            icon="close"
+                            iconColor={colors().recessive}
+                            size={16}
+                            onPress={hideModal}
+                            style={{ alignSelf: 'flex-end' }}
+                        />
+                        <Text
+                            style={{
+                                fontFamily: fonts.type.regular,
+                                color: colors().recessive,
+                                fontSize: moderateScale(14),
+                                paddingTop: moderateScale(8),
+                                paddingBottom: moderateScale(16)
+                            }}
+                        >
+                            You are not logged in. Log in to bookmark news, leave comment and to explore more!
+                        </Text>
+                        <ThemedTextButton title="Login" onPress={() => navigation.navigate("SignIn")} theme={"secondary-contained"} />
+                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingVertical: moderateScale(16) }}>
+                            <Text
+                                style={{
+                                    color: colors().recessive,
+                                    fontFamily: fonts.type.regular
+                                }}
+                            >Don’t have account? </Text>
+                            <TouchableWithoutFeedback onPress={() => navigation.navigate("SignUp")}>
+                                <Text
+                                    style={{
+                                        color: colors().secondaryColor,
+                                        fontFamily: fonts.type.regular
+                                    }}
+                                >
+                                    Create one
+                                </Text>
+                            </TouchableWithoutFeedback>
+                        </View>
+                    </Modal>
+                </Portal>
+                <ScrollView showsVerticalScrollIndicator={false}>
+
+                    {
+                        isDimissed === false ? <View style={styles.loginContainer}>
+                            <NewscoutHomeHeader >
+                                <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>
+                            <View style={{ paddingHorizontal: 16 }}>
+                                <ThemedTextButton theme={'secondary'} title={"Login"} onPress={showModal} />
+                            </View>
+                        </View> : <NewscoutHomeHeader />
+
+
+                    }
+                    <TrendingSection />
+                    <CategorySection />
+                    <RecentPostsSection />
+
+                    {/* <View style={styles.underlinePillContainer}>
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                        <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
+                            {
+                                categories.map((category) => {
+                                    let valueId = category.toLowerCase()
+                                    return <ToggleButton
+                                        icon={() =>
+                                            <Text style={
+                                                [
+                                                    valueId === categoryValue ?
+                                                        styles.selectedPillText :
+                                                        styles.pillText,
+                                                    {
+                                                        paddingHorizontal: fonts.getSize(11),
+                                                        fontSize: fonts.getSize(16)
+                                                    }
+                                                ]
+                                            }>
+                                                {category}
+                                            </Text>}
+                                        style={[styles.underlinePill]}
+                                        value={valueId}
+                                    />
+                                })
+                            }
+                        </ToggleButton.Group>
+                    </ScrollView>
+                </View>
+                <FlatList
+                    showsVerticalScrollIndicator={false}
+                    ItemSeparatorComponent={() => <View style={{ height: fonts.getSize(8) }}></View>}
+                    // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+                    ListHeaderComponent={() => <View style={{ height: fonts.getSize(16) }}></View>}
+                    data={news}
+                    renderItem={(item) => <HorizontalNewsCardVariant onPress={true} />}
+                    keyExtractor={item => news.indexOf(item)}
+
+                /> */}
+                </ScrollView>
+
+            </View>
+
+        </PaperProvider>
+    )
+}
+
+
+export default UnsignedPage
+

src/screens/Bookmarks/BookmarkPage.js

@@ -0,0 +1,49 @@
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import colors from '../../constants/colors'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+import OctiIcon from 'react-native-vector-icons/Octicons'
+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'
+const BookmarkPage = props => {
+
+  const [bookmarks, setBookmarks] = React.useState([0, 0, 0, 0, 0])
+
+  const { navigation, route } = props
+
+  const styles = StyleSheet.create({
+    bookmarkContainer: {
+      backgroundColor: colors().dominant,
+      paddingVertical: verticalScale(16),
+      paddingHorizontal: horizontalScale(16),
+      gap: verticalScale(8)
+    }
+  })
+
+  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} />
+        </TouchableWithoutFeedback>
+      </NewscoutTitleHeader>
+
+      {
+        bookmarks.length <= 0 ?
+          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ height: '100%' }} style={{}}>
+            <NoBookmarkSection />
+          </ScrollView> : <ScrollView contentContainerStyle={styles.bookmarkContainer} >
+            {bookmarks.map((item) => <HorizontalNewsCardVariant />)}
+          </ScrollView>
+      }
+
+
+
+    </View>
+  )
+}
+
+export default BookmarkPage
+

src/screens/Help/AboutUsPage.js

@@ -0,0 +1,77 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import colors from '../../constants/colors';
+import fonts from '../../constants/fonts';
+import { ScrollView } from 'react-native-gesture-handler';
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
+import NewscoutLogo from '../../components/atoms/Logo/NewscoutLogo';
+
+const AboutUsPage = props => {
+    const { navigation } = props;
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors().dominant,
+            height: '100%',
+        },
+        logoContainer: {
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        logoStyle: {
+            height: 240,
+            width: 240,
+        },
+        tagline: {
+            fontFamily: fonts.type.medium,
+            color: colors().recessive_variant,
+            textAlign: 'center',
+        },
+        aboutText: {
+            textAlign: 'left',
+            paddingVertical: 16,
+            paddingHorizontal: 24,
+            color: colors().recessive,
+            // fontFamily: fonts.type.regular,
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <ScrollView showsVerticalScrollIndicator={false}>
+                <NewscoutTitleHeader
+                    title={'About Us'}
+                    backButtonShown
+                    onBackClick={() => navigation.goBack()}
+                />
+                <View style={styles.logoContainer}>
+                    <NewscoutLogo style={styles.logoStyle} />
+                </View>
+                <Text style={styles.tagline}>
+                    We focused on Providing best news and article
+                </Text>
+                <Text style={styles.aboutText}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing incididunt ut
+                    labore et dolore maliquip ex ea commodo consequat."Lorem ipsum dolor
+                    sit amet, consectetur adipiscing incididunt ut labore et dolore
+                    maliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                    exercitation ullamco laboris nis
+                </Text>
+                <Text style={styles.aboutText}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing incididunt ut
+                    labore et dolore maliquip ex ea commodo consequat."Lorem ipsum dolor
+                    sit amet, consectetur adipiscing incididunt ut labore et dolore
+                    maliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
+                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                    exercitation ullamco laboris nis
+                </Text>
+            </ScrollView>
+        </View>
+    );
+};
+
+export default AboutUsPage;
+

src/screens/Help/ContactPage.js

@@ -0,0 +1,51 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { SafeAreaView } from 'react-native-safe-area-context';
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
+import { ScrollView } from 'react-native-gesture-handler';
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton';
+import FormTextInput from '../../components/atoms/Input/FormTextInput';
+import { capitalize } from '../../constants/functions';
+import colors from '../../constants/colors';
+
+const ContactPage = props => {
+
+    const { navigation, route } = props
+
+    const [contactDetails, setContactDetails] = React.useState({
+        fullname: '',
+        email: '',
+        message: ''
+    });
+
+    return (
+        <SafeAreaView style={{backgroundColor: colors().dominant, height: '100%'}}>
+            <NewscoutTitleHeader title={"Contact Us"} backButtonShown onBackClick={() => navigation.goBack()} />
+            <ScrollView showsVerticalScrollIndicator>
+                <SafeAreaView style={{ padding: 16, gap: 8 }}>
+                    {Object.keys(contactDetails).map(key => <FormTextInput
+                        title={capitalize(key)}
+                        multiline
+                        placeholder={capitalize(key)}
+                        value={contactDetails[key]}
+                        onChange={text =>
+                            setProfileData(prev => ({ ...prev, [key]: text }))
+                        }
+                    />)}
+                    <ThemedTextButton
+                        title={'Contact Us'}
+                        onPress={true}
+                        theme={'secondary-contained'}
+                        buttonStyle={{
+                            marginVertical: 16,
+                            width: 'auto'
+                        }} />
+                </SafeAreaView>
+            </ScrollView>
+        </SafeAreaView>
+    )
+}
+
+export default ContactPage
+
+const styles = StyleSheet.create({})

src/screens/Help/FAQPage.js

@@ -0,0 +1,225 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import colors from '../../constants/colors';
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
+import fonts from '../../constants/fonts';
+import { ScrollView } from 'react-native-gesture-handler';
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
+import { List, ToggleButton } from 'react-native-paper';
+
+const questions = [
+    {
+        id: 0,
+        title: 'What is Newscout?',
+        answer:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
+    },
+    {
+        id: 1,
+        title: 'How to use Newscout?',
+        answer:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
+    },
+    {
+        id: 2,
+        title: 'Can I create my own news?',
+        answer:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
+    },
+    {
+        id: 3,
+        title: 'How can I upload images?',
+        answer:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
+    },
+    {
+        id: 4,
+        title: 'Is Newscout free to use?',
+        answer:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
+    }
+];
+
+
+const FAQPage = props => {
+
+    const {
+        navigation,
+        route
+    } = props
+
+    const faqCategories = [
+        'General',
+        'Login',
+        'Account',
+        'Viability',
+        'Legal'
+    ]
+
+    const [categoryValue, setCategoryValue] = React.useState(faqCategories[0])
+
+
+    const [expandedId, setExpandedId] = React.useState('');
+
+    const handleAccordionPress = accordionId => {
+        setExpandedId(accordionId === expandedId ? '' : accordionId);
+    };
+
+    
+
+    const styles = StyleSheet.create({
+        selectedAccordionContainer: {
+            borderTopWidth: moderateScale(2),
+            borderRightWidth: moderateScale(2),
+            borderLeftWidth: moderateScale(2),
+            borderTopLeftRadius: moderateScale(16),
+            borderTopRightRadius: moderateScale(16),
+            borderColor: colors().primaryColor,
+            paddingVertical: 4,
+            height: 'auto',
+            backgroundColor: colors().dominant
+        },
+        accordionContainer: {
+            borderWidth: moderateScale(2),
+            borderColor: colors().grayShade_400,
+            borderRadius: moderateScale(16),
+            height: 'auto',
+            paddingVertical: verticalScale(16),
+            backgroundColor: colors().dominant
+        },
+        accordionTitle: {
+            fontFamily: fonts.type.semibold,
+            color: colors().recessive,
+        },
+        accordionDescription: {
+            fontFamily: fonts.type.medium,
+            color: colors().grayShade_200
+        },
+
+        selectedPillText: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(12),
+            color: colors().white,
+        },
+        pillText: {
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(12),
+            color: colors().recessive,
+        },
+        categoriesPillContainer: {
+            paddingBottom: moderateScale(8),
+            flexDirection: 'row',
+            alignItems: 'space-between',
+            paddingHorizontal: moderateScale(16),
+        },
+        container: {
+            borderRadius: moderateScale(18),
+            paddingVertical: verticalScale(8),
+            paddingHorizontal: horizontalScale(16),
+            backgroundColor: colors().dominant_variant,
+            width: 'auto',
+        },
+        selectedContainer: {
+            paddingVertical: verticalScale(8),
+            paddingHorizontal: horizontalScale(16),
+            backgroundColor: colors().primaryColor,
+            borderRadius: moderateScale(18),
+            width: 'auto',
+        },
+        pillContainer: {
+            paddingVertical: verticalScale(16),
+            paddingLeft: horizontalScale(16),
+        },
+        faqContainer: {
+            backgroundColor: colors().dominant
+        }
+    });
+
+
+    return (
+        <View style={styles.faqContainer}>
+            <ScrollView showsVerticalScrollIndicator={false}>
+                <NewscoutTitleHeader
+                    title={'FAQ'}
+                    backButtonShown
+                    onBackClick={() => navigation.goBack()}
+                />
+
+                <View style={styles.pillContainer}>
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                        <ToggleButton.Group
+                            onValueChange={value => {
+                                setCategoryValue(value);
+                            }}>
+                            {faqCategories.map(category => (
+                                <ToggleButton
+                                    key={category}
+                                    icon={() => (
+                                        <Text
+                                            style={[
+                                                category === categoryValue
+                                                    ? styles.selectedPillText
+                                                    : styles.pillText,
+                                            ]}>
+                                            {category}
+                                        </Text>
+                                    )}
+                                    style={[
+                                        category === categoryValue
+                                            ? styles.selectedContainer
+                                            : styles.container,
+                                        { marginHorizontal: horizontalScale(4) },
+                                    ]}
+                                    value={category}
+                                />
+                            ))}
+                        </ToggleButton.Group>
+                    </ScrollView>
+                </View>
+                <List.Section style={{ paddingHorizontal: horizontalScale(16), gap: moderateScale(16) }}>
+                    <List.AccordionGroup
+                        expandedId={expandedId}
+                        onAccordionPress={handleAccordionPress}>
+                        {questions.map(item => (
+                            <List.Accordion
+                                title={item.title}
+                                key={item.id}
+                                id={item.id.toString()}
+                                style={
+                                    [expandedId === item.id.toString()
+                                        ? styles.selectedAccordionContainer
+                                        : styles.accordionContainer,
+                                        // styles.baseAccordionContainer
+                                    ]
+                                }
+                                titleStyle={styles.accordionTitle}>
+                                <View
+                                    style={[
+                                        {
+                                            borderColor: colors().primaryColor,
+                                            borderBottomWidth: moderateScale(2),
+                                            borderLeftWidth: moderateScale(2),
+                                            borderRightWidth: moderateScale(2),
+                                            borderBottomLeftRadius: moderateScale(16),
+                                            borderBottomRightRadius: moderateScale(16),
+                                            paddingHorizontal: horizontalScale(16),
+                                            paddingBottom: verticalScale(8),
+                                            backgroundColor: colors().dominant,
+                                        },
+                                    ]}>
+                                    <Text style={styles.accordionDescription}>
+                                        {item.answer}
+                                    </Text>
+                                </View>
+                            </List.Accordion>
+                        ))}
+                    </List.AccordionGroup>
+                </List.Section>
+            </ScrollView>
+        </View>
+    )
+}
+
+export default FAQPage
+
+const styles = StyleSheet.create({})

src/screens/Help/HelpPage.js

@@ -0,0 +1,94 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
+import { List } from 'react-native-paper';
+import EntypoIcon from 'react-native-vector-icons/Entypo';
+import colors from '../../constants/colors';
+import fonts from '../../constants/fonts';
+import { ScrollView } from 'react-native-gesture-handler';
+
+
+const HelpPage = props => {
+
+    const {
+        navigation,
+        route
+    } = props
+
+
+    const listItems = [
+        {
+            id: 0,
+            title: 'FAQ',
+            onPress: () => navigation.navigate('FAQPage'),
+        },
+        {
+            id: 1,
+            title: 'Contact Us',
+            onPress: () => navigation.navigate('ContactPage'),
+        },
+        {
+            id: 2,
+            title: 'Terms & Conditions',
+            onPress: () => navigation.navigate('TermsConditionsPage'),
+        },
+        {
+            id: 3,
+            title: 'Privacy Policy',
+            onPress: () => navigation.navigate('PrivacyPolicyPage'),
+        },
+        {
+            id: 4,
+            title: 'About Us',
+            onPress: () => navigation.navigate('AboutUsPage'),
+        },
+    ];
+
+    const styles = StyleSheet.create({
+        listItemText: {
+            fontFamily: fonts.type.medium,
+            color: colors().recessive
+        },
+        listItem: {
+            height: 64,
+            justifyContent: 'center',
+        },
+    });
+
+    return (
+        <View style={{ backgroundColor: colors().dominant, height: '100%' }}>
+            <NewscoutTitleHeader
+                title={'Help'}
+                backButtonShown
+                onBackClick={() => navigation.goBack()}
+            />
+            <ScrollView>
+                <View>
+
+                    {listItems.map(item => (
+                        <TouchableOpacity onPress={item.onPress}>
+                            <List.Item
+                                title={item.title}
+                                titleStyle={styles.listItemText}
+                                style={styles.listItem}
+                                key={item.id}
+                                right={props => (
+                                    <EntypoIcon
+                                        name="chevron-thin-right"
+                                        size={16}
+                                        color={colors().recessive}
+                                    />
+                                )}
+                            />
+                        </TouchableOpacity>
+                    ))}
+                </View>
+
+            </ScrollView>
+
+        </View>
+    )
+}
+
+export default HelpPage
+

src/screens/Help/PrivacyPolicyPage.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const PrivacyPolicyPage = () => {
+  return (
+    <View>
+      <Text>PrivacyPolicyPage</Text>
+    </View>
+  )
+}
+
+export default PrivacyPolicyPage
+
+const styles = StyleSheet.create({})

src/screens/Help/TermsConditionPage.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const TermsConditionPage = () => {
+  return (
+    <View>
+      <Text>TermsConditionPage</Text>
+    </View>
+  )
+}
+
+export default TermsConditionPage
+
+const styles = StyleSheet.create({})

src/screens/HomePage/HomePage.js

@@ -0,0 +1,39 @@
+import { StyleSheet, Text, View, ScrollView, TouchableWithoutFeedback } from 'react-native'
+import React from 'react'
+import CategorySection from '../../components/organisms/Sections/CategorySection'
+import RecentPostsSection from '../../components/organisms/Sections/RecentPostsSection'
+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'
+
+
+const HomePage = props => {
+
+  const { navigation, route } = props
+
+  return (
+    <View style={{backgroundColor: colors().dominant}}>
+
+      <ScrollView showsHorizontalScrollIndicator={false}>
+        <NewscoutHomeHeader>
+          <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>
+          </View>
+        </NewscoutHomeHeader>
+        <TrendingSection />
+        <CategorySection navigation={navigation} />
+        <RecentPostsSection />
+      </ScrollView>
+    </View>
+  )
+}
+
+export default HomePage
+
+const styles = StyleSheet.create({})

src/screens/Notifications/NotificationPage.js

@@ -0,0 +1,25 @@
+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 NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
+import colors from '../../constants/colors'
+
+
+const NotificationPage = props => {
+
+    const { navigation, route } = props
+    return (
+        <SafeAreaView>
+            <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown={true} onBackClick={() => navigation.goBack()}>
+                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                    <MaterialIcon name='list' color={colors().primaryColor} size={30} />
+                </TouchableWithoutFeedback>
+            </NewscoutCenteredTitleHeader>
+        </SafeAreaView>
+    )
+}
+
+export default NotificationPage
+
+const styles = StyleSheet.create({})

src/screens/Profile/FillProfile.js

@@ -0,0 +1,131 @@
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import React, { useState } from 'react'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+import ProfileImageCard from '../../components/molecules/Cards/ProfileImageCard'
+import FormTextInput from '../../components/atoms/Input/FormTextInput'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import colors from '../../constants/colors'
+import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
+import { Modal, PaperProvider, Portal } from 'react-native-paper'
+import LoadingScreen from '../../components/organisms/Sections/LoadingScreen'
+import images from '../../assets/images/images'
+import fonts from '../../constants/fonts'
+
+const FillProfile = props => {
+
+  const {
+    navigation,
+    route
+  } = props
+
+  const styles = StyleSheet.create({
+    container: {
+      height: '100%',
+      backgroundColor: colors().dominant
+    },
+    inputContainer: {
+      paddingHorizontal: horizontalScale(16),
+      backgroundColor: colors().dominant,
+      gap: verticalScale(4),
+      height: '100%'
+    },
+    modalContainerStyle: {
+      padding: moderateScale(8),
+      width: 'auto',
+      marginHorizontal: horizontalScale(32),
+      backgroundColor: colors().dominant,
+      borderRadius: moderateScale(4)
+    },
+    modalImageContainer: {
+      alignItems: 'center'
+
+    },
+    modalImage: {
+      width: 170,
+      height: 185
+    },
+    modalHeadline: {
+      color: colors().recessive,
+      fontFamily: fonts.type.medium,
+      fontSize: moderateScale(28),
+      textAlign: 'center',
+      paddingVertical: verticalScale(16)
+    },
+    modalDescription: {
+      color: colors().recessive,
+      fontFamily: fonts.type.regular,
+      fontSize: moderateScale(16),
+      textAlign: 'center',
+      paddingBottom: verticalScale(16)
+    }
+  })
+
+  const [visible, setVisible] = useState(false);
+  const showModal = () => setVisible(true);
+  const hideModal = () => setVisible(false);
+
+  // For Login prompt
+  const [isDimissed, setDismissed] = useState(false);
+
+  const [createdSuccessful, setcreatedSucessful] = useState(false)
+
+  const navigateToLogin = () => {
+    hideModal()
+    navigation.reset({
+      index: 0,
+      routes: [{name: 'SignIn'}]
+    })
+  }
+  return (
+    <PaperProvider>
+      <View style={styles.container}>
+        <Portal>
+          <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle} >
+            {createdSuccessful == null ?
+              <LoadingScreen containerHeight={verticalScale(256)} /> :
+              createdSuccessful === true ?
+                <View style={styles.modalContainerStyle}>
+                  <View style={styles.modalImageContainer}>
+                    <Image source={images.account_successful} style={styles.modalImage} />
+                  </View>
+                  <Text style={styles.modalHeadline}>Great!</Text>
+                  <Text style={styles.modalDescription}>Your account has been created successfully</Text>
+                  <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={navigateToLogin} />
+                </View> :
+                <View style={styles.modalContainerStyle}>
+                  <View style={styles.modalImageContainer}>
+                    <Image source={images.account_not_successful} style={styles.modalImage} />
+                  </View>
+                  <Text style={styles.modalHeadline}>Error!</Text>
+                  <Text style={styles.modalDescription}>Your account has not been created. Some Error Occured</Text>
+                  <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={hideModal} />
+                </View>
+            }
+          </Modal>
+        </Portal>
+        <ScrollView >
+          <View>
+            <NewscoutTitleHeader title={"Fill Profile"} backButtonShown onBackClick={() => navigation.goBack()}>
+              <View></View>
+
+            </NewscoutTitleHeader>
+            <ProfileImageCard />
+            <View style={styles.inputContainer}>
+              <FormTextInput label={"Username"} placeholder={"Username"} />
+              <FormTextInput label={"Fullname"} placeholder={"Fullname"} />
+              <FormTextInput label={"Email"} placeholder={"Email"} />
+              <FormTextInput label={"Phone"} placeholder={"Phone"} />
+              <FormTextInput label={"About"} placeholder={"About"} multiline/>
+              <View style={{ paddingVertical: verticalScale(8) }}>
+              </View><ThemedTextButton title={"Continue"} theme={'secondary'} onPress={() => { showModal(); setcreatedSucessful(true) }} />
+            </View>
+          </View>
+
+        </ScrollView>
+      </View>
+    </PaperProvider>
+  )
+}
+
+export default FillProfile
+

src/screens/Profile/ProfilePage.js

@@ -0,0 +1,189 @@
+import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native'
+import React, { useState } from 'react'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
+import colors from '../../constants/colors';
+import fonts from '../../constants/fonts';
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
+import SettingsButton from '../../components/atoms/Buttons/SettingsButton';
+import EditButton from '../../components/atoms/Buttons/EditButton';
+import ProfileImageCard from '../../components/molecules/Cards/ProfileImageCard';
+import { ToggleButton } from 'react-native-paper';
+import HorizontalNewsCardVariant from '../../components/molecules/Cards/HorizontalNewsCardVariant';
+
+const profileTabs = ['Recently Read', 'Others'];
+
+const ProfilePage = props => {
+
+  const { navigation, route } = props
+
+  const [categoryValue, setCategoryValue] = useState(
+    profileTabs[0].toLowerCase(),
+  );
+
+  const styles = StyleSheet.create({
+    profileContainer: {
+      backgroundColor: colors().dominant,
+    },
+
+    metricsCountContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-evenly',
+      paddingVertical: verticalScale(20),
+      paddingHorizontal: horizontalScale(16),
+    },
+    metricsCard: {},
+    metricsTitle: {
+      color: colors().primaryColor,
+      fontFamily: fonts.type.medium,
+      fontSize: 16,
+    },
+    metricsCount: {
+      color: colors().recessive,
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(16),
+      textAlign: 'center',
+    },
+    verticalLine: {
+      height: '100%',
+      width: 2,
+      backgroundColor: colors().grayShade_400,
+    },
+    underlinePillContainer: {
+      paddingVertical: verticalScale(8),
+      flexDirection: 'row',
+      alignItems: 'space-between',
+      justifyContent: 'space-around',
+      paddingHorizontal: horizontalScale(16),
+    },
+    selectedPillText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(12),
+      color: colors().recessive,
+      borderBottomWidth: verticalScale(4),
+      borderBottomColor: colors().primaryColor,
+      borderRadius: 0,
+    },
+    pillText: {
+      fontFamily: fonts.type.semibold,
+      fontSize: moderateScale(12),
+      color: colors().grayShade_100,
+    },
+    underlinePill: {
+      width: 'auto',
+    },
+    profileCardContainer: {
+      paddingHorizontal: horizontalScale(16),
+      paddingBottom: verticalScale(16)
+    },
+  });
+
+
+  return (
+    <View style={styles.profileContainer}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <NewscoutTitleHeader
+          title="My Profile"
+          backButtonShown={true}
+          onBackClick={() => navigation.goBack()}>
+          <View style={{ flexDirection: 'row', gap: 16 }}>
+            <SettingsButton onPress={() => navigation.navigate('SettingsPage')} />
+            <EditButton
+              onPress={() =>
+                navigation.navigate('Profile', { screen: 'EditProfile' })
+              }
+            />
+          </View>
+        </NewscoutTitleHeader>
+
+        <ProfileImageCard onEdit={() => navigation.navigate('Profile', { screen: 'EditProfile' })} />
+        <Text
+          style={{
+            alignSelf: 'center',
+            paddingVertical: 8,
+            fontFamily: fonts.type.semibold,
+            fontSize: moderateScale(14),
+            color: colors().recessive,
+          }}>
+          Semina Gurung
+        </Text>
+        <Text
+          style={{
+            paddingHorizontal: horizontalScale(16),
+            fontFamily: fonts.type.regular,
+            fontSize: moderateScale(12),
+            color: colors().recessive,
+            textAlign:'center'
+          }}>
+          The reason behind their disappointment is that iPhone users have
+          been..
+        </Text>
+        <View style={styles.metricsCountContainer}>
+          <View style={styles.metricsCard}>
+            <Text style={styles.metricsCount}>158</Text>
+            <Text style={styles.metricsTitle}>Bookmarks</Text>
+          </View>
+          <View style={styles.verticalLine}></View>
+          <View style={styles.metricsCard}>
+            <Text style={styles.metricsCount}>158</Text>
+            <Text style={styles.metricsTitle}>Followers</Text>
+          </View>
+          <View style={styles.verticalLine}></View>
+          <View style={styles.metricsCard}>
+            <Text style={styles.metricsCount}>158</Text>
+            <Text style={styles.metricsTitle}>Following</Text>
+          </View>
+        </View>
+        <View style={styles.underlinePillContainer}>
+          {/* <ScrollView horizontal showsHorizontalScrollIndicator={false}> */}
+          <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
+            {profileTabs.map(tab => {
+              let valueId = tab.toLowerCase();
+              return (
+                <ToggleButton
+                  icon={() => (
+                    <Text
+                      style={[
+                        valueId === categoryValue
+                          ? styles.selectedPillText
+                          : styles.pillText,
+                        {
+                          paddingHorizontal: horizontalScale(11),
+                          fontSize: moderateScale(16),
+                        },
+                      ]}>
+                      {tab}
+                    </Text>
+                  )}
+                  style={[styles.underlinePill]}
+                  value={valueId}
+                />
+              );
+            })}
+          </ToggleButton.Group>
+          {/* </ScrollView> */}
+        </View>
+        <View style={styles.profileCardContainer}>
+          <FlatList
+            scrollEnabled={false}
+            showsVerticalScrollIndicator={false}
+            ItemSeparatorComponent={() => (
+              <View style={{ height: verticalScale(8) }}></View>
+            )}
+            // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+            ListHeaderComponent={() => (
+              <View style={{ height: verticalScale(16) }}></View>
+            )}
+            data={[{}, {}, {}]}
+            renderItem={item => <HorizontalNewsCardVariant onPress={true} />}
+            keyExtractor={item => item.index}
+          />
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default ProfilePage
+
+const styles = StyleSheet.create({})

src/screens/Search/SearchPage.js

@@ -0,0 +1,140 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import React, { useState } from 'react'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+import colors from '../../constants/colors'
+import { TextInput } from 'react-native-paper'
+import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
+import IonIcon from 'react-native-vector-icons/Ionicons'
+import fonts from '../../constants/fonts'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+const categories = [
+  {
+    title: "Sector Update",
+    icon: ""
+  },
+  {
+    title: "Regional Update",
+    icon: ""
+  },
+  {
+    title: "Politics",
+    icon: ""
+  },
+  {
+    title: "Finance",
+    icon: "",
+  },
+  {
+    title: "Sports",
+    icon: ""
+  },
+  {
+    title: "Regional Update",
+    icon: ""
+  },
+  {
+    title: "Entertainment",
+    icon: ""
+  },
+  {
+    title: 'Gourmet',
+    icon: ""
+  }
+]
+
+const SearchPage = props => {
+
+  const [isSearching, setSearching] = useState(false)
+
+  const {
+    navigation,
+    route
+  } = props
+
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors().dominant
+    },
+    inputTextContainer: {
+      backgroundColor: colors().dominant,
+      paddingHorizontal: horizontalScale(16),
+      paddingBottom: verticalScale(16)
+    },
+    categoryContainer: {
+      padding: verticalScale(16),
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: moderateScale(16)
+    },
+    category: {
+      height: 170,
+      width: 170,
+      backgroundColor: colors().secondaryColor,
+      borderRadius: moderateScale(8),
+      padding: moderateScale(11),
+      justifyContent: 'flex-end',
+    },
+    categoryText: {
+      fontFamily: fonts.type.semibold,
+      alignSelf: 'flex-end',
+      color: colors().white,
+      fontSize: moderateScale(14),
+      maxWidth: "80%",
+      textAlign: 'right'
+    }
+  })
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView>
+        <NewscoutTitleHeader title={"Search"} />
+
+        <View style={styles.inputTextContainer}>
+          <TextInput
+            editable
+            mode='outlined'
+            placeholder='Search Text'
+            placeholderTextColor={colors().grayShade_300}
+            dense
+            style={{
+              backgroundColor: colors().grayShade_500,
+              paddingVertical: moderateScale(8),
+            }}
+            contentStyle={{
+              fontSize: moderateScale(16),
+              fontFamily: fonts.type.medium
+            }}
+            outlineStyle={{
+              borderColor: colors().dominant_variant,
+              borderRadius: moderateScale(8),
+              borderWidth: moderateScale(1)
+            }}
+            // underlineStyle={{backgroundColor: colors().dominant}}
+            left={() => <IonIcon name={'search-outline'} color={colors().primaryColor} size={moderateScale(8)} />}
+
+          />
+        </View>
+        {
+          isSearching === false ?
+            <View style={styles.categoryContainer}>
+              {categories.map((item) =>
+                <TouchableOpacity onPress={true}>
+                  <View style={styles.category}>
+                    <Text style={styles.categoryText}>{item.title}</Text>
+                  </View>
+                </TouchableOpacity>
+
+              )}
+            </View>
+            : <></>
+        }
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+export default SearchPage
+

src/screens/Settings/SettingsPage.js

@@ -0,0 +1,153 @@
+import { Appearance, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useContext } from 'react'
+import colors from '../../constants/colors'
+import fonts from '../../constants/fonts'
+import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
+import { List } from 'react-native-paper'
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import { ThemeContext } from '../../context/theme.context'
+
+const SettingsPage = props => {
+    const { navigation, route } = props
+
+    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" });
+            //   },
+            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%',
+        },
+        
+      });
+
+    return (
+        <View style={styles.container}>
+            <NewscoutTitleHeader
+                title="Settings"
+                backButtonShown={true}
+                onBackClick={() => navigation.goBack()}
+            />
+            <View>
+                <ScrollView>
+                    {listItem.map(item => (
+                        <SettingListItem
+                            title={item.title}
+                            key={item.id}
+                            id={item.id}
+                            icon={item.icon}
+                            onPress={item.navigation}
+                        />
+                    ))}
+                </ScrollView>
+            </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,
+          },
+    })
+
+    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>
+    );
+  };
+
+export default SettingsPage
+