Custom Switch Component for Toggles

src/components/atoms/Switch/CustomSwitch.js

@@ -0,0 +1,55 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useState } from 'react'
+import ToggleSwitch from 'toggle-switch-react-native'
+import colors from '../../../constants/colors'
+
+const CustomSwitch = props => {
+  const {
+    navigation,
+    value,
+    onSelectSwitch,
+    selectionColor,
+    sliderButtonStyle,
+    sliderStyle
+  } = props
+
+  const updateSwitchData = val => {
+    setSelectionMode(val)
+    onSelectSwitch(val)
+  }
+
+  const styles = StyleSheet.create({
+    slider: {
+      height: 44,
+      width: 215,
+      backgroundColor: 'white',
+      borderRadius: 25,
+      borderWidth: 1,
+      borderColor: selectionColor,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      padding: 2,
+    },
+    sliderButton: {
+      flex: 1,
+
+      backgroundColor: 'white',
+      borderRadius: 25,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  })
+
+  return (
+    <ToggleSwitch 
+      isOn={value}
+      onColor={colors().primaryColor}
+      offColor={colors().grayShade_400}
+      size='medium'
+      onToggle={onSelectSwitch}
+    />
+  )
+}
+
+export default CustomSwitch
+

src/screens/Auth/ChooseTopicPage.js

@@ -1,10 +1,14 @@
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import React from 'react'
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native'
+import React, { useState } 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'
+import { getCategories } from '../../api/data'
+import { Checkbox, List } from 'react-native-paper'
+import { useConstructor } from '../../constants/functions'
+import { BASE_URL } from '../../api/urls'
 
 const ChooseTopicPage = props => {
 
@@ -12,6 +16,23 @@ const ChooseTopicPage = props => {
         navigation, route
     } = props
 
+    const [topics, setTopics] = useState([])
+    const [selectedTopics, setSelectedTopics] = useState([])
+
+    const fetchTopics = () => {
+        getCategories().then(res => {
+            let topics = res.data.body.results
+            setTopics(topics)
+            topics.map((item => setSelectedTopics({ ...selectedTopics, [item.heading.name]: false })))
+        }).catch(err => console.error(err)).finally(() => console.log("Fetch Topics Executed"))
+    }
+
+    useConstructor(() => {
+        fetchTopics()
+    })
+
+
+
     const styles = StyleSheet.create({
         container: {
             backgroundColor: colors().dominant
@@ -32,11 +53,28 @@ const ChooseTopicPage = props => {
             fontSize: moderateScale(16),
             paddingVertical: verticalScale(16)
         },
-        selectTopic:{
+        selectTopic: {
             color: colors().recessive,
             fontFamily: fonts.type.regular,
             textAlign: 'center',
             paddingVertical: verticalScale(16)
+        },
+        listItemContainer: {
+            gap: verticalScale(8),
+            paddingBottom: verticalScale(24)
+        },
+        listItem: {
+            backgroundColor: colors().dominant,
+            borderRadius: moderateScale(8),
+            borderWidth: moderateScale(2),
+            borderColor: colors().grayShade_400,
+            maxHeight: verticalScale(64),
+            alignItems:'center',
+            justifyContent: 'center'
+        },
+        listItemText: {
+            fontFamily: fonts.type.medium,
+            color: colors().recessive
         }
     })
 
@@ -51,7 +89,50 @@ const ChooseTopicPage = props => {
                 <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 style={styles.listItemContainer}>
+                        {topics.map(item =>
+                            <List.Item
+                                style={styles.listItem}
+                                titleStyle={styles.listItemText}
+                                title={item.heading.name}
+                                // left={props => <View style={{ paddingLeft: 16 }}>
+                                //     <Image
+                                //         source={{ uri: BASE_URL + "/" + item.heading.icon }}
+                                //         style={{
+                                //             height: 24,
+                                //             width: 24,
+                                //             tintColor: colors().secondaryColor
+                                //         }}
+                                //     />
+                                // </View>
+                                // }
+                                right={props => <Checkbox  
+                                    status={selectedTopics[item.heading.name] === true ? 'checked' : 'unchecked'}
+                                    onPress={() => setSelectedTopics({...selectedTopics,[item.heading.name]: !selectedTopics[item.heading.name]})}
+                                    color={colors().secondaryColor}
+                                />}
+                            // right={props => <CustomSwitch
+                            //     onSelectSwitch={() => {
+                            //         setDarkMode(!isDarkMode)
+                            //         if (isDarkMode !== false) {
+                            //             theme.dispatch({ type: "LIGHTMODE" });
+                            //             setDarkMode(false)
+                            //         }
+                            //         else {
+                            //             theme.dispatch({ type: "DARKMODE" });
+                            //             setDarkMode(true)
+                            //         }
+
+                            //     }}
+
+
+                            //     value={isDarkMode}
+                            // />}
+                            />
+                        )}
+                    </View>
+
+                    <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={() => navigation.navigate('FillProfile')} />
                 </View>
             </View>
         </ScrollView>

src/screens/Sidebar/SidebarPage.js

@@ -9,7 +9,7 @@ import {
   TouchableOpacity,
   Image,
 } from 'react-native';
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { List } from 'react-native-paper';
 import EntypoIcon from 'react-native-vector-icons/Entypo';
 import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
@@ -21,6 +21,8 @@ import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHe
 import { navigateToListViewPage, useConstructor } from '../../constants/functions';
 import { getArticlesByCategory, getCategories } from '../../api/data';
 import { BASE_URL } from '../../api/urls';
+import CustomSwitch from '../../components/atoms/Switch/CustomSwitch';
+import { ThemeContext } from '../../context/theme.context';
 
 
 const SidebarPage = ({ navigation, route }) => {
@@ -66,32 +68,39 @@ const SidebarPage = ({ navigation, route }) => {
 
     },
     accordionStyle: {
-      backgroundColor: colors().dominant_variant,
+      backgroundColor: colors().dominant,
       borderRadius: moderateScale(8),
-      borderWidth: moderateScale(0),
-      borderColor: colors().dominant_variant,
+      borderWidth: moderateScale(2),
+      borderColor: colors().grayShade_400,
       maxHeight: verticalScale(64),
     },
     accordionTextStyle: { fontFamily: fonts.type.medium, color: colors().recessive },
     accordionItemStyle: {
       backgroundColor: colors().dominant
     },
-    accordionItemTextStyle: {
-      fontFamily: fonts.type.regular,
-      color: colors().recessive
-    }
+
   });
 
+  const theme = useContext(ThemeContext)
+  const [isDarkMode, setDarkMode] = useState(theme.state.theme === "light" ? false : true)
+
+  useEffect(() => {
+    if (theme.state.theme === 'light') {
+        setDarkMode(false)
+    } else {
+      setDarkMode(true)
+    }
+  },[theme.state.theme])
 
   return (
     <View >
       <ScrollView style={{ backgroundColor: colors().dominant, minHeight: '100%' }} showsVerticalScrollIndicator={false}>
-        <NewscoutHomeHeader />
+        <NewscoutHomeHeader backButtonShown={true} onBackClick={() => navigation.toggleDrawer()} />
         <View style={styles.sideBarContainer}>
 
-          <View style={styles.buttonContainer}>
+          {/* <View style={styles.buttonContainer}>
             <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
-          </View>
+          </View> */}
 
 
           <View style={styles.accordionContainer}>
@@ -104,6 +113,7 @@ const SidebarPage = ({ navigation, route }) => {
                   <List.Accordion
                     key={acc_check}
                     id={acc_check}
+
                     style={[
                       styles.accordionStyle,
                       acc_check === expandedId && {
@@ -130,23 +140,16 @@ const SidebarPage = ({ navigation, route }) => {
                     }}
                     left={() => (
                       <View style={{ paddingLeft: 16 }}>
-                        {/* <EntypoIcon
-                          name={item.icon}
-                          size={24}
-                          color={
-                            acc_check === expandedId ? colors().white : colors().recessive
-                          }
-                        /> */}
                         <Image
                           source={{ uri: BASE_URL + "/" + item.heading.icon }}
-                          style={{ 
+                          style={{
                             height: 24,
                             width: 24,
-                            tintColor: 
+                            tintColor:
                               acc_check === expandedId ?
-                              colors().white : 
-                              colors().recessive 
-                            }}
+                                colors().white :
+                                colors().primaryColor
+                          }}
                         />
                       </View>
                     )}
@@ -163,13 +166,13 @@ const SidebarPage = ({ navigation, route }) => {
                     )}
                     title={item.heading.name}>
                     {item.heading.submenu.map(subTitle => (
-                      <TouchableOpacity 
+                      <TouchableOpacity
                         onPress={
                           () => {
                             navigation.toggleDrawer()
-                            navigateToListViewPage(navigation,"category",subTitle.name)
-                            
-                        }}
+                            navigateToListViewPage(navigation, "category", subTitle.name)
+
+                          }}
                       >
                         <List.Item
                           key={`${item.title}_${subTitle.name}`}
@@ -185,8 +188,38 @@ const SidebarPage = ({ navigation, route }) => {
                 );
               })}
             </List.AccordionGroup>
-          </View>
+            <List.Item
+              style={styles.accordionStyle}
+              titleStyle={styles.accordionTextStyle}
+              title="Switch Theme"
+              left={props => <List.Icon {...props} icon="theme-light-dark" color={colors().primaryColor} />}
+              right={props => <CustomSwitch
+                onSelectSwitch={() => {
+                  setDarkMode(!isDarkMode)
+                  if (isDarkMode !== false){
+                    theme.dispatch({ type: "LIGHTMODE" });
+                    setDarkMode(false)
+                  }
+                  else{
+                    theme.dispatch({ type: "DARKMODE" });
+                    setDarkMode(true)
+                  }
+                   
+                }}
+                
+
+            value={isDarkMode}
+              />}
+            />
+            <List.Item
+              style={styles.accordionStyle}
+              titleStyle={styles.accordionTextStyle}
+              title="Reader Mode"
+              left={props => <List.Icon {...props} icon="book" color={colors().primaryColor} />}
+              
+            />
 
+          </View>
         </View>
       </ScrollView>
     </View>