Profile and Settings Page Screens Implementation

components/organisms/Sections/CategorySection.js

@@ -1,180 +1,201 @@
-import { StyleSheet, Text, View, ScrollView } from 'react-native'
-import React, { useEffect } from 'react'
-import fonts from '../../../theme/fonts'
-import colors from '../../../theme/colors'
-import { ToggleButton } from 'react-native-paper'
-import SectionHeader from '../Headers/SectionHeader'
-import HorizontalNewsCardVariant from '../Cards/HorizontalNewsCardVariant'
-import {CATEGORY_URL,ARTICLE_URL, PAGINATE_BY} from '../../../utils/Constants/constants'
-import { useConstructor } from '../../../utils/Constants/functions'
-
+import {StyleSheet, Text, View, ScrollView} from 'react-native';
+import React, {useEffect} from 'react';
+import fonts from '../../../theme/fonts';
+import colors from '../../../theme/colors';
+import {ToggleButton} from 'react-native-paper';
+import SectionHeader from '../Headers/SectionHeader';
+import HorizontalNewsCardVariant from '../Cards/HorizontalNewsCardVariant';
+import {
+  CATEGORY_URL,
+  ARTICLE_URL,
+  PAGINATE_BY,
+} from '../../../utils/Constants/constants';
+import {useConstructor} from '../../../utils/Constants/functions';
 
 // * API Handling
 
 const CategorySection = () => {
-
-    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
-            }))
-            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"))
-    }
-
-
-    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)
-
-    //     }
-    // })
-
-    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: fonts.getSize(4) }]}
-                                    value={category}
-
-                                />)
-                        }
-                    </ToggleButton.Group>
-                </ScrollView>
-            </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}
-                             />)
-                        : <Text> News Not Present</Text>
-                    }
-                </View>
-            </ScrollView>
-        </View>
-
+  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,
+          }));
+        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'));
+  };
+
+  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)
+
+  //     }
+  // })
+
+  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: fonts.getSize(4)},
+                ]}
+                value={category}
+              />
+            ))}
+          </ToggleButton.Group>
+        </ScrollView>
+      </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}
+              />
+            ))
+          ) : (
+            <Text> News Not Present</Text>
+          )}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
 
-export default CategorySection
+export default CategorySection;
 
 const styles = StyleSheet.create({
-    categoriesTitle: {
-        flexDirection: 'row',
-        paddingTop: fonts.getSize(20),
-        paddingHorizontal: fonts.getSize(20)
-    },
-    categoriesTitleText: {
-        flex: 1,
-        fontFamily: fonts.type.semibold,
-        fontSize: fonts.getSize(16),
-        color: colors.black
-    },
-    categoriesPillContainer: {
-        paddingBottom: fonts.getSize(8),
-        flexDirection: 'row',
-        alignItems: 'space-between',
-        paddingHorizontal: fonts.getSize(16)
-    },
-    container: {
-        borderRadius: fonts.getSize(18),
-        paddingVertical: fonts.getSize(8),
-        paddingHorizontal: fonts.getSize(16),
-        backgroundColor: colors.white,
-        width: 'auto'
-    },
-    selectedContainer: {
-        paddingVertical: fonts.getSize(8),
-        paddingHorizontal: fonts.getSize(16),
-        backgroundColor: colors.topVariantColor,
-        borderRadius: fonts.getSize(18),
-        width: 'auto'
-    },
-    selectedPillText: {
-        fontFamily: fonts.type.semibold,
-        fontSize: fonts.getSize(12),
-        color: colors.white
-    },
-    pillText: {
-        fontFamily: fonts.type.semibold,
-        fontSize: fonts.getSize(12),
-        color: colors.quaternaryColor
-    },
-    categoriesNewsContainer: {
-        paddingHorizontal: fonts.getSize(16),
-        paddingTop: fonts.getSize(10),
-        gap: 8
-
-    }
-})
+  categoriesTitle: {
+    flexDirection: 'row',
+    paddingTop: fonts.getSize(20),
+    paddingHorizontal: fonts.getSize(20),
+  },
+  categoriesTitleText: {
+    flex: 1,
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(16),
+    color: colors.black,
+  },
+  categoriesPillContainer: {
+    paddingBottom: fonts.getSize(8),
+    flexDirection: 'row',
+    alignItems: 'space-between',
+    paddingHorizontal: fonts.getSize(16),
+  },
+  container: {
+    borderRadius: fonts.getSize(18),
+    paddingVertical: fonts.getSize(8),
+    paddingHorizontal: fonts.getSize(16),
+    backgroundColor: colors.white,
+    width: 'auto',
+  },
+  selectedContainer: {
+    paddingVertical: fonts.getSize(8),
+    paddingHorizontal: fonts.getSize(16),
+    backgroundColor: colors.topVariantColor,
+    borderRadius: fonts.getSize(18),
+    width: 'auto',
+  },
+  selectedPillText: {
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(12),
+    color: colors.white,
+  },
+  pillText: {
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(12),
+    color: colors.quaternaryColor,
+  },
+  categoriesNewsContainer: {
+    paddingHorizontal: fonts.getSize(16),
+    paddingTop: fonts.getSize(10),
+    gap: 8,
+  },
+});

