📚 - manga added (needs work)

StreamAble-Team · Dec 19, 2022 · b6eebd4 · b6eebd4
1 parent 518c0d9
commit b6eebd4
Show file tree

Hide file tree

Showing 7 changed files with 324 additions and 762 deletions.
diff --git a/package.json b/package.json
@@ -14,18 +14,17 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.2",
-    "@expo-google-fonts/inter": "^0.2.2",
     "@expo-google-fonts/open-sans": "^0.2.2",
     "@openspacelabs/react-native-zoomable-view": "^2.1.1",
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/slider": "4.2.4",
-    "@react-navigation/native": "^6.0.14",
-    "@react-navigation/native-stack": "^6.9.2",
-    "@sentry/react-native": "4.9.0",
-    "@sentry/tracing": "^7.24.2",
+    "@react-native-async-storage/async-storage": "~1.17.11",
+    "@react-native-community/slider": "4.4.0",
+    "@react-navigation/native": "^6.1.1",
+    "@react-navigation/native-stack": "^6.9.7",
+    "@sentry/react-native": "4.12.0",
+    "@sentry/tracing": "^7.27.0",
     "apollo3-cache-persist": "^0.14.1",
-    "axios": "^1.2.0",
-    "dayjs": "^1.11.6",
+    "axios": "^1.2.1",
+    "dayjs": "^1.11.7",
     "expo": "~47.0.8",
     "expo-application": "~5.0.1",
     "expo-auth-session": "~3.7.3",
@@ -49,19 +48,18 @@
     "graphql-tag": "^2.12.6",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "react": "18.1.0",
-    "react-native": "0.70.5",
+    "react": "18.2.0",
+    "react-native": "0.70.6",
     "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
-    "react-native-snap-carousel": "^3.9.1",
-    "react-native-vector-image": "^0.3.3",
+    "react-native-screens": "~3.18.2",
+    "react-native-vector-icons": "^9.2.0",
     "react-query": "^3.39.2",
-    "sanitize-html": "^2.7.3",
+    "sanitize-html": "^2.8.0",
     "sentry-expo": "~6.0.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.5",
     "@graphql-codegen/cli": "^2.16.1",
     "@graphql-codegen/fragment-matcher": "^3.3.3",
     "@graphql-codegen/introspection": "^2.2.3"

diff --git a/src/components/Reader/NavBar/NavBar.styles.js b/src/components/Reader/NavBar/NavBar.styles.js
@@ -4,20 +4,20 @@ import Icon from "react-native-vector-icons/FontAwesome5";
 
 const borderRadius = 8;
 
-export const Container = styled(LinearGradient).attrs(() => ({
-  colors: ["rgba(0, 0, 0, 0.1)", "rgba(0, 0, 0, 0.45)"],
-  start: { x: 0, y: 1 },
-  end: { x: 0, y: 0 },
-}))`
+export const Container = styled.View`
   position: absolute;
-  top: 0;
   left: 0;
   width: 100%;
   padding: 10px 25px;
   z-index: 10;
 `;
 
-export const FlexBox = styled.View`
+export const FlexBox = styled(LinearGradient).attrs(() => ({
+  colors: ["rgba(0, 0, 0, 0.1)", "rgba(0, 0, 0, 0.45)"],
+  start: { x: 0, y: 1 },
+  end: { x: 0, y: 0 },
+}))`
+  width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;

diff --git a/src/components/Reader/NavBar/index.js b/src/components/Reader/NavBar/index.js
@@ -13,7 +13,7 @@ import {
   TitleWrapper,
 } from "./NavBar.styles";
 
-const ReaderNavBar = ({ mangaTitle, chapter }) => {
+const ReaderNavBar = ({ mangaTitle, chapter, toggleNavBar }) => {
   const navigation = useNavigation();
   const [preferredLanguage, setPreferredLanguage] = useState("EN");
   const title_english = mangaTitle?.english || mangaTitle?.romaji;
@@ -34,6 +34,7 @@ const ReaderNavBar = ({ mangaTitle, chapter }) => {
     }, [])
   );
 
+  if (!toggleNavBar) return null;
   return (
     <Container>
       <FlexBox>

diff --git a/src/components/Reader/pages/index.js b/src/components/Reader/pages/index.js
@@ -4,7 +4,7 @@ import Page from "./Page";
 import { FLatList, PagesContainer } from "./pages.styles";
 
 const ReaderPages = (props) => {
-  const { pages, mangaTitle } = props;
+  const { pages, mangaTitle, toggleNavBar } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [isHorizontal, setIsHorizontal] = useState(false);
   const [inverted, setInverted] = useState(false);
@@ -30,7 +30,7 @@ const ReaderPages = (props) => {
   };
 
   return (
-    <PagesContainer>
+    <PagesContainer toggleNavBar={toggleNavBar}>
       <FLatList
         data={pages}
         renderItem={renderPage}

diff --git a/src/components/Reader/pages/pages.styles.js b/src/components/Reader/pages/pages.styles.js
@@ -1,7 +1,7 @@
 import styled from "styled-components/native";
 
 export const PagesContainer = styled.View`
-  margin-top: 50px;
+  margin-top: ${({ toggleNavBar }) => (!toggleNavBar ? 25 : 50)}px;
   margin-bottom: 50px;
   // background-color: red;
   display: flex;

diff --git a/src/containers/Reader/index.js b/src/containers/Reader/index.js
@@ -1,17 +1,27 @@
-import { View, Text } from "react-native";
-import React from "react";
+import { View, Text, TouchableOpacity, Pressable } from "react-native";
+import React, { useState } from "react";
 import { Container } from "../Container.styles";
 import ReaderPages from "../../components/Reader/pages";
 import { ReaderNavBar } from "../../components";
 
 const ReaderContainer = ({ pages, mangaTitle, chapter }) => {
+  const [toggleNavBar, setToggleNavBar] = useState(true);
+
   return (
-    <>
-      <ReaderNavBar mangaTitle={mangaTitle} chapter={chapter} />
+    <Pressable onPress={() => setToggleNavBar(!toggleNavBar)}>
+      <ReaderNavBar
+        mangaTitle={mangaTitle}
+        chapter={chapter}
+        toggleNavBar={toggleNavBar}
+      />
       <Container>
-        <ReaderPages pages={pages} mangaTitle={mangaTitle} />
+        <ReaderPages
+          pages={pages}
+          mangaTitle={mangaTitle}
+          toggleNavBar={toggleNavBar}
+        />
       </Container>
-    </>
+    </Pressable>
   );
 };