From 92eaadbb19ae875a23ec3e8fdf93a8f71e2ba593 Mon Sep 17 00:00:00 2001
From: symphony-dev <abdul.rehman@symphonylogics.com>
Date: Wed, 6 Apr 2022 14:21:17 +0500
Subject: [PATCH] Dependencies updated & Stack navigator issues fixed

---
 navigation/Menu.js    | 73 ++++++++++++++++++++++-------------------
 navigation/Screens.js | 29 ++++++++++++++---
 screens/Articles.js   | 59 +++++++++++++++++----------------
 screens/Elements.js   | 76 ++++++++++++++++++++++++++++---------------
 4 files changed, 143 insertions(+), 94 deletions(-)

diff --git a/navigation/Menu.js b/navigation/Menu.js
index 6c59efe..fda94f7 100644
--- a/navigation/Menu.js
+++ b/navigation/Menu.js
@@ -1,26 +1,23 @@
-import React from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  Image
-} from "react-native";
 import { Block, Text, theme } from "galio-framework";
+import { Image, ScrollView, StyleSheet } from "react-native";
 
+import { DrawerItem as DrawerCustomItem } from "../components";
 import Images from "../constants/Images";
-import { DrawerItem as DrawerCustomItem } from '../components';
+import React from "react";
 
-function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) {
-  const screens = [
-    "Home", 
-    "Profile",
-    "Account",
-    "Elements",
-    "Articles",
-  ];
+function CustomDrawerContent({
+  drawerPosition,
+  navigation,
+  profile,
+  focused,
+  state,
+  ...rest
+}) {
+  const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
   return (
     <Block
       style={styles.container}
-      forceInset={{ top: 'always', horizontal: 'never' }}
+      forceInset={{ top: "always", horizontal: "never" }}
     >
       <Block flex={0.06} style={styles.header}>
         <Image styles={styles.logo} source={Images.Logo} />
@@ -28,27 +25,37 @@ function CustomDrawerContent({ drawerPosition, navigation, profile, focused, sta
       <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
         <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
           {screens.map((item, index) => {
-              return (
-                <DrawerCustomItem
-                  title={item}
-                  key={index}
-                  navigation={navigation}
-                  focused={state.index === index ? true : false}
-                />
-              );
-            })}
-            <Block flex style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}>
-              <Block style={{ borderColor: "rgba(0,0,0,0.2)", width: '100%', borderWidth: StyleSheet.hairlineWidth }}/>
-              <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>DOCUMENTATION</Text>
-            </Block>
-            <DrawerCustomItem title="Getting Started" navigation={navigation} />
+            return (
+              <DrawerCustomItem
+                title={item}
+                key={index}
+                navigation={navigation}
+                focused={state.index === index ? true : false}
+              />
+            );
+          })}
+          <Block
+            flex
+            style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
+          >
+            <Block
+              style={{
+                borderColor: "rgba(0,0,0,0.2)",
+                width: "100%",
+                borderWidth: StyleSheet.hairlineWidth,
+              }}
+            />
+            <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
+              DOCUMENTATION
+            </Text>
+          </Block>
+          <DrawerCustomItem title="Getting Started" navigation={navigation} />
         </ScrollView>
       </Block>
     </Block>
   );
 }
 
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -57,8 +64,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 28,
     paddingBottom: theme.SIZES.BASE,
     paddingTop: theme.SIZES.BASE * 3,
-    justifyContent: 'center'
-  }
+    justifyContent: "center",
+  },
 });
 
 export default CustomDrawerContent;
