reza fixed some bugs

App.js

@@ -21,10 +21,10 @@ const App = () => {
   }
   return (
     <Provider store={store}>
-      {/* <PersistGate loading={null} persistor={persistor}> */}
+      <PersistGate loading={null} persistor={persistor}>
         <Navigation />
         <AlertModal />
-      {/* </PersistGate> */}
+      </PersistGate>
     </Provider>
   );
 };

navigation/index.js

@@ -43,6 +43,7 @@ import Rules from "../src/screens/Rules/index";
 import MyCourses from "../src/screens/Profile/components/MyCourses";
 import Ticket from "../src/screens/Contact/layouts/Ticket";
 import Tickets from "../src/screens/Contact/layouts/Tickets";
+import MoreBlog from "../src/screens/Blogs/layouts/More";
 
 //style
 import Colors from "../src/constants/Colors";
@@ -464,6 +465,7 @@ const HomeStackScreen = ({ theme }) => {
       <HomeStack.Screen name="Product" component={Product} />
       <HomeStack.Screen name="Sample" component={Sample} />
       <HomeStack.Screen name="Blogs" component={Blogs} />
+      <HomeStack.Screen name="MoreBlog" component={MoreBlog} />
       <HomeStack.Screen name="Blog" component={Blog} />
       <HomeStack.Screen name="Info" component={Info} />
     </HomeStack.Navigator>
@@ -545,10 +547,11 @@ const PROFILEStackScreen = ({ theme }) => {
     >
       <PROFILEStack.Screen name="Profile" component={Profile} />
       <PROFILEStack.Screen name="ProfileBookmark" component={ProfileBookmark} />
-      <ProductsStack.Screen name="Products" component={Products} />
+      <PROFILEStack.Screen name="Products" component={Products} />
       <PROFILEStack.Screen name="Product" component={Product} />
-      <HomeStack.Screen name="Blogs" component={Blogs} />
+      <PROFILEStack.Screen name="Blogs" component={Blogs} />
-      <HomeStack.Screen name="Blog" component={Blog} />
+      <PROFILEStack.Screen name="MoreBlog" component={MoreBlog} />
+      <PROFILEStack.Screen name="Blog" component={Blog} />
       <PROFILEStack.Screen name="MyCourses" component={MyCourses} />
     </PROFILEStack.Navigator>
   );

src/components/Pressable.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { TouchableOpacity, Text, ActivityIndicator } from "react-native";
-import {connect} from 'react-redux';
+import { connect } from "react-redux";
 
 //style
 import tw from "tailwind-rn";
@@ -15,7 +15,8 @@ function Pressable1({
   onPress,
   loading,
   mobile,
-  theme
+  theme,
+  textFontSize,
 }) {
   return (
     <TouchableOpacity
@@ -34,7 +35,17 @@ function Pressable1({
         <ActivityIndicator size="small" color={color} />
       ) : (
         <Text
-          style={{ fontSize: mobile ? fontSize.tiny : fontSize.xl, color: color, fontFamily: "bold" }}
+          style={{
+            fontSize: mobile
+              ? textFontSize
+                ? textFontSize
+                : fontSize.tiny
+              : textFontSize
+              ? textFontSize
+              : fontSize.xl,
+            color: color,
+            fontFamily: "bold",
+          }}
         >
           {title}
         </Text>
@@ -45,7 +56,7 @@ function Pressable1({
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
-  theme : state.publicApi.theme
+  theme: state.publicApi.theme,
-})
+});
 
 export default connect(mapStateToProps)(Pressable1);

src/components/Progress.js

@@ -8,25 +8,26 @@ import Colors from "../constants/Colors";
 
 function Progress({ percent, alignItems, theme }) {
   return (
-    <View
+    <></>
-      style={[
+    // <View
-        tw(
+    //   style={[
-          `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
+    //     tw(
-        ),
+    //       `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
-        { backgroundColor: Colors.theme1.green79 + "22" },
+    //     ),
-      ]}
+    //     { backgroundColor: Colors.theme1.green79 + "22" },
-    >
+    //   ]}
-      <View
+    // >
-        style={[
+    //   <View
-          tw("h-full rounded-full"),
+    //     style={[
-          {
+    //       tw("h-full rounded-full"),
-            backgroundColor: Colors.theme1.greenCF,
+    //       {
-            width: percent + "%",
+    //         backgroundColor: Colors.theme1.greenCF,
-            // backgroundColor: Color.theme1.light.blue4,
+    //         width: percent + "%",
-          },
+    //         // backgroundColor: Color.theme1.light.blue4,
-        ]}
+    //       },
-      ></View>
+    //     ]}
-    </View>
+    //   ></View>
+    // </View>
   );
 }
 

src/redux/reducers/public.js

@@ -1,10 +1,11 @@
-import { Dimensions,  AsyncStorage } from "react-native";
+import { Dimensions } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const width = Dimensions.get("window").width;
 
 const initialState = {
   ltr: false,
-  theme: 'light',
+  theme: null,
   mobile : width < 720,
   homeData: [],
   newProducts: [],
@@ -80,6 +81,7 @@ const publicApi = (state = initialState, action) => {
     case "public/setLtr":
       return { ...state, ltr : true };
     case "public/setIsDark":
+      AsyncStorage.setItem("theme", data);
       return { ...state, location: false, error: null, theme: data };
     case "active/video":
       return {

src/screens/Blogs/layouts/Header.js

@@ -1,6 +1,10 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { connect } from "react-redux";
+import { useNavigation } from "@react-navigation/native";
+
+//components
+import CustomPressable from "../../../components/Pressable";
 
 //style
 import tw from "tailwind-rn";
@@ -8,28 +12,65 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
 export const Header = ({ title, theme }) => {
+  const navigation = useNavigation();
   return (
-    <View style={tw("flex flex-row-reverse w-full items-center mt-5 mb-4")}>
+    <View
+      style={tw(
+        "flex flex-row-reverse w-full items-center mt-5 mb-4"
+      )}
+    >
       <Text
         style={[
           tw("py-2.5 pr-2.5 pl-5"),
           {
             fontSize: fontSize.base,
-            color: theme === "light" ? Colors.theme1.white : Colors.theme1.black,
+            color:
-            backgroundColor: theme === 'light' ? Colors.theme1.black : Colors.theme1.white + 'dd',
+              theme === "light" ? Colors.theme1.white : Colors.theme1.black,
-            fontFamily : 'bold'
+            backgroundColor:
+              theme === "light"
+                ? Colors.theme1.black
+                : Colors.theme1.white + "dd",
+            fontFamily: "bold",
+            alignItems: "center",
           },
         ]}
       >
         {title}
       </Text>
-      <View style={{ width : '100%', backgroundColor : Colors.theme1.grayE3 + (theme === "light" ? "" : "55"), height : 2 }}></View>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor:
+            Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
+          height: 2,
+        }}
+      ></View>
+      <Pressable
+        onPress={() => navigation.push("MoreBlog")}
+        style={[
+          tw("py-3 px-1.5"),
+          {
+            backgroundColor:
+              Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
+          },
+        ]}
+      >
+        <Text
+          style={{
+            fontSize: fontSize.sm,
+            fontWeight: "light",
+            color: Colors.theme1.green79,
+          }}
+        >
+          مشاهده بیشتر
+        </Text>
+      </Pressable>
     </View>
   );
 };
 
 const mapStateToProps = (state) => ({
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {};

src/screens/Blogs/layouts/More.js

@@ -0,0 +1,111 @@
+import {
+  View,
+  Text,
+  Platform,
+  StyleSheet,
+  SafeAreaView,
+  StatusBar,
+  Dimensions,
+  FlatList,
+  Pressable,
+  Image,
+} from "react-native";
+import { connect } from "react-redux";
+import React from "react";
+import { useNavigation } from "@react-navigation/native";
+
+//components
+import Navbar from "../../../components/Navbar";
+
+//style
+import fontSize from "../../../constants/fontSize";
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+
+//variables
+const ios = Platform.OS === "ios";
+const { width, height } = Dimensions.get("window");
+
+const MoreBlog = ({ mobile, theme, blogs }) => {
+  const styles = React.useMemo(() => {
+    return StyleSheet.create({
+      contentContainerStyle: {
+        paddingBottom: 100,
+      },
+      container: {
+        flexDirection: "column",
+        paddingVertical: 5,
+        paddingHorizontal: 16,
+      },
+    });
+  }, [theme]);
+
+  return (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: false,
+          hamburgerMenu: false,
+          title: null,
+          bookmark: false,
+          qr: false,
+          back: true,
+        }}
+      />
+      <FlatList
+        data={blogs}
+        style={tw("px-4")}
+        renderItem={({ item }) => <Blog blog={item} theme={theme} />}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ paddingBottom: height / 2 }}
+      />
+    </SafeAreaView>
+  );
+};
+
+const Blog = ({ blog, theme }) => {
+  const navigation = useNavigation();
+  return (
+    <Pressable
+      style={[tw("w-full flex pb-4 mb-4")]}
+      onPress={() => navigation.push("Blog", { id: blog?.id })}
+    >
+      <Image
+        source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }}
+        resizeMode="contain"
+        style={[
+          tw("rounded-sm"),
+          { width: "100%", height: ((width - 32) * 3) / 4 },
+        ]}
+      />
+      <Text
+        style={{
+          fontSize: fontSize.lg,
+          fontFamily: "bold",
+          color:
+            theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
+          marginTop: 5,
+          textAlign: ios ? "right" : "auto",
+        }}
+      >
+        {blog?.title}
+      </Text>
+    </Pressable>
+  );
+};
+
+//  `w-[${state + '%'}]`
+
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
+  blogs: state.blog.list,
+});
+
+export default connect(mapStateToProps)(MoreBlog);

src/screens/Splash/index.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
 import { View, Image, ActivityIndicator, Dimensions, BackHandler } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { connect } from "react-redux";
-import { blog, book, userProduct } from "../../redux/actions";
+import { blog, book, userProduct, publicApi } from "../../redux/actions";
 import { useIsFocused } from '@react-navigation/native';
 
 import Logo from "../../assets/images/logo.png";
@@ -17,10 +18,15 @@ function Splash({
   getBooks,
   userProducts,
   getUserProducts,
+  setIsDark,
 }) {
   const isFocused = useIsFocused();
   const [out, setOut] = React.useState(false);
-  useEffect(() => {
+  useEffect(async () => {
+    //set theme
+    const theme = await AsyncStorage.getItem("theme");
+    setIsDark(theme);
+
     if (isLogin !== null) {
       if (isLogin === false) {
         setOut(true);
@@ -101,6 +107,7 @@ const mapDispatchToProps = {
   getBlogs: blog.list,
   getBooks: book.list,
   getUserProducts: userProduct.list,
+  setIsDark: publicApi.setIsDark
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Splash);

src/screens/Videos/index.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import {
   View,
   StyleSheet,
-  Dimensions,
   ScrollView,
   SafeAreaView,
   StatusBar,