reza fixed components berfore Address

3 years ago · a8f4d7fe52
parent 72e4f631a1
commit a8f4d7fe52
13 changed files with 72 additions and 84 deletions
--- a/src/components/CustomTextInput.js
+++ b/src/components/CustomTextInput.js
@ -5,8 +5,6 @@ import {
  Text,
  Dimensions,
  StyleSheet,
-  useColorScheme,
-  Platform
 } from "react-native";
 import {connect} from 'react-redux';

@ -14,8 +12,6 @@ import tw from "tailwind-rn";
 import Colors from "../constants/Colors";
 import fontSize from "../constants/fontSize";

-const width = Dimensions.get("window").width;
-
 const FloatingLabelInput = ({
  label,
  textAlign,
@ -32,9 +28,9 @@ const FloatingLabelInput = ({
  mobile,
  keyboardType,
  multiline,
+  theme,
  ...props
 }) => {
-  const colorScheme = useColorScheme();
  const [isFocused, setIsFocused] = useState(false);

  const styles = StyleSheet.create({
@ -52,16 +48,16 @@ const FloatingLabelInput = ({
        },
      ],
      color: !isFocused
-        ? Colors.theme1[colorScheme].gray2077
-        : Colors.theme1[colorScheme].green79,
+        ? Colors.theme1[theme].gray2077
+        : Colors.theme1[theme].green79,
    },
    inputStyle: {
      fontSize: fontSize.lg,
-      color: Colors.theme1[colorScheme].black,
+      color: Colors.theme1[theme].black,
      borderWidth: 1,
      borderColor: isFocused
-        ? Colors.theme1[colorScheme].greenC8
-        : Colors.theme1[colorScheme].gray2077 + "66",
+        ? Colors.theme1[theme].greenC8
+        : Colors.theme1[theme].gray2077 + "66",
      textAlign: textAlign,
      fontFamily: "regular",
      direction: direction ? direction : "rtl",
@ -104,7 +100,8 @@ const FloatingLabelInput = ({
 };

 const mapStateToProps = (state) => ({
-  mobile: state.publicApi.mobile
+  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 })

 export default connect(mapStateToProps)(FloatingLabelInput);
--- a/src/components/Pressable.js
+++ b/src/components/Pressable.js
@ -14,7 +14,8 @@ function Pressable1({
  width,
  onPress,
  loading,
-  mobile
+  mobile,
+  theme
 }) {
  return (
    <TouchableOpacity
@ -43,7 +44,8 @@ function Pressable1({
 }

 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme : state.publicApi.theme
 })

 export default connect(mapStateToProps)(Pressable1);
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@ -4,7 +4,7 @@ import { Dimensions } from "react-native";
 const width = Dimensions.get("window").width;

 const initialState = {
-  // isDark: (await AsyncStorage.getItem("isDark")) || false,
+  theme: 'light',
  mobile : width < 720,
  homeData: [],
  newProducts: [],
--- a/src/redux/reducers/userFactor.js
+++ b/src/redux/reducers/userFactor.js
@ -28,7 +28,6 @@ export default function userFactor(state = initialState, action) {
        error: null,
      };
    case "userFactor/fullList":
-      console.log(data);
      return {
        ...state,
        loading: false,
--- a/src/redux/store.js
+++ b/src/redux/store.js
@ -68,7 +68,7 @@ const persistor = persistStore(store);
 const ReactNative = require("react-native");
 try {
  ReactNative.I18nManager.allowRTL(false);
-  //  enableScreens();
+   enableScreens();
 } catch (e) {
 }

--- a/src/screens/Activation/index.js
+++ b/src/screens/Activation/index.js
@ -1,13 +1,11 @@
 import React, { useState } from "react";
 import {
  View,
-  Text,
  TextInput,
  StatusBar,
  Platform,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
-  Appearance,
  SafeAreaView,
 } from "react-native";
 import { connect } from "react-redux";
@ -29,8 +27,7 @@ import bgQr from "./assets/bgQr.png";

 const ios = Platform.OS === "ios";

-function Activation({ add, mobile }) {
-  const colorScheme = Appearance.getColorScheme();
+function Activation({ add, mobile, theme }) {
  const [value, setValue] = useState(null);

  return (
@ -101,7 +98,7 @@ function Activation({ add, mobile }) {
              />
              <CustomPressable
                title={"تایید کد"}
-                backgroundColor={Colors.theme1[colorScheme].greenCF}
+                backgroundColor={Colors.theme1[theme].greenCF}
                color={"white"}
                border={{ color: "#196EC0", width: 0 }}
                width={"100%"}
@ -110,7 +107,7 @@ function Activation({ add, mobile }) {
              <Or />
              <CustomPressable
                title={"فعالسازی با کد QR"}
-                backgroundColor={Colors.theme1[colorScheme].greenD9}
+                backgroundColor={Colors.theme1[theme].greenD9}
                color={"white"}
                border={{ color: "#196EC0", width: 0 }}
                width={"100%"}
@ -129,7 +126,8 @@ Activation.defaultProps = {
 };

 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme: state.publicApi.theme
 });

 const mapDispatchToProps = {
--- a/src/screens/Home/components/Blogs.js
+++ b/src/screens/Home/components/Blogs.js
@ -11,7 +11,7 @@ import {
  Platform,
 } from "react-native";
 import { connect } from "react-redux";
-import { useNavigation} from '@react-navigation/native';
+import { useNavigation } from "@react-navigation/native";

 //components
 import Header from "../components/Header";
@ -27,7 +27,7 @@ import userImage from "../assets/user.png";
 const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";

-function Blogs({ blogs, mobile }) {
+function Blogs({ blogs, mobile, theme }) {
  return (
    <View style={[tw("flex mb-5")]}>
      <View style={tw("w-full px-4")}>
@ -39,7 +39,9 @@ function Blogs({ blogs, mobile }) {
        inverted={true}
        style={[tw("flex flex-row mt-3 pb-7")]}
        data={blogs}
-        renderItem={({ item }) => <Blog blog={item} mobile={mobile} />}
+        renderItem={({ item }) => (
+          <Blog blog={item} mobile={mobile} theme={theme} />
+        )}
        keyExtractor={(item) => item.id}
        initialNumToRender={5}
      />
@ -47,8 +49,7 @@ function Blogs({ blogs, mobile }) {
  );
 }

-const Blog = ({ blog, mobile }) => {
-  const colorScheme = Appearance.getColorScheme();
+const Blog = ({ blog, mobile, theme }) => {
  const navigation = useNavigation();

  return (
@ -88,7 +89,7 @@ const Blog = ({ blog, mobile }) => {
          style={[
            tw("mb-1"),
            {
-              color: Colors.theme1[colorScheme].gray20,
+              color: Colors.theme1[theme].gray20,
              fontFamily: "regular",
              fontSize: mobile ? fontSize.sm : fontSize.lg,
              textAlign: ios ? "right" : "auto",
@ -109,7 +110,7 @@ const Blog = ({ blog, mobile }) => {
            <Text
              style={[
                {
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                  fontFamily: "regular",
                  fontSize: mobile ? fontSize.xs : fontSize.base,
                },
@ -123,7 +124,7 @@ const Blog = ({ blog, mobile }) => {
              style={[
                tw("ml-1"),
                {
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                  fontFamily: "regular",
                  fontSize: mobile ? fontSize.xs : fontSize.base,
                },
@ -139,7 +140,7 @@ const Blog = ({ blog, mobile }) => {
 };

 const mapStateToProps = (state) => ({
-  // features: state.publicApi.home?.features,
  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
 });
 export default connect(mapStateToProps, {})(Blogs);
--- a/src/screens/Home/components/Header.js
+++ b/src/screens/Home/components/Header.js
@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, Pressable, Appearance } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import {connect} from 'react-redux';
@ -10,15 +10,14 @@ import tw from "tailwind-rn";
 //Color
 import Color from "../../../constants/Colors";

-const Header = ({ title, route, mobile }) => {
-  const colorScheme = Appearance.getColorScheme();
+const Header = ({ title, route, mobile, theme }) => {
  const navigation = useNavigation();
  return (
    <View style={tw(`w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`)}>
      <Text
        style={[
          {
-            color: Color.theme1[colorScheme].green79,
+            color: Color.theme1[theme].green79,
            fontFamily: "demi",
            fontSize: mobile ? fontSize.lg : fontSize.xl2,
          },
@ -28,7 +27,7 @@ const Header = ({ title, route, mobile }) => {
      </Text>
      {route ? (
        <Pressable onPress={() => navigation.navigate(route)} style={{transform: [{translateX : -fontSize.xl6 / 3}]}}>
-          <Entypo name="chevron-small-left" size={fontSize.xl6} color={Color.theme1[colorScheme].green79} />
+          <Entypo name="chevron-small-left" size={fontSize.xl6} color={Color.theme1[theme].green79} />
        </Pressable> 
      ) : null}
    </View>
@ -36,7 +35,8 @@ const Header = ({ title, route, mobile }) => {
 };

 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme : state.publicApi.theme
 })

 export default connect(mapStateToProps)(Header);
--- a/src/screens/Home/components/MyBooks.js
+++ b/src/screens/Home/components/MyBooks.js
@ -4,10 +4,8 @@ import {
  Image,
  Pressable,
  FlatList,
-  Appearance,
  Platform,
 } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { connect } from "react-redux";

 //components
@ -20,16 +18,15 @@ import fontSize from "../../../constants/fontSize";

 const ios = Platform.OS === "ios";

-function MyBooks({ books, grades }) {
-  const colorScheme = Appearance.getColorScheme();
+function MyBooks({ books, grades, theme }) {
  return (
    <View style={[tw("flex w-full mb-5")]}>
      <View
        style={[
          tw(`w-full flex  rounded-md pt-3 overflow-hidden`),
          {
-            backgroundColor: Colors.theme1[colorScheme].greenCF + "0F",
-            borderColor: Colors.theme1[colorScheme].greenD9 + "",
+            backgroundColor: Colors.theme1[theme].greenCF + "0F",
+            borderColor: Colors.theme1[theme].greenD9 + "",
            borderWidth: 1,
          },
        ]}
@ -38,7 +35,7 @@ function MyBooks({ books, grades }) {
          style={[
            tw(`pr-4 ${ios ? "text-right" : ""} w-full`),
            {
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
              fontFamily: "demi",
              fontSize: fontSize.lg,
            },
@ -52,7 +49,7 @@ function MyBooks({ books, grades }) {
          horizontal={true}
          inverted={true}
          data={books}
-          renderItem={({ item }) => <Book book={item} grades={grades} />}
+          renderItem={({ item }) => <Book book={item} grades={grades} theme={theme} />}
          keyExtractor={(book) => book?.id}
        />
      </View>
@ -60,9 +57,7 @@ function MyBooks({ books, grades }) {
  );
 }

-const Book = ({ book, grades }) => {
-  const colorScheme = Appearance.getColorScheme();
-  const navigation = useNavigation();
+const Book = ({ book, grades, theme }) => {
  return (
    <Pressable
      style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
@ -86,7 +81,7 @@ const Book = ({ book, grades }) => {
        style={[
          tw("mt-2 pr-1"),
          {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
            fontFamily: "bold",
            fontSize: fontSize.sm,
          },
@ -98,7 +93,7 @@ const Book = ({ book, grades }) => {
        style={[
          tw("pr-1"),
          {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
            fontFamily: "light",
            fontSize: fontSize.sm,
          },
@ -113,6 +108,7 @@ const Book = ({ book, grades }) => {

 const mapStateToProps = (state) => ({
  grades: state.publicApi.grades,
+  theme: state.publicApi.theme
 });

 export default connect(mapStateToProps)(MyBooks);
--- a/src/screens/Home/components/Scroll.js
+++ b/src/screens/Home/components/Scroll.js
@ -5,13 +5,11 @@ import {
  Pressable,
  FlatList,
  Platform,
-  Dimensions
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import tw from "tailwind-rn";

 const ios = Platform.OS === "ios";
-const {height} = Dimensions.get("window");

 import { connect } from "react-redux";

--- a/src/screens/Home/components/Videos.js
+++ b/src/screens/Home/components/Videos.js
@ -4,7 +4,6 @@ import {
  Image,
  Pressable,
  FlatList,
-  Appearance,
  Platform,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
@ -21,7 +20,7 @@ import fontSize from "../../../constants/fontSize";

 const ios = Platform.OS === "ios";

-function Videos({ videos, grades, mobile }) {
+function Videos({ videos, grades, mobile, theme }) {
  return (
    <View style={[tw("w-full mb-5")]}>
      <View style={[tw("w-full flex  rounded-md pt-2  overflow-hidden")]}>
@ -35,7 +34,7 @@ function Videos({ videos, grades, mobile }) {
          inverted={true}
          data={videos}
          renderItem={({ item }) => (
-            <Video video={item} grades={grades} mobile={mobile} />
+            <Video video={item} grades={grades} mobile={mobile} theme={theme} />
          )}
          keyExtractor={(item) => item.id}
        />
@ -44,9 +43,8 @@ function Videos({ videos, grades, mobile }) {
  );
 }

-const Video = ({ video, mobile, grades }) => {
+const Video = ({ video, mobile, grades, theme }) => {
  const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
  return (
    <Pressable
      style={[
@ -68,7 +66,7 @@ const Video = ({ video, mobile, grades }) => {
        style={[
          tw("mt-2 px-1"),
          {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
            fontFamily: "bold",
            fontSize: mobile ? fontSize.sm : fontSize.xl,
            textAlign: ios ? "right" : "auto",
@ -81,7 +79,7 @@ const Video = ({ video, mobile, grades }) => {
        style={[
          tw("mt-1 pr-1"),
          {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
            fontFamily: "regular",
            fontSize: mobile ? fontSize.xs : fontSize.base,
            textAlign: ios ? "right" : "auto",
@ -100,6 +98,7 @@ const Video = ({ video, mobile, grades }) => {
 const mapStateToProps = (state) => ({
  grades: state.publicApi.grades,
  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });

 export default connect(mapStateToProps, {})(Videos);
--- a/src/screens/Login/index.js
+++ b/src/screens/Login/index.js
@ -7,7 +7,6 @@ import {
  ActivityIndicator,
  Dimensions,
  TouchableHighlight,
-  Appearance,
  Platform,
  KeyboardAvoidingView,
 } from "react-native";
@ -26,7 +25,6 @@ const ios = Platform.OS === "ios";
 const { height } = Dimensions.get("window");

 function Login(props) {
-  const colorScheme = Appearance.getColorScheme();
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(false);

@ -52,12 +50,12 @@ function Login(props) {
  };

  return (
-    <KeyboardAvoidingView
-      behavior={ios ? "padding" : "height"}
+    <View
      style={[
-        tw(
-          `flex  flex-1 justify-center items-center bg-white px-4 relative`
-        ),
+        tw(`flex  flex-1 justify-center items-center bg-white px-4 relative`),
+        {
+          minHeight: height,
+        },
      ]}
    >
      <Svg
@ -94,7 +92,7 @@ function Login(props) {
          {
            fontSize: fontSize.xl2,
            fontFamily: "bold",
-            color: Colors.theme1[colorScheme].black,
+            color: Colors.theme1[props.theme].black,
          },
        ]}
      >
@ -110,7 +108,7 @@ function Login(props) {
          {
            fontSize: fontSize.xl2,
            fontFamily: "bold",
-            color: Colors.theme1[colorScheme].black,
+            color: Colors.theme1[props.theme].black,
          },
        ]}
      >
@ -142,11 +140,11 @@ function Login(props) {
      {!props.mobile && <View style={tw("mt-10")}></View>}
      <TouchableHighlight
        disabled={loading}
-        underlayColor={Colors.theme1[colorScheme].greenC8}
+        underlayColor={Colors.theme1[props.theme].greenC8}
        style={[
          tw(`w-full py-3 rounded-sm ${props.mobile ? "" : "w-2/4"}`),
          {
-            backgroundColor: Colors.theme1[colorScheme].greenCF,
+            backgroundColor: Colors.theme1[props.theme].greenCF,
            alignItems: "center",
            justifyContent: "center",
            marginTop: 25,
@ -181,12 +179,13 @@ function Login(props) {
        </Text>{" "}
        می‌باشد
      </Text>
-    </KeyboardAvoidingView>
+    </View>
  );
 }

 const mapStateToProps = (state) => ({
  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
 });

 const mapDispatchToProps = {
--- a/src/screens/Otp/index.js
+++ b/src/screens/Otp/index.js
@ -6,7 +6,6 @@ import {
  Dimensions,
  TouchableOpacity,
  ActivityIndicator,
-  Appearance,
  Platform,
 } from "react-native";
 import tw from "tailwind-rn";
@ -29,7 +28,6 @@ let ref4;
 let timer = 60;

 function Otp(props) {
-  const colorScheme = Appearance.getColorScheme();
  const [firstCode, setFirstCode] = useState("");
  const [secondCode, setSecondCode] = useState("");
  const [thirdCode, setThirdCode] = useState("");
@ -128,7 +126,7 @@ function Otp(props) {
  };

  return (
-    <View style={[tw("px-4 flex-1 justify-center items-center bg-white")]}>
+    <View style={[tw("px-4 flex-1 justify-center items-center bg-white"), {minHeight: height}]}>
      <Svg
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
@ -163,14 +161,14 @@ function Otp(props) {
          {
            fontSize: props.mobile ? fontSize.tiny : fontSize.base,
            fontFamily: "light",
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[props.theme].gray20,
          },
        ]}
      >
        یک کد تائیدیه به شماره{" "}
        <Text
          style={{
-            color: Colors.theme1[colorScheme].greenCF,
+            color: Colors.theme1[props.theme].greenCF,
            fontSize: fontSize.base,
            fontFamily: "demi",
          }}
@ -190,7 +188,7 @@ function Otp(props) {
            {
              fontSize: fontSize.xl5,
              fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
              width: fontSize.xl5 + 40,
            },
          ]}
@ -209,7 +207,7 @@ function Otp(props) {
            {
              fontSize: fontSize.xl5,
              fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
              width: fontSize.xl5 + 40,
            },
          ]}
@ -228,7 +226,7 @@ function Otp(props) {
            {
              fontSize: fontSize.xl5,
              fontFamily: "bold",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
              width: fontSize.xl5 + 40,
            },
          ]}
@ -247,7 +245,7 @@ function Otp(props) {
            {
              fontSize: fontSize.xl5,
              fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
              width: fontSize.xl5 + 40,
            },
          ]}
@ -270,7 +268,7 @@ function Otp(props) {
            }`
          ),
          {
-            backgroundColor: Colors.theme1[colorScheme].greenCF,
+            backgroundColor: Colors.theme1[props.theme].greenCF,
          },
        ]}
        onPress={() => submit()}
@ -297,7 +295,7 @@ function Otp(props) {
              {
                fontFamily: "light",
                fontSize: fontSize.base,
-                color: Colors.theme1[colorScheme].gray20,
+                color: Colors.theme1[props.theme].gray20,
              },
            ]}
          >
@ -315,7 +313,7 @@ function Otp(props) {
                textAlign: "center",
                fontFamily: "light",
                fontSize: fontSize.base,
-                color: Colors.theme1[colorScheme].greenBA,
+                color: Colors.theme1[props.theme].greenBA,
              }}
            >
              {"بازگشت به مرحله قبل و اصلاح شماره"}
@ -330,6 +328,7 @@ function Otp(props) {
 const mapStateToProps = (state) => ({
  isLogin: state.user.status,
  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });

 const mapDispatchToProps = {