diff --git a/navigation/Screens.js b/navigation/Screens.js
index 8bc7051..804a0ba 100644
--- a/navigation/Screens.js
+++ b/navigation/Screens.js
@@ -66,7 +66,12 @@ function ElementsStack(props) {
 
 function ArticlesStack(props) {
   return (
-    <Stack.Navigator mode="card" headerMode="screen">
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
       <Stack.Screen
         name="Articles"
         component={Articles}
@@ -100,7 +105,13 @@ function ArticlesStack(props) {
 
 function ProfileStack(props) {
   return (
-    <Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen">
+    <Stack.Navigator
+      initialRouteName="Profile"
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
       <Stack.Screen
         name="Profile"
         component={Profile}
@@ -141,7 +152,12 @@ function ProfileStack(props) {
 
 function HomeStack(props) {
   return (
-    <Stack.Navigator mode="card" headerMode="screen">
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: "screen",
+      }}
+    >
       <Stack.Screen
         name="Home"
         component={Home}
@@ -181,7 +197,12 @@ function HomeStack(props) {
 
 export default function OnboardingStack(props) {
   return (
-    <Stack.Navigator mode="card" headerMode="none">
+    <Stack.Navigator
+      screenOptions={{
+        mode: "card",
+        headerShown: false,
+      }}
+    >
       <Stack.Screen
         name="Onboarding"
         component={Onboarding}
diff --git a/screens/Articles.js b/screens/Articles.js
index 8c110bf..ecb6d41 100644
--- a/screens/Articles.js
+++ b/screens/Articles.js
@@ -1,17 +1,18 @@
-import React from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  Image,
-  TouchableWithoutFeedback,
-  ImageBackground,
-  Dimensions
-} from "react-native";
 //galio
 import { Block, Text, theme } from "galio-framework";
+import {
+  Dimensions,
+  Image,
+  ImageBackground,
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from "react-native";
 //argon
-import { articles, Images, argonTheme } from "../constants/";
+import { Images, argonTheme, articles } from "../constants/";
+
 import { Card } from "../components/";
+import React from "react";
 
 const { width } = Dimensions.get("screen");
 
@@ -24,7 +25,7 @@ const categories = [
       "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
     image:
       "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
-    price: "$125"
+    price: "$125",
   },
   {
     title: "Events",
@@ -32,8 +33,8 @@ const categories = [
       "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
     image:
       "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
-    price: "$35"
-  }
+    price: "$35",
+  },
 ];
 
 class Articles extends React.Component {
@@ -100,11 +101,11 @@ class Articles extends React.Component {
                 source={{ uri: Images.Products["View article"] }}
                 style={[
                   styles.imageBlock,
-                  { width: width - theme.SIZES.BASE * 2, height: 252 }
+                  { width: width - theme.SIZES.BASE * 2, height: 252 },
                 ]}
                 imageStyle={{
                   width: width - theme.SIZES.BASE * 2,
-                  height: 252
+                  height: 252,
                 }}
               >
                 <Block style={styles.categoryTitle}>
@@ -125,7 +126,7 @@ class Articles extends React.Component {
               showsHorizontalScrollIndicator={false}
               snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
               contentContainerStyle={{
-                paddingHorizontal: theme.SIZES.BASE / 2
+                paddingHorizontal: theme.SIZES.BASE / 2,
               }}
             >
               {categories &&
@@ -183,9 +184,7 @@ class Articles extends React.Component {
   render() {
     return (
       <Block flex center>
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-        >
+        <ScrollView showsVerticalScrollIndicator={false}>
           {this.renderCards()}
           {this.renderAlbum()}
         </ScrollView>
@@ -199,33 +198,33 @@ const styles = StyleSheet.create({
     paddingBottom: theme.SIZES.BASE,
     paddingHorizontal: theme.SIZES.BASE * 2,
     marginTop: 22,
-    color: argonTheme.COLORS.HEADER
+    color: argonTheme.COLORS.HEADER,
   },
   group: {
-    paddingTop: theme.SIZES.BASE
+    paddingTop: theme.SIZES.BASE,
   },
   albumThumb: {
     borderRadius: 4,
     marginVertical: 4,
     alignSelf: "center",
     width: thumbMeasure,
-    height: thumbMeasure
+    height: thumbMeasure,
   },
   category: {
     backgroundColor: theme.COLORS.WHITE,
     marginVertical: theme.SIZES.BASE / 2,
-    borderWidth: 0
+    borderWidth: 0,
   },
   categoryTitle: {
     height: "100%",
     paddingHorizontal: theme.SIZES.BASE,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
   },
   imageBlock: {
     overflow: "hidden",
-    borderRadius: 4
+    borderRadius: 4,
   },
   productItem: {
     width: cardWidth - theme.SIZES.BASE * 2,
@@ -233,21 +232,21 @@ const styles = StyleSheet.create({
     shadowColor: "black",
     shadowOffset: { width: 0, height: 7 },
     shadowRadius: 10,
-    shadowOpacity: 0.2
+    shadowOpacity: 0.2,
   },
   productImage: {
     width: cardWidth - theme.SIZES.BASE,
     height: cardWidth - theme.SIZES.BASE,
-    borderRadius: 3
+    borderRadius: 3,
   },
   productPrice: {
     paddingTop: theme.SIZES.BASE,
-    paddingBottom: theme.SIZES.BASE / 2
+    paddingBottom: theme.SIZES.BASE / 2,
   },
   productDescription: {
-    paddingTop: theme.SIZES.BASE
+    paddingTop: theme.SIZES.BASE,
     // paddingBottom: theme.SIZES.BASE * 2,
-  }
+  },
 });
 
 export default Articles;
diff --git a/screens/Elements.js b/screens/Elements.js
index da540eb..7a73d80 100644
--- a/screens/Elements.js
+++ b/screens/Elements.js
@@ -1,20 +1,26 @@
-import React from "react";
-import { ScrollView, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
 // Galio components
-import { Block, Text, Button as GaButton, theme } from "galio-framework";
+import { Block, Button as GaButton, Text, theme } from "galio-framework";
+import { Button, Header, Icon, Input, Select, Switch } from "../components/";
+import {
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
 // Argon themed components
 import { argonTheme, tabs } from "../constants/";
-import { Button, Select, Icon, Input, Header, Switch } from "../components/";
+
+import React from "react";
 
 const { width } = Dimensions.get("screen");
 
 class Elements extends React.Component {
   state = {
     "switch-1": true,
-    "switch-2": false
+    "switch-2": false,
   };
 
-  toggleSwitch = switchId =>
+  toggleSwitch = (switchId) =>
     this.setState({ [switchId]: !this.state[switchId] });
 
   renderButtons = () => {
@@ -62,7 +68,7 @@ class Elements extends React.Component {
             </Button>
           </Block>
           <Block row space="evenly">
-            <Block flex left style={{marginTop: 8}}>
+            <Block flex left style={{ marginTop: 8 }}>
               <Select
                 defaultIndex={1}
                 options={["01", "02", "03", "04", "05"]}
@@ -155,7 +161,7 @@ class Elements extends React.Component {
             style={{
               borderColor: argonTheme.COLORS.INFO,
               borderRadius: 4,
-              backgroundColor: "#fff"
+              backgroundColor: "#fff",
             }}
             iconContent={<Block />}
           />
@@ -200,7 +206,7 @@ class Elements extends React.Component {
                   width: 20,
                   height: 20,
                   borderRadius: 10,
-                  backgroundColor: argonTheme.COLORS.INPUT_SUCCESS
+                  backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
                 }}
               >
                 <Icon
@@ -225,7 +231,7 @@ class Elements extends React.Component {
                   width: 20,
                   height: 20,
                   borderRadius: 10,
-                  backgroundColor: argonTheme.COLORS.INPUT_ERROR
+                  backgroundColor: argonTheme.COLORS.INPUT_ERROR,
                 }}
               >
                 <Icon
@@ -363,7 +369,15 @@ class Elements extends React.Component {
           </Block>
 
           <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header white back title="Title" navigation={this.props.navigation} bgColor={argonTheme.COLORS.ACTIVE} titleColor="white" iconColor="white" />
+            <Header
+              white
+              back
+              title="Title"
+              navigation={this.props.navigation}
+              bgColor={argonTheme.COLORS.ACTIVE}
+              titleColor="white"
+              iconColor="white"
+            />
           </Block>
 
           <Block style={{ marginBottom: theme.SIZES.BASE }}>
@@ -371,7 +385,12 @@ class Elements extends React.Component {
           </Block>
 
           <Block style={{ marginBottom: theme.SIZES.BASE }}>
-            <Header tabs={tabs.categories} search title="Title" navigation={this.props.navigation} />
+            <Header
+              tabs={tabs.categories}
+              search
+              title="Title"
+              navigation={this.props.navigation}
+            />
           </Block>
 
           <Block style={{ marginBottom: theme.SIZES.BASE }}>
@@ -392,7 +411,10 @@ class Elements extends React.Component {
   render() {
     return (
       <Block flex center>
-        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 30, width }}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 30, width }}
+        >
           {this.renderButtons()}
           {this.renderText()}
           {this.renderInputs()}
@@ -411,55 +433,55 @@ const styles = StyleSheet.create({
     paddingBottom: theme.SIZES.BASE,
     paddingHorizontal: theme.SIZES.BASE * 2,
     marginTop: 44,
-    color: argonTheme.COLORS.HEADER
+    color: argonTheme.COLORS.HEADER,
   },
   group: {
-    paddingTop: theme.SIZES.BASE * 2
+    paddingTop: theme.SIZES.BASE * 2,
   },
   shadow: {
     shadowColor: "black",
     shadowOffset: { width: 0, height: 2 },
     shadowRadius: 4,
     shadowOpacity: 0.2,
-    elevation: 2
+    elevation: 2,
   },
   button: {
     marginBottom: theme.SIZES.BASE,
-    width: width - theme.SIZES.BASE * 2
+    width: width - theme.SIZES.BASE * 2,
   },
   optionsButton: {
     width: "auto",
     height: 34,
     paddingHorizontal: theme.SIZES.BASE,
-    paddingVertical: 10
+    paddingVertical: 10,
   },
   input: {
-    borderBottomWidth: 1
+    borderBottomWidth: 1,
   },
   inputDefault: {
-    borderBottomColor: argonTheme.COLORS.PLACEHOLDER
+    borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
   },
   inputTheme: {
-    borderBottomColor: argonTheme.COLORS.PRIMARY
+    borderBottomColor: argonTheme.COLORS.PRIMARY,
   },
   inputInfo: {
-    borderBottomColor: argonTheme.COLORS.INFO
+    borderBottomColor: argonTheme.COLORS.INFO,
   },
   inputSuccess: {
-    borderBottomColor: argonTheme.COLORS.SUCCESS
+    borderBottomColor: argonTheme.COLORS.SUCCESS,
   },
   inputWarning: {
-    borderBottomColor: argonTheme.COLORS.WARNING
+    borderBottomColor: argonTheme.COLORS.WARNING,
   },
   inputDanger: {
-    borderBottomColor: argonTheme.COLORS.ERROR
+    borderBottomColor: argonTheme.COLORS.ERROR,
   },
   social: {
     width: theme.SIZES.BASE * 3.5,
     height: theme.SIZES.BASE * 3.5,
     borderRadius: theme.SIZES.BASE * 1.75,
-    justifyContent: "center"
+    justifyContent: "center",
   },
 });
 
-export default Elements;
\ No newline at end of file
+export default Elements;