navigation/HelpPageNavigator.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import HelpPage from '../screens/HelpPage';
+import FAQPage from '../screens/FAQPage';
+import ContactUsPage from '../screens/ContactUsPage';
+import TermsConditionsPage from '../screens/TermsConditionsPage';
+import PrivacyPolicyPage from '../screens/PrivacyPolicyPage';
+import AboutUsPage from '../screens/AboutUsPage';
+
+
+const Stack = createNativeStackNavigator();
+const HelpPageNavigator = ({ route, navigation}) => {
+    return (
+        <Stack.Navigator
+            initialRouteName='MainHelp'
+        >
+            <Stack.Screen
+                name="MainHelp"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={HelpPage}
+            />
+            <Stack.Screen
+                name="FAQ"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={FAQPage}
+            />
+            <Stack.Screen
+                name="ContactUs"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={ContactUsPage}
+            />
+            <Stack.Screen
+                name="Terms&Conditions"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={TermsConditionsPage}
+            />
+            <Stack.Screen
+                name="PrivacyPolicy"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={PrivacyPolicyPage}
+            />
+            <Stack.Screen
+                name="AboutUs"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={AboutUsPage}
+            />
+        </Stack.Navigator>
+    )
+}
+
+export default HelpPageNavigator;

navigation/ProfileNavigator.js

@@ -2,8 +2,8 @@ import { View, Text , TouchableWithoutFeedback} from 'react-native'
 import React from 'react'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import ProfilePage from '../screens/ProfilePage';
-import SettingsPage from '../screens/SettingsPage';
 import EditProfilePage from '../screens/EditProfilePage';
+import SettingsPageNavigator from './SettingsPageNavigator';
 
 
 const Stack = createNativeStackNavigator();
