reza checked bottom navigation in ios and android

navigation/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import Svg, { G, Path } from "react-native-svg";
-import { Appearance } from "react-native";
+import { Appearance, Platform } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
@@ -40,29 +40,35 @@ import fontSize from "../src/constants/fontSize";
 import Colors from "../src/constants/Colors";
 import tw from "tailwind-react-native-classnames";
 
+const ios = Platform.OS === "ios";
+
 const Tab = createBottomTabNavigator();
 const BottomTabNavigator = () => {
+  const [height, setHeight] = React.useState(88);
   const colorScheme = Appearance.getColorScheme();
-
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHeight(89);
+    },1000);
+  },[]);
   return (
     <Tab.Navigator
       initialRouteName="HomeTab"
       screenOptions={{
         tabBarHideOnKeyboard: true,
         headerShown: false,
+        tabBarLabelPosition : "below-icon",
         tabBarActiveTintColor: Colors.theme1[colorScheme].green79,
         tabBarInactiveTintColor: "grey",
         tabBarStyle: {
           backgroundColor: Colors.theme1[colorScheme].greenFF1,
-          height: 70,
+          height
         },
         tabBarLabelStyle: {
           fontSize: fontSize.sm,
           fontFamily: "bold",
-          transform: [{ translateY: -7 }],
         },
         tabBarShowLabel: true,
-        // tabBarLabel : 'reza'
       }}
     >
       <Tab.Screen
@@ -342,8 +348,9 @@ const HomeStackScreen = () => {
     >
       <HomeStack.Screen name="Home" component={Home} />
       <HomeStack.Screen name="VOD" component={Videos} />
+      <HomeStack.Screen name="Video" component={Video} unmountOnExit={true} />
+      <HomeStack.Screen name="VideoDisplay" component={VideoDisplay} />
       <HomeStack.Screen name="Products" component={Products} />
-      <HomeStack.Screen name="Video" component={Video} />
       <HomeStack.Screen name="Product" component={Product} />
       <HomeStack.Screen name="Blogs" component={Blogs} />
       <HomeStack.Screen name="Blog" component={Blog} />

src/components/Search.js

@@ -1,28 +1,22 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 import {
   TextInput,
   View,
   Dimensions,
   StyleSheet,
   Pressable,
-  Appearance
+  Appearance,
-} from 'react-native';
+} from "react-native";
-import tw from 'tailwind-rn';
+import tw from "tailwind-rn";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
 
 //style
 import Colors from "../constants/Colors";
-import fontSize from '../constants/fontSize';
+import fontSize from "../constants/fontSize";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
 
-const Search = ({
+const Search = ({ placeholder, textAlign, direction, onChange, value }) => {
-  placeholder,
-  textAlign,
-  direction,
-  onChange,
-  value,
-}) => {
   const colorScheme = Appearance.getColorScheme();
   const styles = StyleSheet.create({
     inputStyle: {
@@ -35,19 +29,19 @@ const Search = ({
       direction: direction,
       textAlign: textAlign,
       backgroundColor: Colors.theme1[colorScheme].white,
-      fontFamily : 'regular'
+      fontFamily: "regular",
     },
   });
   return (
-    <View style={[{marginTop: 18}, tw('w-full relative')]}>
+    <View style={[{ marginTop: 18 }, tw("w-full relative")]}>
       <TextInput
-        style={[styles.inputStyle, tw('rounded-md')]}
+        style={[styles.inputStyle, tw("rounded-md")]}
-        onChangeText={text => onChange(text)}
+        onChangeText={(text) => onChange(text)}
         placeholder={placeholder}
         placeholderTextColor={Colors.theme1[colorScheme].gray2077}
         value={value}
       />
-      <Pressable style={tw('absolute left-3 top-0 inset-y-3.5')}>
+      <Pressable style={tw("absolute left-3 top-3")}>
         <AntDesign name="search1" size={20} color="#52796F" />
       </Pressable>
     </View>
@@ -57,6 +51,6 @@ const Search = ({
 export default Search;
 
 Search.defaultProps = {
-  direction: 'rtl',
+  direction: "rtl",
-  textAlign: 'right',
+  textAlign: "right",
 };

src/screens/Blogs/layouts/New.js

@@ -45,7 +45,7 @@ export const New = ({ blog }) => {
           fontFamily: "bold",
           color: Colors.theme1[colorScheme].gray20,
           marginTop: 5,
-          textAlign: ios ? "right" : "",
+          textAlign: ios ? "right" : "auto",
         }}
       >
         {blog?.title}
@@ -55,7 +55,7 @@ export const New = ({ blog }) => {
           fontSize: fontSize.sm,
           fontFamily: "regular",
           color: Colors.theme1[colorScheme].gray2077,
-          textAlign: ios ? "right" : "",
+          textAlign: ios ? "right" : "auto",
           marginTop: 5,
         }}
       >

src/screens/Blogs/layouts/Single.js

@@ -6,6 +6,7 @@ import {
   Dimensions,
   Image,
   Appearance,
+  Platform,
 } from "react-native";
 import { connect } from "react-redux";
 import { LinearGradient } from "expo-linear-gradient";
@@ -17,6 +18,7 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
 const { height, width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 export const Single = ({ blog }) => {
   const navigation = useNavigation();
@@ -58,7 +60,11 @@ export const Single = ({ blog }) => {
                 <Text
                   style={[
                     tw("text-gray-100"),
-                    { fontFamily: "bold", fontSize: fontSize.tiny },
+                    {
+                      fontFamily: "bold",
+                      fontSize: fontSize.tiny,
+                      textAlign: ios ? "right" : "auto",
+                    },
                   ]}
                 >
                   {"نوشته از:" + " " + "کامران ایزدی"}
@@ -66,7 +72,11 @@ export const Single = ({ blog }) => {
                 <Text
                   style={[
                     tw("text-gray-100 mt-2"),
-                    { fontFamily: "bold", fontSize: fontSize.sm },
+                    {
+                      fontFamily: "bold",
+                      fontSize: fontSize.sm,
+                      textAlign: ios ? "right" : "auto",
+                    },
                   ]}
                 >
                   {"سردبیر بخش وبلاگ دانوین"}
@@ -101,6 +111,7 @@ export const Single = ({ blog }) => {
               fontFamily: "bold",
               fontSize: fontSize.xl,
               color: Colors.theme1[colorScheme].gray20,
+              textAlign: ios ? "right" : "auto",
             }}
           >
             {blog?.title}
@@ -112,6 +123,7 @@ export const Single = ({ blog }) => {
               color: Colors.theme1[colorScheme].gray2077,
               lineHeight: 25,
               marginTop: 10,
+              textAlign: ios ? "right" : "auto",
             }}
           >
             هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دست‌ اندازی می‌کند پس

src/screens/Blogs/layouts/Target.js

@@ -49,7 +49,7 @@ const Target = ({ blogs }) => {
             {
               fontFamily: "bold",
               fontSize: fontSize.xl,
-              textAlign: ios ? "right" : "",
+              textAlign: ios ? "right" : "auto",
             },
           ]}
         >
@@ -139,7 +139,7 @@ const Target = ({ blogs }) => {
               {
                 fontFamily: "bold",
                 fontSize: fontSize.lg,
-                textAlign: ios ? "right" : "",
+                textAlign: ios ? "right" : "auto",
               },
             ]}
           >

src/screens/Home/components/Blogs.js

@@ -7,7 +7,8 @@ import {
   TouchableOpacity,
   FlatList,
   Pressable,
-  Appearance
+  Appearance,
+  Platform
 } from "react-native";
 import { connect } from "react-redux";
 import Svg, { G, Path } from "react-native-svg";
@@ -24,6 +25,7 @@ import fontSize from "../../../constants/fontSize";
 import userImage from "../assets/user.png";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 function Blogs({ blogs }) {
   const colorScheme = Appearance.getColorScheme();
@@ -64,6 +66,7 @@ function Blogs({ blogs }) {
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "bold",
                 fontSize: fontSize.tiny,
+                textAlign: ios ? "right" : "auto",
               },
             ]}
           >

src/screens/Home/components/Videos.js

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   FlatList,
   Appearance,
+  Platform
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import tw from "tailwind-rn";
@@ -18,6 +19,8 @@ import Header from "../components/Header";
 import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
+const ios = Platform.OS === "ios";
+
 function Videos({ videos, grades }) {
   const colorScheme = Appearance.getColorScheme();
   const Video = ({ video }) => {
@@ -44,6 +47,7 @@ function Videos({ videos, grades }) {
               color: Colors.theme1[colorScheme].gray20,
               fontFamily: "bold",
               fontSize: fontSize.base,
+              textAlign: ios ? "right" : "auto",
             },
           ]}
         >
@@ -54,8 +58,9 @@ function Videos({ videos, grades }) {
             tw("mt-1 pr-1"),
             {
               color: Colors.theme1[colorScheme].gray20,
-              fontFamily: "light",
+              fontFamily: "regular",
               fontSize: fontSize.tiny,
+              textAlign: ios ? "right" : "auto",
             },
           ]}
         >

src/screens/Home/index.js

@@ -11,8 +11,9 @@ import {
   StatusBar,
   LayoutAnimation,
 } from "react-native";
+
+//components
 import Navbar from "../../components/Navbar";
-import tw from "tailwind-rn";
 import Scroll from "./components/Scroll";
 import MyBooks from "./components/MyBooks";
 import Videos from "./components/Videos";
@@ -20,6 +21,9 @@ import Blogs from "./components/Blogs";
 import Drawer from "../../components/Drawer";
 import Header from "./components/Header";
 
+//style
+import tw from "tailwind-rn";
+
 // Within your render function
 const Home = ({
   blogs,
@@ -61,10 +65,11 @@ const Home = ({
           back: false,
         }}
       />
+
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={[styles.container, tw("flex")]}
+        style={[styles.container]}
       >
          {userProduct?.length > 0 && <MyBooks books={userProducts} />}
         <View style={tw("px-4 w-full")}>
@@ -72,7 +77,7 @@ const Home = ({
         </View>
          {books?.length > 0 && <Scroll books={books} />}
          {books?.length > 0 && <Videos videos={books} />}
-        {blogs?.length > 0 && <Blogs blogs={blogs} />}
+        {/* {blogs?.length > 0 && <Blogs blogs={blogs} />}   */}
       </ScrollView>
     </SafeAreaView>
   );
@@ -81,10 +86,13 @@ const Home = ({
 // Later on in your styles..
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 20,
+    paddingBottom: 100,
+    // alignItems: "",
   },
   container: {
+    width: Dimensions.get("window").width,
     backgroundColor: "white",
+    flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 0,
   },

src/screens/Login/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import {connect} from 'react-redux';
+import { connect } from "react-redux";
 
 import {
   View,
@@ -9,18 +9,20 @@ import {
   Dimensions,
   TouchableHighlight,
   Appearance,
-  Platform
+  Platform,
+  TouchableWithoutFeedback,
+  KeyboardAvoidingView,
 } from "react-native";
 import Logo from "./assets/logo.png";
 import CustomTextInput from "../../components/CustomTextInput";
-import onInput from '../../utils/onInput';
+import onInput from "../../utils/onInput";
 import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
 import tw from "tailwind-rn";
-import {user} from '../../redux/actions';
+import { user } from "../../redux/actions";
 import Colors from "../../constants/Colors";
 import fontSize from "../../constants/fontSize";
 
-const ios = Platform.OS === 'ios';
+const ios = Platform.OS === "ios";
 
 const { width } = Dimensions.get("window");
 
@@ -34,7 +36,7 @@ function Login(props) {
   };
 
   const checkPhoneNumber = () => {
-    return phone.split("").length === 11 && phone.slice(0, 2) === '09';
+    return phone.split("").length === 11 && phone.slice(0, 2) === "09";
   };
 
   const submit = async () => {
@@ -51,11 +53,13 @@ function Login(props) {
   };
 
   return (
-    <View
+    <KeyboardAvoidingView
+      behavior={ios ? "padding" : "height"}
       style={[
         tw("flex flex-col flex-1 justify-center items-center bg-white px-4"),
       ]}
     >
+      {/* <TouchableWithoutFeedback> */}
         <Image
           source={Logo}
           style={{
@@ -121,24 +125,22 @@ function Login(props) {
               style={{
                 color: "white",
                 fontSize: fontSize.xl,
-              fontWeight: "bold"
+                fontWeight: "bold",
               }}
             >
               {"ادامه"}
             </Text>
           )}
         </TouchableHighlight>
-    </View>
+      {/* </TouchableWithoutFeedback> */}
+    </KeyboardAvoidingView>
   );
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state) => ({});
-
-})
 
 const mapDispatchToProps = {
-  sendPhoneNumber : user.otp
+  sendPhoneNumber: user.otp,
-}
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Login);
-

src/screens/Products/components/Main.js

@@ -5,6 +5,7 @@ import {
   Image,
   Dimensions,
   Appearance,
+  Platform,
 } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
@@ -17,6 +18,7 @@ import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
 const width = Dimensions.get("window").width;
+const ios = Platform.OS === "ios";
 
 const Main = ({ books, filterOptions, grades }) => {
   const colorScheme = Appearance.getColorScheme();
@@ -90,15 +92,35 @@ const Main = ({ books, filterOptions, grades }) => {
             <Text
               style={[
                 tw("mb-1"),
-                { fontFamily: "bold", fontSize: fontSize.xl2, color : Colors.theme1[colorScheme].gray20 },
+                {
+                  fontFamily: "bold",
+                  fontSize: fontSize.lg,
+                  color: Colors.theme1[colorScheme].gray20,
+                  textAlign: ios ? "right" : "auto",
+                },
               ]}
             >
-              {'دوره ویدئویی' + ' ' + product?.name}
+              {"دوره ویدئویی" + " " + product?.name}
             </Text>
-            <Text style={[tw("mb-4"), { fontSize: fontSize.tiny, fontFamily : 'regular', color : Colors.theme1[colorScheme].greenBA }]}>
+            <Text
+              style={[
+                tw("mb-4"),
+                {
+                  fontSize: fontSize.tiny,
+                  fontFamily: "regular",
+                  color: Colors.theme1[colorScheme].greenBA,
+                  textAlign: ios ? "right" : "auto",
+                },
+              ]}
+            >
               {"پایه" + " " + grades[product?.gradeId]}
             </Text>
-            <Text style={[tw("w-full flex flex-row text-left"), {fontSize : fontSize.xl, fontFamily : 'bold'}]}>
+            <Text
+              style={[
+                tw("w-full flex flex-row text-left"),
+                { fontSize: fontSize.xl, fontFamily: "bold" },
+              ]}
+            >
               {separate(product?.product[2]?.price) + " " + "تومان"}
             </Text>
           </Pressable>
@@ -120,7 +142,10 @@ const Main = ({ books, filterOptions, grades }) => {
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
                 onPress={() =>
-                  navigation.navigate("Product", { id: product?.id, type: "book" })
+                  navigation.navigate("Product", {
+                    id: product?.id,
+                    type: "book",
+                  })
                 }
               >
                 <View style={tw("w-full flex")}>
@@ -135,11 +160,12 @@ const Main = ({ books, filterOptions, grades }) => {
                   />
                   <Text
                     style={{
-                      fontSize: fontSize.lg,
+                      fontSize: fontSize.base,
                       marginTop: 5,
                       color: "#05335F",
                       fontFamily: "bold",
                       width: "100%",
+                      textAlign: ios ? "right" : "auto",
                     }}
                   >
                     {"کتاب دیجیتال" + " " + product?.name}
@@ -151,6 +177,7 @@ const Main = ({ books, filterOptions, grades }) => {
                       marginTop: 5,
                       fontFamily: "regular",
                       width: "100%",
+                      textAlign: ios ? "right" : "auto",
                     }}
                   >
                     {"پایه" + " " + grades[product?.gradeId]}
@@ -176,7 +203,7 @@ const Main = ({ books, filterOptions, grades }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1[colorScheme].grayCC,
+                      color: Colors.theme1[colorScheme].gray2077,
                       fontFamily: "regular",
                     }}
                   >
@@ -200,7 +227,10 @@ const Main = ({ books, filterOptions, grades }) => {
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
                 onPress={() =>
-                  navigation.navigate("Product", { id: product?.id, type: "book" })
+                  navigation.navigate("Product", {
+                    id: product?.id,
+                    type: "book",
+                  })
                 }
               >
                 <View style={tw("w-full flex")}>
@@ -215,11 +245,12 @@ const Main = ({ books, filterOptions, grades }) => {
                   />
                   <Text
                     style={{
-                      fontSize: fontSize.lg,
+                      fontSize: fontSize.base,
                       marginTop: 5,
                       color: "#05335F",
                       fontFamily: "bold",
                       width: "100%",
+                      textAlign: ios ? "right" : "auto",
                     }}
                   >
                     {"کتاب فیزیکی" + " " + product?.name}
@@ -231,6 +262,7 @@ const Main = ({ books, filterOptions, grades }) => {
                       marginTop: 5,
                       fontFamily: "regular",
                       width: "100%",
+                      textAlign: ios ? "right" : "auto",
                     }}
                   >
                     {"پایه" + " " + grades[product?.gradeId]}
@@ -256,7 +288,7 @@ const Main = ({ books, filterOptions, grades }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1[colorScheme].grayCC,
+                      color: Colors.theme1[colorScheme].gray2077,
                       fontFamily: "regular",
                     }}
                   >
@@ -271,9 +303,11 @@ const Main = ({ books, filterOptions, grades }) => {
 
   return (
     <View
-      style={[tw(
+      style={[
+        tw(
           "flex w-full px-4 flex-row flex-wrap justify-between bg-white pb-20"
-      )]}
+        ),
+      ]}
     >
       {filterOptions?.productType === "دوره ویدئویی" && Items(2)}
       {filterOptions?.productType === "کتاب دیجیتال" && Items(0)}

src/screens/VideoDisplay/index.js

@@ -9,6 +9,7 @@ import {
   LayoutAnimation,
   Appearance,
   Text,
+  Platform,
 } from "react-native";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
@@ -26,6 +27,7 @@ import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 function VideoDisplay({ route }) {
   const colorScheme = Appearance.getColorScheme();
@@ -53,7 +55,7 @@ function VideoDisplay({ route }) {
   return (
     <SafeAreaView
       style={{
-        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        paddingTop: !ios ? StatusBar.currentHeight : 0,
         position: "relative",
       }}
     >
@@ -88,7 +90,12 @@ function VideoDisplay({ route }) {
             onPlaybackStatusUpdate={(status) => setStatus(() => status)}
           />
           <Text
-            style={{ fontSize: fontSize.xl, fontFamily: "bold", marginTop: 8 }}
+            style={{
+              fontSize: fontSize.xl,
+              fontFamily: "bold",
+              marginTop: 8,
+              textAlign: ios ? "right" : "auto",
+            }}
           >
             {route.params.unit?.name}
           </Text>