diff --git a/App.js b/App.js index c6f222f..63161bd 100644 --- a/App.js +++ b/App.js @@ -21,10 +21,10 @@ const App = () => { } return ( - {/* */} + - {/* */} + ); }; diff --git a/navigation/index.js b/navigation/index.js index 47a3f86..ac4bcd0 100644 --- a/navigation/index.js +++ b/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 }) => { + @@ -545,10 +547,11 @@ const PROFILEStackScreen = ({ theme }) => { > - + - - + + + ); diff --git a/src/components/Pressable.js b/src/components/Pressable.js index 8be1c4c..5e3615c 100644 --- a/src/components/Pressable.js +++ b/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 ( ) : ( {title} @@ -44,8 +55,8 @@ function Pressable1({ } const mapStateToProps = (state) => ({ - mobile : state.publicApi.mobile, - theme : state.publicApi.theme -}) + mobile: state.publicApi.mobile, + theme: state.publicApi.theme, +}); -export default connect(mapStateToProps)(Pressable1); \ No newline at end of file +export default connect(mapStateToProps)(Pressable1); diff --git a/src/components/Progress.js b/src/components/Progress.js index f22ddd7..50538da 100644 --- a/src/components/Progress.js +++ b/src/components/Progress.js @@ -8,25 +8,26 @@ import Colors from "../constants/Colors"; function Progress({ percent, alignItems, theme }) { return ( - - - + <> + // + // + // ); } diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index 54b1774..0ec9b2d 100644 --- a/src/redux/reducers/public.js +++ b/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 { diff --git a/src/screens/Blogs/layouts/Header.js b/src/screens/Blogs/layouts/Header.js index d758a47..4dcfa23 100644 --- a/src/screens/Blogs/layouts/Header.js +++ b/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 ( - + {title} - + + navigation.push("MoreBlog")} + style={[ + tw("py-3 px-1.5"), + { + backgroundColor: + Colors.theme1.grayE3 + (theme === "light" ? "" : "55"), + }, + ]} + > + + مشاهده بیشتر + + ); }; const mapStateToProps = (state) => ({ - theme: state.publicApi.theme + theme: state.publicApi.theme, }); const mapDispatchToProps = {}; diff --git a/src/screens/Blogs/layouts/More.js b/src/screens/Blogs/layouts/More.js new file mode 100644 index 0000000..44e4c78 --- /dev/null +++ b/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 ( + + + } + keyExtractor={(item) => item.id} + contentContainerStyle={{ paddingBottom: height / 2 }} + /> + + ); +}; + +const Blog = ({ blog, theme }) => { + const navigation = useNavigation(); + return ( + navigation.push("Blog", { id: blog?.id })} + > + + + {blog?.title} + + + ); +}; + +// `w-[${state + '%'}]` + +const mapStateToProps = (state) => ({ + mobile: state.publicApi.mobile, + theme: state.publicApi.theme, + blogs: state.blog.list, +}); + +export default connect(mapStateToProps)(MoreBlog); diff --git a/src/screens/Splash/index.js b/src/screens/Splash/index.js index 9138b14..e90f419 100644 --- a/src/screens/Splash/index.js +++ b/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); diff --git a/src/screens/Videos/index.js b/src/screens/Videos/index.js index 68c40d9..026b8cb 100644 --- a/src/screens/Videos/index.js +++ b/src/screens/Videos/index.js @@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react"; import { View, StyleSheet, - Dimensions, ScrollView, SafeAreaView, StatusBar,