@@ -24,7 +24,7 @@ const ProfileNavigator = ({ route, navigation}) => {
                 options={(navigation) => ({
                     headerShown: false
                 })}
-                component={SettingsPage}
+                component={SettingsPageNavigator}
             />
             <Stack.Screen
                 name="EditProfile"

navigation/SettingsPageNavigator.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import SettingsPage from '../screens/SettingsPage';
+import EditProfilePage from '../screens/EditProfilePage';
+import SecurityPage from '../screens/SecurityPage';
+import NotificationSettingsPage from '../screens/NotificationSettingsPage';
+import HelpPageNavigator from './HelpPageNavigator';
+
+const Stack = createNativeStackNavigator();
+const SettingsPageNavigator = ({ route, navigation}) => {
+    return (
+        <Stack.Navigator
+            initialRouteName='SettingsMenu'
+        >
+            <Stack.Screen
+                name="SettingsMenu"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={SettingsPage}
+            />
+            <Stack.Screen
+                name="EditProfile"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={EditProfilePage}
+            />
+            <Stack.Screen
+                name="Notification"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={NotificationSettingsPage}
+            />
+            <Stack.Screen
+                name="Security"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={SecurityPage}
+            />
+            <Stack.Screen
+                name="InviteFriends"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={EditProfilePage}
+            />
+            <Stack.Screen
+                name="Help"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={HelpPageNavigator}
+            />
+            <Stack.Screen
+                name="DarkMode"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={EditProfilePage}
+            />
+            <Stack.Screen
+                name="LogOut"
+                options={(navigation) => ({
+                    headerShown: false
+                })}
+                component={EditProfilePage}
+            />
+        </Stack.Navigator>
+    )
+}
+
+export default SettingsPageNavigator;

screens/AboutUsPage.js

@@ -0,0 +1,72 @@
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import NewscoutLogo from '../components/molecules/NewscoutLogo';
+import colors from '../theme/colors';
+import fonts from '../theme/fonts';
+
+const AboutUsPage = props => {
+  const {navigation} = props;
+  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;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white,
+    height: '100%',
+  },
+  logoContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoStyle: {
+    height: 240,
+    width: 240,
+  },
+  tagline: {
+    fontFamily: fonts.type.medium,
+    color: colors.grayShade_200,
+    textAlign: 'center',
+  },
+  aboutText: {
+    textAlign: 'left',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+  },
+});

screens/ContactUsPage.js

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

screens/FAQPage.js

@@ -0,0 +1,216 @@
+import {StyleSheet, Text, View, ScrollView} from 'react-native';
+import React from 'react';
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import {List, ToggleButton} from 'react-native-paper';
+import colors from '../theme/colors';
+import fonts from '../theme/fonts';
+
+const FAQPage = props => {
+  const {navigation} = props;
+
+  const faqCategories = [
+    'General',
+    'Login',
+    'Account',
+    'Viability',
+    'Bruh1',
+    'bruh2',
+    'bruh3',
+  ];
+  const [categoryValue, setCategoryValue] = React.useState(faqCategories[0]);
+  // const [questions, setQuestions] = React.useState(
+  //   faqCategories.reduce((result, key) => ({...result, [key]: [{}]})),
+  // );
+
+  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 [expandedId, setExpandedId] = React.useState('');
+
+  const handleAccordionPress = accordionId => {
+    setExpandedId(accordionId === expandedId ? '' : accordionId);
+  };
+
+  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: fonts.getSize(4)},
+                  ]}
+                  value={category}
+                />
+              ))}
+            </ToggleButton.Group>
+          </ScrollView>
+        </View>
+        <List.Section style={{paddingHorizontal: 16, gap: 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: 2,
+                      borderLeftWidth: 2,
+                      borderRightWidth: 2,
+                      borderBottomLeftRadius: 16,
+                      borderBottomRightRadius: 16,
+                      paddingHorizontal: 16,
+                      paddingBottom: 8,
+                      backgroundColor: colors.white,
+                    },
+                  ]}>
+                  <Text style={styles.accordionDescription}>
+                    {item.answer}
+                  </Text>
+                </View>
+              </List.Accordion>
+            ))}
+          </List.AccordionGroup>
+        </List.Section>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default FAQPage;
+
+const styles = StyleSheet.create({
+  selectedAccordionContainer: {
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderLeftWidth: 2,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderColor: colors.primaryColor,
+    paddingVertical: 4,
+    height:'auto',
+    backgroundColor: colors.white
+  },
+  accordionContainer: {
+    borderWidth: 2,
+    borderColor: colors.grayShade_400,
+    borderRadius: 16,
+    height: 'auto',
+    paddingVertical: 16,
+    backgroundColor: colors.white
+  },
+  accordionTitle: {
+    fontFamily: fonts.type.semibold,
+    color: colors.black,
+  },
+  accordionDescription: {
+    fontFamily: fonts.type.medium,
+    color: colors.grayShade_200
+  },
+  
+  selectedPillText: {
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(12),
+    color: colors.white,
+  },
+  pillText: {
+    fontFamily: fonts.type.semibold,
+    fontSize: fonts.getSize(12),
+    color: colors.quaternaryColor,
+  },
+  categoriesPillContainer: {
+    paddingBottom: fonts.getSize(8),
+    flexDirection: 'row',
+    alignItems: 'space-between',
+    paddingHorizontal: fonts.getSize(16),
+  },
+  container: {
+    borderRadius: fonts.getSize(18),
+    paddingVertical: fonts.getSize(8),
+    paddingHorizontal: fonts.getSize(16),
+    backgroundColor: colors.white,
+    width: 'auto',
+  },
+  selectedContainer: {
+    paddingVertical: fonts.getSize(8),
+    paddingHorizontal: fonts.getSize(16),
+    backgroundColor: colors.topVariantColor,
+    borderRadius: fonts.getSize(18),
+    width: 'auto',
+  },
+  pillContainer: {
+    paddingVertical: 16,
+    paddingLeft: 16,
+  },
+  faqContainer:{
+    backgroundColor: colors.white
+  }
+});

