reza changed home

3 years ago · 5e8a976514
parent 6450a12f9b
commit 5e8a976514
21 changed files with 465 additions and 481 deletions
--- a/src/screens/Home/assets/arrow.png
+++ b/src/screens/Home/assets/arrow.png
--- a/src/screens/Home/assets/food.png
+++ b/src/screens/Home/assets/food.png
--- a/src/screens/Home/assets/message.png
+++ b/src/screens/Home/assets/message.png
--- a/src/screens/Home/assets/olum1.png
+++ b/src/screens/Home/assets/olum1.png
--- a/src/screens/Home/assets/olum2.png
+++ b/src/screens/Home/assets/olum2.png
--- a/src/screens/Home/assets/shoe.png
+++ b/src/screens/Home/assets/shoe.png
--- a/src/screens/Home/assets/user.png
+++ b/src/screens/Home/assets/user.png
--- a/src/screens/Home/assets/zist11.png
+++ b/src/screens/Home/assets/zist11.png
--- a/src/screens/Home/components/2d.js
+++ b/src/screens/Home/components/2d.js
@ -1,23 +0,0 @@
-import React from "react";
-import { View, StyleSheet, Dimensions } from "react-native";
-import Identifier from "./Identifier";
-
-function component2D({ list, flexDirection, navigation }) {
-  return (
-    <View style={[styles.container, { flexDirection: flexDirection }]}>
-      {list.map((item, i) => (
-        <Identifier navigation={navigation} {...item} key={i} />
-      ))}
-    </View>
-  );
-}
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
-  container: {
-    // width,
-    borderRadius: 10,
-    flex: 1
-  }
-});
-export default component2D;
--- a/src/screens/Home/components/3d.js
+++ b/src/screens/Home/components/3d.js
@ -1,24 +0,0 @@
-import React from "react";
-import { View, StyleSheet, Dimensions } from "react-native";
-import Identifier from "./Identifier";
-
-function component3D({ list, navigation }) {
-  return (
-    <View style={styles.container}>
-      {list.map((item, i) => (
-        <Identifier navigation={navigation} {...item} key={i} />
-      ))}
-    </View>
-  );
-}
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
-  container: {
-    // width,
-    borderRadius: 10,
-    flex: 1,
-    flexDirection: "row-reverse"
-  }
-});
-export default component3D;
--- a/src/screens/Home/components/Blogs.js
+++ b/src/screens/Home/components/Blogs.js
@ -0,0 +1,125 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import food from '../assets/food.png';
+import arrowIcon from '../assets/arrow.png';
+import userImage from '../assets/user.png';
+import message from '../assets/message.png';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function Shop({blogs}) {
+  return (
+    <View
+      style={[
+        tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
+        {
+          direction: 'rtl',
+        },
+      ]}>
+      <View style={[tw.style('flex flex-row justify-between w-full')]}>
+        <Text
+          style={[
+            tw.style('text-blue-500 mb-4 font-semibold'),
+            {fontSize: width / 18, color: '#196EC0'},
+          ]}>
+          فروشگاه
+        </Text>
+        <Image source={arrowIcon} style={[{width: 30, height: 30}]} />
+      </View>
+
+      <ScrollView
+        horizontal={true}
+        style={[tw.style('')]}
+        showsHorizontalScrollIndicator={false}>
+        <View
+          style={[
+            tw.style('flex flex-col flex-wrap'),
+            {height: (height / 4) * 1.52},
+          ]}>
+          {blogs.map((blog, index) => (
+            <View style={[tw.style('items-start m-1 relative')]} key={index}>
+              <Image
+                style={[
+                  {
+                    width: width / 1.5,
+                    height: height / 5,
+                  },
+                  tw.style('rounded-md'),
+                ]}
+                source={blog.imageUrl}
+              />
+              <View
+                style={[
+                  tw.style(
+                    'flex flex-col rounded-md bg-white absolute bottom-0 shadow-md p-2',
+                  ),
+                  {width: '90%', left: '5%', transform: [{translateY: 32}]},
+                ]}>
+                <Text
+                  style={[
+                    tw.style('text-blue-500 mb-4 text-left font-semibold w-full'),
+                    {fontSize: width / 27, color: '#196EC0'},
+                  ]}>
+                  {blog.name}
+                </Text>
+                <View style={[tw.style('flex flex-row justify-between')]}>
+                  <View style={[tw.style('flex flex-row items-center')]}>
+                    <Image source={userImage} style={[tw.style('rounded-full'), {width : 25, height : 25}]} />
+                    <Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'اکبر یوسفی'}</Text>
+                  </View>
+                  <View style={[tw.style('flex flex-row items-center')]}>
+                    <Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'زمان مطالعه 30 دقیقه'}</Text>
+                    <Image source={message} style={[tw.style(''), {width : 25, height : 25}]} />
+                  </View>
+                </View>
+                
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+Shop.defaultProps = {
+  blogs: [
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 12,
+      progress: 90,
+    },
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+      imageUrl: food,
+      grade: 12,
+      progress: 90,
+    },
+  ],
+};
--- a/src/screens/Home/components/Identifier.js
+++ b/src/screens/Home/components/Identifier.js
@ -1,38 +0,0 @@
-import React from "react";
-import Carousel from "./carousel";
-import Component2D from "./2d";
-import Component3D from "./3d";
-import FlexAround from "./flexAround";
-import BackgroundTile from "./backgroundTile";
-import Shop from "./shop.js";
-
-const Identifier = (item) => {
-  let component;
-  switch (item.name) {
-    case "carousel":
-      component = <Carousel navigation={item.navigation} list={item.list} />;
-      break;
-    case "2d":
-      component = (
-        <Component2D navigation={item.navigation} list={item.items} flexDirection={item.flexDirection} />
-      );
-      break;
-    case "3d":
-      component = <Component3D navigation={item.navigation} list={item.items} />;
-      break;
-    case "flex-around":
-      component = <FlexAround navigation={item.navigation} item={item} />;
-      break;
-    case "background-tile":
-      component = <BackgroundTile navigation={item.navigation} item={item} />;
-      break;
-    case "shop":
-      component = <Shop navigation={item.navigation} item={item} />;
-      break;
-    default:
-      component = null;
-  }
-  return <>{component}</>;
-};
-
-export default Identifier;
--- a/src/screens/Home/components/MyBooks.js
+++ b/src/screens/Home/components/MyBooks.js
@ -0,0 +1,110 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import olum2Image from '../assets/olum2.png';
+import olum1Image from '../assets/olum1.png';
+import zist11Image from '../assets/zist11.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function MyBooks({myBooks}) {
+  return (
+    <View
+      style={[
+        tw.style(
+          'flex flex-col shadow-sm rounded-md py-4 px-2 border items-start',
+        ),
+        {
+          backgroundColor: '#E9F0FF',
+          borderColor: '#D2E0FD',
+          direction: 'rtl',
+        },
+      ]}>
+      <Text
+        style={[
+          tw.style('text-blue-500 mb-4 font-semibold'),
+          {fontSize: width / 18, color : '#196EC0'},
+        ]}>
+        کتاب من
+      </Text>
+      <ScrollView
+        horizontal={true}
+        style={[tw.style('')]}
+        showsHorizontalScrollIndicator={false}>
+        
+        {myBooks.map((book, index) => (
+          <View style={[tw.style('flex flex-col mr-4 items-start')]} key={index}>
+            <Image
+              style={
+                [{width: width / 3, height: height / 4}, tw.style('rounded-md')]
+              }
+              source={book.imageUrl}
+            />
+            <Text
+              style={[
+                {marginVertical: 10, color: '#05335F', fontSize: width / 27},
+                tw.style('font-semibold'),
+              ]}>
+              {book.name}
+            </Text>
+            <Text style={{color: '#196EC0', fontSize: width / 30}}>
+              {book.grade}
+            </Text>
+            <View
+              style={[
+                tw.style('rounded-md mt-4'),
+                {height: 6, width: '100%', backgroundColor: '#D3E9FF'},
+              ]}>
+              <View
+                style={[
+                  tw.style('h-full rounded-md'),
+                  {width: book.progress + '%', backgroundColor : "#2B8DEB"},
+                ]}></View>
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+MyBooks.defaultProps = {
+  myBooks: [
+    {
+      name: 'علوم تجربی',
+      imageUrl: zist11Image,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: zist11Image,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: zist11Image,
+      grade: 12,
+      progress: 90,
+    },
+    {
+      name: 'علوم تجربی',
+      imageUrl: zist11Image,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: zist11Image,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: zist11Image,
+      grade: 12,
+      progress: 90,
+    },
+  ],
+};
--- a/src/screens/Home/components/MyVideos.js
+++ b/src/screens/Home/components/MyVideos.js
@ -0,0 +1,113 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import arrowIcon from '../assets/arrow.png';
+import olum2Image from '../assets/olum2.png';
+import olum1Image from '../assets/olum1.png';
+import shoe from '../assets/shoe.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function MyBooks({myBooks}) {
+  return (
+    <View
+      style={[
+        tw.style(
+          'flex flex-col rounded-md pt-7 px-2 items-start',
+        ),
+        {
+          direction: 'rtl',
+        },
+      ]}>
+
+      <View style={[tw.style('flex flex-row justify-between w-full')]}>
+        <Text
+          style={[
+            tw.style('text-blue-500 mb-4 font-semibold'),
+            {fontSize: width / 20, color: '#196EC0'},
+          ]}>
+          دوره‌های ویدئویی شما
+        </Text>
+        <Image source={arrowIcon} style={[{width : 30, height : 30}]} />
+      </View>
+      <ScrollView
+        horizontal={true}
+        style={[tw.style('')]}
+        showsHorizontalScrollIndicator={false}>
+        
+        {myBooks.map((book, index) => (
+          <View style={[tw.style('flex flex-col mr-2 items-start')]} key={index}>
+            <Image
+              style={
+                [{width: width / 1.7, height: height / 6}, tw.style('rounded-md')]
+              }
+              source={book.imageUrl}
+            />
+            <Text
+              style={[
+                {marginVertical: 10, color: '#05335F', fontSize: width / 27},
+                tw.style('font-semibold'),
+              ]}>
+              {book.name}
+            </Text>
+            <Text style={{color: '#196EC0', fontSize: width / 30}}>
+              {book.grade}
+            </Text>
+            <View
+              style={[
+                tw.style('rounded-md mt-4'),
+                {height: 6, width: '100%', backgroundColor: '#D3E9FF'},
+              ]}>
+              <View
+                style={[
+                  tw.style('h-full rounded-md'),
+                  {width: book.progress + '%', backgroundColor : "#2B8DEB"},
+                ]}></View>
+            </View>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+MyBooks.defaultProps = {
+  myBooks: [
+    {
+      name: 'علوم تجربی',
+      imageUrl: shoe,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: shoe,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: shoe,
+      grade: 12,
+      progress: 90,
+    },
+    {
+      name: 'علوم تجربی',
+      imageUrl: shoe,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: shoe,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: shoe,
+      grade: 12,
+      progress: 90,
+    },
+  ],
+};
--- a/src/screens/Home/components/backgroundTile.js
+++ b/src/screens/Home/components/backgroundTile.js
@ -1,52 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, ImageBackground } from "react-native";
-
-const backgroundTile = ({ item }) => {
-  return (
-    <ImageBackground
-      source={{ uri: item.imageUrl }}
-      resizeMode="cover"
-      style={[styles.container, { flex: item.flex }]}
-    >
-      <View
-        style={[
-          styles.cover,
-          { backgroundColor: item.backgroundColor, alignItems: item.alignItems }
-        ]}
-      >
-        <Text style={styles.title}>{item.title}</Text>
-        <Text style={styles.subTitle}>{item.subTitle}</Text>
-      </View>
-    </ImageBackground>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 5,
-    borderRadius: 10,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cover: {
-    minHeight: "100%",
-    minWidth: "100%",
-    flexDirection: "column",
-    justifyContent: "center",
-    padding: 10,
-    borderRadius: 10
-  },
-  title: {
-    fontSize: 21,
-    fontWeight: '600',
-    marginBottom: 5,
-    color: "white"
-  },
-  subTitle: {
-    fontSize: 14,
-    color: "white"
-  }
-});
-
-export default backgroundTile;
--- a/src/screens/Home/components/carousel.js
+++ b/src/screens/Home/components/carousel.js
@ -1,51 +0,0 @@
-import React from "react";
-import { ImageBackground, Dimensions, StyleSheet, View } from "react-native";
-import { SwiperFlatList } from "react-native-swiper-flatlist";
-
-const Carousel = ({ list }) => {
-  return (
-    <View style={styles.container}>
-      <SwiperFlatList
-        autoplay
-        autoplayDelay={2}
-        autoplayLoop
-        index={2}
-        // showPagination
-        data={list}
-        renderItem={({ item }) => (
-          <View style={[styles.child]}>
-            <ImageBackground
-              source={{ uri: item.imageUrl }}
-              resizeMode="cover"
-              style={styles.image}
-            ></ImageBackground>
-          </View>
-        )}
-      />
-    </View>
-  );
-};
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
-  container: {
-    minHeight: 300,
-    borderRadius: 10,
-    margin: 5,
-    overflow: 'hidden'
-  },
-  child: {
-    width,
-    justifyContent: "center",
-    borderRadius: 10,
-    alignItems: "center"
-  },
-  image: {
-    width,
-    flex: 1,
-    justifyContent: "center",
-    borderRadius: 10,
-  }
-});
-
-export default Carousel;
--- a/src/screens/Home/components/flexAround.js
+++ b/src/screens/Home/components/flexAround.js
@ -1,52 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, Image } from "react-native";
-
-const FlexAround = ({ item }) => {
-  return (
-    <View
-      style={[
-        styles.container,
-        { flex: item.flex, backgroundColor: item.backgroundColor }
-      ]}
-    >
-      <View style={[styles.column]}>
-        <Text style={styles.title}>{item.title}</Text>
-        <Text style={styles.subTitle}>{item.subTitle}</Text>
-      </View>
-      <Image source={{ uri: item.imageUrl }} style={styles.image} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
-    flex: 1,
-    paddingVertical: 30,
-    flexDirection: "row-reverse",
-    alignItems: "center",
-    justifyContent: "space-around",
-    textAlign: "right",
-    margin: 5
-  },
-  column: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  image: {
-    width: 60,
-    height: 60
-  },
-  title: {
-    fontSize: 21,
-    fontWeight: '600',
-    marginBottom: 5,
-    color: "white"
-  },
-  subTitle: {
-    fontSize: 14,
-    color: "white"
-  }
-});
-
-export default FlexAround;
--- a/src/screens/Home/components/shop.js
+++ b/src/screens/Home/components/shop.js
@ -1,55 +1,113 @@
-import React from "react";
-import {StyleSheet, View, Text, Image, TouchableOpacity} from "react-native";
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import zist11Image from '../assets/zist11.png';
+import arrowIcon from '../assets/arrow.png';
+import tw from 'tailwind-react-native-classnames';

-const Shop = ({ item, navigation }) => {
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function Shop({books}) {
  return (
-    <TouchableOpacity
-      onPress={() => navigation.navigate('Products')}
+    <View
      style={[
-        styles.container,
-        { flex: item.flex, backgroundColor: item.backgroundColor }
-      ]}
-    >
-      <Text style={styles.title}>{item.title}</Text>
-
-      <View style={[styles.list]}>
-        {item.items.map((item1) => (
-          <View>
-            <Image source={{ uri: item1.imageUrl }} style={styles.product} />
-          </View>
-        ))}
+        tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
+        {
+          direction: 'rtl',
+        },
+      ]}>
+      <View style={[tw.style('flex flex-row justify-between w-full')]}>
+        <Text
+          style={[
+            tw.style('text-blue-500 mb-4 font-semibold'),
+            {fontSize: width / 18, color: '#196EC0'},
+          ]}>
+          فروشگاه
+        </Text>
+        <Image source={arrowIcon} style={[{width : 30, height : 30}]} />
      </View>
-    </TouchableOpacity>
-  );
-};

-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
-    flex: 1,
-    paddingVertical: 5,
-    paddingHorizontal: 10,
-    flexDirection: "column",
-    textAlign: "right",
-    margin: 5
-  },
-  list: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-around",
-    marginTop: 10
-  },
-  product: {
-    width: 50,
-    height: 65,
-    borderRadius: 10
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginBottom: 5,
-    color: "white"
-  }
-});
+      <ScrollView
+        horizontal={true}
+        style={[tw.style('')]}
+        showsHorizontalScrollIndicator={false}>
+        <View
+          style={[
+            tw.style('flex flex-col flex-wrap'),
+            {height: (height / 4) * 1.22},
+          ]}>
+          {books.map((book, index) => (
+            <View
+              style={[
+                tw.style('items-start m-0.5'),
+                {
+                  height:
+                    Number(index) === 0
+                      ? (height / 4) * 1.2
+                      : (height / 4) * 0.6 - 2,
+                },
+              ]}
+              key={index}>
+              <Image
+                style={[
+                  {
+                    width:
+                      Number(index) === 0
+                        ? (width / 3) * 1.2
+                        : (width / 3) * 0.7,
+                    height:
+                      Number(index) === 0
+                        ? (height / 4) * 1.2
+                        : (height / 4) * 0.6 - 2,
+                  },
+                  tw.style('rounded-md'),
+                ]}
+                source={book.imageUrl}
+              />
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

-export default Shop;
+Shop.defaultProps = {
+  books: [
+    {
+      name: 'علوم تجربی',
+      imageUrl: zist11Image,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: zist11Image,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: zist11Image,
+      grade: 12,
+      progress: 90,
+    },
+    {
+      name: 'علوم تجربی',
+      imageUrl: zist11Image,
+      grade: 3,
+      progress: 70,
+    },
+    {
+      name: 'زیست شناسی',
+      imageUrl: zist11Image,
+      grade: 4,
+      progress: 60,
+    },
+    {
+      name: 'علوم اجتماعی',
+      imageUrl: zist11Image,
+      grade: 12,
+      progress: 90,
+    },
+  ],
+};
--- a/src/screens/Home/data.js
+++ b/src/screens/Home/data.js
@ -1,140 +0,0 @@
-const data = [
-    {
-      name: "carousel",
-      list: [
-        {
-          id: 0,
-          imageUrl: "https://dnvn.ir/api/v1/file/5299"
-        },
-        {
-          id: 1,
-          imageUrl: "https://dnvn.ir/api/v1/file/6581"
-        },
-        {
-          id: 2,
-          imageUrl: "https://dnvn.ir/api/v1/file/6586"
-        }
-      ]
-    },
-    {
-      name: "2d",
-      flexDirection: "row-reverse",
-      items: [
-        {
-          name: "flex-around",
-          title: "qr خوان",
-          subTitle: "در صفحات کتاب هوشمند",
-          imageUrl: "https://dnvn.ir/api/v1/file/1855",
-          backgroundColor: "blue",
-          flex: 1
-        },
-        {
-          name: "flex-around",
-          title: "واقعیت افزوده",
-          subTitle: "فعال شده و دیجیتال",
-          imageUrl: "https://dnvn.ir/api/v1/file/1851",
-          backgroundColor: "green",
-          flex: 1
-        }
-      ]
-    },
-    {
-      name: "2d",
-      flexDirection: "row-reverse",
-      items: [
-        {
-          name: "flex-around",
-          title: "qr خوان",
-          subTitle: "در صفحات کتاب هوشمند",
-          imageUrl: "https://dnvn.ir/api/v1/file/1855",
-          backgroundColor: "blue",
-          flex: 1.6
-        },
-        {
-          name: "background-tile",
-          title: "کتاب های من",
-          subTitle: "فعال شده و دیجیتال",
-          imageUrl: "https://dnvn.ir/api/v1/file/1860",
-          backgroundColor: "#ff00ff77",
-          flex: 1,
-          alignItems: "flex-end"
-        }
-      ]
-    },
-    {
-      name: "2d",
-      flexDirection: "row-reverse",
-      items: [
-        {
-          name: "background-tile",
-          title: "بلاگ",
-          subTitle: "",
-          imageUrl: "https://dnvn.ir/api/v1/file/1852",
-          backgroundColor: "#00ff0066",
-          flex: 1,
-          alignItems: "center"
-        },
-        {
-          name: "shop",
-          title: "فروشگاه",
-          backgroundColor: "#8888ff",
-          flex: 1.6,
-          items: [
-            {
-              id: 0,
-              imageUrl: "https://dnvn.ir/api/v1/file/1857"
-            },
-            {
-              id: 1,
-              imageUrl: "https://dnvn.ir/api/v1/file/1858"
-            },
-            {
-              id: 2,
-              imageUrl: "https://dnvn.ir/api/v1/file/1859"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      name: "3d",
-      items: [
-        {
-          name: "2d",
-          flexDirection: "column",
-          items: [
-            {
-              name: "background-tile",
-              title: "پیگیری سفارشات",
-              subTitle: "",
-              imageUrl: "",
-              backgroundColor: "#ff5555",
-              flex: 1,
-              alignItems: "center"
-            },
-            {
-              name: "background-tile",
-              title: "پشتیبانی",
-              subTitle: "",
-              imageUrl: "",
-              backgroundColor: "#ffaa00",
-              flex: 1,
-              alignItems: "center"
-            }
-          ]
-        },
-        {
-          name: "background-tile",
-          title: "بلاگ",
-          subTitle: "",
-          imageUrl: "https://dnvn.ir/api/v1/file/1853",
-          backgroundColor: "#00ffff66",
-          flex: 1,
-          alignItems: "center"
-        }
-      ]
-    }
-  ];
-  
-  export default data;
-  
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@ -1,15 +1,18 @@
 import React from "react";
 import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
-import data from "./data";
-import Identifier from "./components/Identifier";
+import MyBooks from './components/MyBooks';
+import Shop from './components/Shop';
+import MyVideos from './components/MyVideos';
+import Blogs from './components/Blogs';

 // Within your render function
 function Home(props) {
  return (
    <ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}>
-      {data?.map((item, i) => (
-        <Identifier navigation={props.navigation} {...item} key={i} />
-      ))}
+      <MyBooks />
+      <Shop />
+      <MyVideos />
+      <Blogs />
    </ScrollView>
  );
 }
@ -23,7 +26,8 @@ const styles = StyleSheet.create({
    width: Dimensions.get("window").width,
    backgroundColor: "white",
    flexDirection: "column",
-    padding: 5,
+    paddingVertical : 5,
+    paddingHorizontal : 10
  }
 });

--- a/src/screens/Home/navbar.js
+++ b/src/screens/Home/navbar.js
@ -1,46 +0,0 @@
-import React from "react";
-
-import { Button, StyleSheet, Text, View, Dimensions } from "react-native";
-
-function App() {
-  return (
-    <View style={styles.navbar}>
-      <View style={[styles.flex, styles.row, styles.alignCenter]}>
-        <Text style={styles.head}>دانوین</Text>
-      </View>
-      <Button title="ورود" color="#6cbe44" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  navbar: {
-    position: "fixed",
-    display: "flex",
-    paddingHorizontal: 10,
-    flexDirection: "row-reverse",
-    left: 0,
-    top: 0,
-    width: Dimensions.get("window").width,
-    height: 60,
-    backgroundColor: "#ccc",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  head: {
-    fontWeight: "bold",
-    fontSize: 20,
-    marginRight: 10
-  },
-  flex: {
-    display: "flex"
-  },
-  row: {
-    flexDirection: "row-reverse"
-  },
-  alignCenter: {
-    alignItems: "center"
-  }
-});
-
-export default App;