reza checked bottom navigation in ios and android

master
Reza_ashrafi 3 years ago
parent dbd05f287a
commit d1f46bd12e
  1. 19
      navigation/index.js
  2. 38
      src/components/Search.js
  3. 4
      src/screens/Blogs/layouts/New.js
  4. 16
      src/screens/Blogs/layouts/Single.js
  5. 4
      src/screens/Blogs/layouts/Target.js
  6. 5
      src/screens/Home/components/Blogs.js
  7. 7
      src/screens/Home/components/Videos.js
  8. 28
      src/screens/Home/index.js
  9. 176
      src/screens/Login/index.js
  10. 60
      src/screens/Products/components/Main.js
  11. 11
      src/screens/VideoDisplay/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} />

@ -1,28 +1,22 @@
import React, {useState} from 'react';
import React, { useState } from "react";
import {
TextInput,
View,
Dimensions,
StyleSheet,
Pressable,
Appearance
} from 'react-native';
import tw from 'tailwind-rn';
import { AntDesign } from '@expo/vector-icons';
Appearance,
} from "react-native";
import tw from "tailwind-rn";
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 = ({
placeholder,
textAlign,
direction,
onChange,
value,
}) => {
const Search = ({ 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')]}
onChangeText={text => onChange(text)}
style={[styles.inputStyle, tw("rounded-md")]}
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',
textAlign: 'right',
};
direction: "rtl",
textAlign: "right",
};

@ -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,
}}
>

@ -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",
}}
>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دست اندازی میکند پس

@ -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",
},
]}
>

@ -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",
},
]}
>

@ -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",
},
]}
>

@ -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,
@ -33,7 +37,7 @@ const Home = ({
useEffect(() => {
getBlogs();
getBooks({vod : true});
getBooks({ vod: true });
getUserProducts();
}, []);
@ -41,7 +45,7 @@ const Home = ({
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return (
<SafeAreaView
style={{
@ -61,19 +65,20 @@ 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} />}
{userProduct?.length > 0 && <MyBooks books={userProducts} />}
<View style={tw("px-4 w-full")}>
<Header title={"فروشگاه"} route={"Products"} />
</View>
{books?.length > 0 && <Scroll books={books} />}
{books?.length > 0 && <Videos videos={books} />}
{blogs?.length > 0 && <Blogs blogs={blogs} />}
</ScrollView>
{books?.length > 0 && <Scroll books={books} />}
{books?.length > 0 && <Videos videos={books} />}
{/* {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,
},

@ -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 () => {
@ -45,100 +47,100 @@ function Login(props) {
showCancelButton: false,
});
}
props.sendPhoneNumber({cellphone : phone});
props.navigation.navigate("Otp", { phone : phone});
props.sendPhoneNumber({ cellphone: phone });
props.navigation.navigate("Otp", { phone: phone });
setLoading(false);
};
return (
<View
<KeyboardAvoidingView
behavior={ios ? "padding" : "height"}
style={[
tw("flex flex-col flex-1 justify-center items-center bg-white px-4"),
]}
>
<Image
source={Logo}
style={{
width: 55,
height: 80,
}}
/>
<Text
style={[
tw(`w-full mt-5 ${ios ? "text-right" : ""}`),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
color: Colors.theme1[colorScheme].black,
},
]}
>
{"سلام"}
</Text>
<Text
style={[
tw(`w-full mb-5 ${ios ? "text-right" : ""}`),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
color: Colors.theme1[colorScheme].black,
},
]}
>
{"خوش برگشتی!"}
</Text>
<View style={[tw("w-full rounded-md overflow-hidden relative"), {}]}>
<CustomTextInput
label="شماره موبایل"
textAlign="left"
name="phone"
maxLength={11}
value={phone}
onChange={onChangePhone}
autoFocus={true}
direction="ltr"
regex={onInput.phonenumber}
{/* <TouchableWithoutFeedback> */}
<Image
source={Logo}
style={{
width: 55,
height: 80,
}}
/>
</View>
<TouchableHighlight
disabled={loading}
style={[
tw("w-full py-2.5 rounded-md"),
{
backgroundColor: Colors.theme1[colorScheme].greenCF,
alignItems: "center",
justifyContent: "center",
marginTop: 15,
fontFamily: "light",
},
]}
onPress={() => submit()}
>
{loading ? (
<ActivityIndicator size={"small"} color={"white"} />
) : (
<Text
style={{
color: "white",
fontSize: fontSize.xl,
fontWeight: "bold"
}}
>
{"ادامه"}
</Text>
)}
</TouchableHighlight>
</View>
<Text
style={[
tw(`w-full mt-5 ${ios ? "text-right" : ""}`),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
color: Colors.theme1[colorScheme].black,
},
]}
>
{"سلام"}
</Text>
<Text
style={[
tw(`w-full mb-5 ${ios ? "text-right" : ""}`),
{
fontSize: fontSize.xl2,
fontFamily: "bold",
color: Colors.theme1[colorScheme].black,
},
]}
>
{"خوش برگشتی!"}
</Text>
<View style={[tw("w-full rounded-md overflow-hidden relative"), {}]}>
<CustomTextInput
label="شماره موبایل"
textAlign="left"
name="phone"
maxLength={11}
value={phone}
onChange={onChangePhone}
autoFocus={true}
direction="ltr"
regex={onInput.phonenumber}
/>
</View>
<TouchableHighlight
disabled={loading}
style={[
tw("w-full py-2.5 rounded-md"),
{
backgroundColor: Colors.theme1[colorScheme].greenCF,
alignItems: "center",
justifyContent: "center",
marginTop: 15,
fontFamily: "light",
},
]}
onPress={() => submit()}
>
{loading ? (
<ActivityIndicator size={"small"} color={"white"} />
) : (
<Text
style={{
color: "white",
fontSize: fontSize.xl,
fontWeight: "bold",
}}
>
{"ادامه"}
</Text>
)}
</TouchableHighlight>
{/* </TouchableWithoutFeedback> */}
</KeyboardAvoidingView>
);
}
const mapStateToProps = (state) => ({
})
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
sendPhoneNumber : user.otp
}
sendPhoneNumber: user.otp,
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);

@ -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(
"flex w-full px-4 flex-row flex-wrap justify-between bg-white pb-20"
)]}
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)}

@ -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>

Loading…
Cancel
Save