screens/HelpPage.js

@@ -0,0 +1,78 @@
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React from 'react';
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import {List} from 'react-native-paper';
+import fonts from '../theme/fonts';
+import EntypoIcon from 'react-native-vector-icons/Entypo';
+import colors from '../theme/colors';
+
+const HelpPage = props => {
+  const {navigation} = props;
+
+  const listItems = [
+    {
+      id: 0,
+      title: 'FAQ',
+      onPress: () => navigation.navigate('FAQ'),
+    },
+    {
+      id: 1,
+      title: 'Contact Us',
+      onPress: () => navigation.navigate('ContactUs'),
+    },
+    {
+      id: 2,
+      title: 'Terms & Conditions',
+      onPress: () => navigation.navigate('Terms&Conditions'),
+    },
+    {
+      id: 3,
+      title: 'Privacy Policy',
+      onPress: () => navigation.navigate('PrivacyPolicy'),
+    },
+    {
+      id: 4,
+      title: 'About Us',
+      onPress: () => navigation.navigate('AboutUs'),
+    },
+  ];
+
+  return (
+    <View>
+      <NewscoutTitleHeader
+        title={'Help'}
+        backButtonShown
+        onBackClick={() => navigation.goBack()}
+      />
+      {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.black}
+              />
+            )}
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export default HelpPage;
+
+const styles = StyleSheet.create({
+  listItemText: {
+    fontFamily: fonts.type.medium,
+  },
+  listItem: {
+    height: 64,
+    justifyContent: 'center',
+  },
+});

screens/NotificationSettingsPage.js

@@ -0,0 +1,113 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, { useState } from 'react';
+import fonts from '../theme/fonts';
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import { List, Switch } from 'react-native-paper';
+
+const NotificationSettingsPage = props => {
+  const {navigation} = props;
+
+  const [soundStatus, setSoundStatus] = useState(false);
+  const [vibrateStatus, setVibrateStatus] = useState(false);
+  const [tipStatus, setTipStatus] = useState(false);
+  const [serviceStatus, setServiceStatus] = useState(false);
+
+  const listItems = [
+    {
+      title: 'Sound',
+      id: 0,
+      state: soundStatus,
+      onChange: () => setSoundStatus(!soundStatus),
+    },
+    {
+      title: 'Vibrate',
+      id: 1,
+      state: vibrateStatus,
+      onChange: () => setVibrateStatus(!vibrateStatus),
+    },
+    {
+      title: 'New tips available',
+      id: 2,
+      state: tipStatus,
+      onChange: () => setTipStatus(!tipStatus),
+    },
+    {
+      title: 'New service available',
+      id: 3,
+      state: serviceStatus,
+      onChange: () => setServiceStatus(!serviceStatus),
+    },
+  ];
+  return (
+    <View>
+      <NewscoutTitleHeader
+        title={'Notifications'}
+        backButtonShown={true}
+        onBackClick={() => navigation.goBack()}
+      />
+
+      {listItems.map(item => (
+        <List.Item
+          title={item.title}
+          titleStyle={styles.listItemText}
+          style={styles.listItem}
+          key={item.id}
+          right={props => (
+            <Switch
+              value={item.state}
+              onValueChange={item.onChange}
+            />
+          )}
+        />
+      ))}
+      {/* <List.Item
+        title={'Face ID'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'1'}
+        right={props => (
+          <Switch
+            value={soundStatus}
+            onValueChange={() => setFaceIdStatus(!faceIdStatus)}
+          />
+        )}
+      />
+      <List.Item
+        title={'Remember Me'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'2'}
+        right={props => (
+          <Switch
+            value={rememberMeStatus}
+            onValueChange={() => setRememberMeStatus(!rememberMeStatus)}
+          />
+        )}
+      />
+      <List.Item
+        title={'Touch ID'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'3'}
+        right={props => (
+          <Switch
+            value={touchIdStatus}
+            onValueChange={() => setTouchIdStatus(!touchIdStatus)}
+          />
+        )}
+      /> */}
+    </View>
+  );
+};
+
+export default NotificationSettingsPage;
+
+const styles = StyleSheet.create({
+  listItemText: {
+    fontFamily: fonts.type.medium,
+  },
+  listItem: {
+    height: 64,
+    justifyContent: 'center',
+  },
+});

