Dependencies updated & Stack navigator issues fixed

2025-12-22 09:19:26 +00:00 · 2022-04-06 14:21:17 +05:00
parent 3f62b1867a
commit 92eaadbb19
4 changed files with 143 additions and 94 deletions
--- 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;
--- 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}
--- 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;
--- 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;
+export default Elements;