screens/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({})

screens/SecurityPage.js

@@ -0,0 +1,74 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import PrimaryOutlineButton from '../components/organisms/Buttons/PrimaryOutlineButton';
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import {List, Switch} from 'react-native-paper';
+import fonts from '../theme/fonts';
+
+const SecurityPage = props => {
+  const {navigation} = props;
+
+  // States
+  const [faceIdStatus, setFaceIdStatus] = useState(false);
+  const [rememberMeStatus, setRememberMeStatus] = useState(false);
+  const [touchIdStatus, setTouchIdStatus] = useState(false);
+
+  return (
+    <View>
+      <NewscoutTitleHeader
+        title={'Security'}
+        backButtonShown={true}
+        onBackClick={() => navigation.goBack()}
+      />
+      <List.Item
+        title={'Face ID'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'1'}
+        right={props => (
+          <Switch
+            value={faceIdStatus}
+            onValueChange={() => setFaceIdStatus(!faceIdStatus)}
+          />
+        )}
+      />
+      <List.Item
+        title={'Remember Me'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'2'}
+        right={props => (
+          <Switch
+            value={rememberMeStatus}
+            onValueChange={() => setRememberMeStatus(!rememberMeStatus)}
+          />
+        )}
+      />
+      <List.Item
+        title={'Touch ID'}
+        titleStyle={styles.listItemText}
+        style={styles.listItem}
+        key={'3'}
+        right={props => <Switch value={touchIdStatus} onValueChange={() => setTouchIdStatus(!touchIdStatus)} />}
+      />
+      <View
+        style={{
+          paddingHorizontal: 16,
+        }}>
+        <PrimaryOutlineButton title={'Change Password'}  />
+      </View>
+    </View>
+  );
+};
+
+export default SecurityPage;
+
+const styles = StyleSheet.create({
+  listItemText: {
+    fontFamily: fonts.type.medium,
+  },
+  listItem: {
+    height: 64,
+    justifyContent: 'center',
+  },
+});

screens/SettingsPage.js

@@ -1,110 +1,133 @@
-import { ScrollView, StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-import { List } from 'react-native-paper';
-import EntypoIcon from 'react-native-vector-icons/dist/Entypo'
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React from 'react';
+import {List} from 'react-native-paper';
+import EntypoIcon from 'react-native-vector-icons/dist/Entypo';
 import colors from '../theme/colors';
 import fonts from '../theme/fonts';
 import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
 
 
-const SettingsPage = (props) => {
-
-    const {
-      navigation
-    } = props
+const SettingsPage = props => {
+  const {navigation} = props;
 
   const listItem = [
     {
-      id:1,
-      title:"Edit Profile",
-      icon:'account'
+      id: 1,
+      title: 'Edit Profile',
+      icon: 'account',
+      navigation: () => navigation.navigate('EditProfile'),
     },
     {
-      id:2,
-      title: "Notification",
-      icon:'bell'
+      id: 2,
+      title: 'Notification',
+      icon: 'bell',
+      navigation: () => navigation.navigate('Notification'),
     },
     {
-      id:3,
-      title:"Security",
-      icon:'security'
+      id: 3,
+      title: 'Security',
+      icon: 'security',
+      navigation: () => navigation.navigate('Security'),
     },
     {
-      id:4,
-      title: "Invite Friends",
-      icon:'account-multiple-plus'
+      id: 4,
+      title: 'Invite Friends',
+      icon: 'account-multiple-plus',
+      navigation: () => navigation.navigate('InviteFriends'),
     },
     {
-      id:5,
-      title:"Help",
-      icon:'chat-question'
+      id: 5,
+      title: 'Help',
+      icon: 'chat-question',
+      navigation: () => navigation.navigate('Help'),
     },
     {
-      id:6,
-      title:"Dark mode",
-      icon:'theme-light-dark'
+      id: 6,
+      title: 'Dark mode',
+      icon: 'theme-light-dark',
+      navigation: () => navigation.navigate('DarkMode'),
     },
     {
-      id:7,
-      title:"Logout",
-      icon:'logout'
+      id: 7,
+      title: 'Logout',
+      icon: 'logout',
+      navigation: () => navigation.navigate('LogOut'),
     },
-  ]
+  ];
   return (
     <View style={styles.container}>
-      <NewscoutTitleHeader title="Settings" backButtonShown={true} onBackClick={() => navigation.goBack()}/>
+      <NewscoutTitleHeader
+        title="Settings"
+        backButtonShown={true}
+        onBackClick={() => navigation.goBack()}
+      />
       <ScrollView>
-      {listItem.map((item) => 
-         <SettingListItem title={item.title} key={item.id} id={item.id} icon={item.icon}/> 
-      )}
+        {listItem.map(item => (
+          <SettingListItem
+            title={item.title}
+            key={item.id}
+            id={item.id}
+            icon={item.icon}
+            onPress={item.navigation}
+          />
+        ))}
       </ScrollView>
-     
     </View>
-  )
-}
+  );
+};
+
+const SettingListItem = props => {
+  const {title, id, icon, onPress} = props;
 
-const SettingListItem = (props) => {
-  const {
-    title,
-    id,
-    icon
-  } = props
-  
   return (
-    <>
-      <List.Item title={title}
-          titleStyle={styles.listItemText}
-          key={id}
-          left={props => 
-              <List.Icon 
-              {...props}
-              size={24} 
-              style={styles.circularIcon}
-              icon={icon}
-              color={colors.topColor}/>
-            } 
-          right={props => <EntypoIcon name="chevron-thin-right" size={16} color={colors.black}/>}/>
-    </>
-  )
-}
+    <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.topColor}
+          />
+        )}
+        right={props => (
+          <EntypoIcon
+            name="chevron-thin-right"
+            size={16}
+            color={colors.black}
+          />
+        )}
+      />
+    </TouchableOpacity>
+  );
+};
 
-export default SettingsPage
+export default SettingsPage;
 
 const styles = StyleSheet.create({
-    container:{
-      backgroundColor: colors.white,
-      height: '100%'
-    },
-    listItemText:{
-      fontFamily: fonts.type.medium
-    },
-    circularIcon:{
-      backgroundColor: colors.primaryTintColor,
-      marginLeft: 16,
-      padding:8,
-      // maxHeight:48,
-      // maxWidth: 48,
-      borderRadius: 32,
-      
-    }
-})
+  container: {
+    backgroundColor: colors.white,
+    height: '100%',
+  },
+  listItemText: {
+    fontFamily: fonts.type.medium,
+  },
+  circularIcon: {
+    backgroundColor: colors.primaryTintColor,
+    marginLeft: 20,
+    padding: 8,
+    // maxHeight:48,
+    // maxWidth: 48,
+    borderRadius: 32,
+  },
+});

screens/TermsConditionsPage.js

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