reza added orders

android/app/build.gradle

@@ -133,12 +133,12 @@ android {
 
     defaultConfig {
         applicationId "com.rndanovin"
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 21
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-        missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
-
+        missingDimensionStrategy 'react-native-camera', 'general' 
+        multiDexEnabled true
     }
     splits {
         abi {
@@ -192,6 +192,8 @@ android {
 }
 
 dependencies {
+    implementation 'androidx.multidex:multidex:2.0.1'
+
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/gradlew

@@ -1,5 +1,4 @@
 #!/usr/bin/env sh
-
 #
 # Copyright 2015 the original author or authors.
 #
@@ -93,14 +92,12 @@ if [ -n "$JAVA_HOME" ] ; then
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
     JAVACMD="java"
     which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
 fi

navigation.js

@@ -5,17 +5,18 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import Splash from './src/screens/Splash';
 import Home from './src/screens/Home';
 import Login from './src/screens/Login';
-import Otp from "./src/screens/Otp";
+import Otp from './src/screens/Otp';
 import Product from './src/screens/Product';
 import Products from './src/screens/Products';
 import ShoppingCart from './src/screens/ShoppingCart';
 import QR from './src/screens/QR/index';
 import {connect} from 'react-redux';
-import i18n from "./src/services/i18n";
-import {useTranslation} from "react-i18next";
-import Profile from "./src/screens/Profile";
-import Videos from "./src/screens/Videos";
-import Exams from "./src/screens/Exams";
+import i18n from './src/services/i18n';
+import {useTranslation} from 'react-i18next';
+import Profile from './src/screens/Profile';
+import Videos from './src/screens/Videos';
+import Exams from './src/screens/Exams';
+import OrderDetails from './src/screens/OrderDetails';
 
 const mapStateToProps = state => {
   return {
@@ -28,35 +29,53 @@ const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
 function BottomTab(props) {
-
   const {t} = useTranslation('translation', {keyPrefix: 'main'});
 
   return (
     <Tab.Navigator initialRouteName={'Home'}>
-			<Tab.Screen name={'Profile'} component={Profile} options={{
-				title: t('profile')
-			}} />
-			<Tab.Screen name={'Exams'} component={Exams} options={{
-				title: t('exams')
-			}} />
-			<Tab.Screen name={'Videos'} component={Videos} options={{
-				title: t('videos')
-			}} />
-			<Tab.Screen name={'Product'} component={Product} options={{
-				title: t('books')
-			}} />
-			<Tab.Screen name={'Home'} component={Home} options={{
-				title: t('home')
-			}} />
+      <Tab.Screen
+        name={'Profile'}
+        component={Profile}
+        options={{
+          title: t('profile'),
+        }}
+      />
+      <Tab.Screen
+        name={'Exams'}
+        component={Exams}
+        options={{
+          title: t('exams'),
+        }}
+      />
+      <Tab.Screen
+        name={'Videos'}
+        component={Videos}
+        options={{
+          title: t('videos'),
+        }}
+      />
+      <Tab.Screen
+        name={'OrderDetails'}
+        component={OrderDetails}
+        options={{
+          title: t('books'),
+        }}
+      />
+      <Tab.Screen
+        name={'Home'}
+        component={Home}
+        options={{
+          title: t('home'),
+        }}
+      />
     </Tab.Navigator>
-	)
+  );
 }
 
 function Navigator(props) {
-
   React.useEffect(() => {
-		i18n.changeLanguage(props.config.lan)
-	}, [props.config])
+    i18n.changeLanguage(props.config.lan);
+  }, [props.config]);
 
   return (
     <NavigationContainer>
@@ -76,7 +95,11 @@ function Navigator(props) {
           component={Otp}
           options={{headerShown: false}}
         />
-				<Stack.Screen name="Home" component={BottomTab} options={{headerShown: false}}/>
+        <Stack.Screen
+          name="Home"
+          component={BottomTab}
+          options={{headerShown: false}}
+        />
         <Stack.Screen
           name="Product"
           component={Product}
@@ -87,11 +110,7 @@ function Navigator(props) {
           component={Products}
           options={{headerShown: false}}
         />
-				<Stack.Screen
-					name="QR"
-					component={QR}
-					options={{headerShown: true}}
-				/>
+        <Stack.Screen name="QR" component={QR} options={{headerShown: true}} />
         <Stack.Screen
           name="سبد خرید"
           component={ShoppingCart}

src/screens/Home/components/Blogs.js

@@ -1,125 +0,0 @@
-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,
-    },
-  ],
-};

src/screens/Home/components/MyBooks.js

@@ -1,110 +0,0 @@
-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,
-    },
-  ],
-};

src/screens/Home/components/MyVideos.js

@@ -1,113 +0,0 @@
-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,
-    },
-  ],
-};

src/screens/Home/components/shop.js

@@ -1,113 +0,0 @@
-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 width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
-export default function Shop({books}) {
-  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.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>
-  );
-}
-
-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,
-    },
-  ],
-};

src/screens/Home/index.js

@@ -1,18 +1,15 @@
 import React from "react";
 import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
-import MyBooks from './components/MyBooks';
-import Shop from './components/Shop';
-import MyVideos from './components/MyVideos';
-import Blogs from './components/Blogs';
+import tw from 'tailwind-react-native-classnames';
+
 
 // Within your render function
 function Home(props) {
   return (
     <ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}>
-      <MyBooks />
-      <Shop />
-      <MyVideos />
-      <Blogs />
+      <View style={tw.style('w-full h-screen flex flex-col items-center justify-center')}>
+        
+      </View>
     </ScrollView>
   );
 }
@@ -27,7 +24,7 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical : 5,
-    paddingHorizontal : 10
+    paddingHorizontal : 5
   }
 });
 

src/screens/OrderDetails/components/Book.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import _ from 'lodash';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Book({book}) {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-row-reverse justify-between py-3'),
+        {borderBottomWidth: 1, borderColor: '#86A0B933'},
+      ]}>
+      <View style={tw.style('flex flex-row-reverse items-center flex-1')}>
+        <Image
+          source={book}
+          style={[
+            tw.style('rounded-md'),
+            {width: width / 5.5, height: height / 8},
+          ]}
+        />
+        <View style={tw.style('flex flex-col items-end mr-2')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 30, color: '#05335F'},
+            ]}>
+            علوم اجتماعی
+          </Text>
+          <Text
+            style={[
+              tw.style('font-medium mt-2'),
+              {fontSize: width / 36, color: '#707070'},
+            ]}>
+            پایه دوم
+          </Text>
+          <Text
+            style={[
+              tw.style('font-medium mt-2'),
+              {fontSize: width / 36, color: '#707070'},
+            ]}>
+            نسخه دیجیتال
+          </Text>
+        </View>
+      </View>
+      <View style={tw.style('flex flex-row-reverse items-center')}>
+        <Text
+          style={[
+            tw.style('font-medium py-1 px-2'),
+            {
+              color: '#132F52',
+              fontSize: width / 34,
+              backgroundColor: '#F1F1F1',
+            },
+          ]}>
+          1
+        </Text>
+        <Text
+          style={[
+            tw.style('font-medium mr-3'),
+            {color: '#132F52', fontSize: width / 34},
+          ]}>
+          126.000 تومان
+        </Text>
+      </View>
+    </View>
+  );
+}

src/screens/OrderDetails/index.js

@@ -0,0 +1,312 @@
+import React from 'react';
+import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
+import Book from './components/Book';
+import {connect} from 'react-redux';
+import tw from 'tailwind-react-native-classnames';
+import b1Image from './assets/b1.png';
+import _ from 'lodash';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+const colors = {
+  1: '#FFF700',
+  4: '#FF0000',
+  3: '#4CFF00',
+  2: '#196EC0',
+};
+
+const status = {
+  1: 'در حال پردازش',
+  4: 'درخواست رد شد',
+  3: 'تکمیل شد',
+  2: 'ارسال شده',
+};
+
+function OrderDetails({order}) {
+  return (
+    <ScrollView
+      contentContainerStyle={styles.contentContainerStyle}
+      style={styles.container}>
+      <View
+        style={[
+          tw.style(
+            'flex flex-row-reverse w-full justify-between items-center p-3',
+          ),
+          {backgroundColor: '#EEF7FF'},
+        ]}>
+        <Text
+          style={[
+            tw.style('font-medium'),
+            {fontSize: width / 32, color: '#20297B'},
+          ]}>
+          {_.join(['شماره سفارش:', order.number], ' ')}
+        </Text>
+        <View style={tw.style('flex flex-row-reverse items-center')}>
+          <Text
+            style={[
+              tw.style('font-light'),
+              {color: '#20297B', fontSize: width / 32},
+            ]}>
+            {status[order.status]}
+          </Text>
+          <View
+            style={[
+              tw.style('h-4 w-4 rounded-full mr-2'),
+              {backgroundColor: colors[order.status]},
+            ]}></View>
+        </View>
+      </View>
+      <View
+        style={[
+          tw.style('w-full flex flex-row-reverse py-4'),
+          {borderBottomWidth: 1, borderColor: '#86A0B933'},
+        ]}>
+        <Text
+          style={[
+            tw.style('font-medium'),
+            {fontSize: width / 32, color: '#05335F'},
+          ]}>
+          آدرس تحویل:
+        </Text>
+        <Text
+          style={[
+            tw.style('flex-1 font-light text-right mr-2'),
+            {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+          ]}>
+          {order.address}
+        </Text>
+      </View>
+      <View
+        style={[
+          tw.style('w-full flex flex-row-reverse justify-between py-4'),
+          {borderBottomWidth: 1, borderColor: '#86A0B933'},
+        ]}>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            مشخصات تحویل گیرنده:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
+            ]}>
+            {order.name}
+          </Text>
+        </View>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            شماره موبایل:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+            ]}>
+            {order.cellphone}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={[
+          tw.style('w-full rounded-md flex flex-col p-4 items-end mt-2'),
+          {backgroundColor: '#EEF6FF'},
+        ]}>
+        <Text
+          style={[
+            tw.style('font-medium'),
+            {fontSize: width / 32, color: '#05335F'},
+          ]}>
+          {_.join(['کد تحویل', order.receiveCode], ' ')}
+        </Text>
+        <Text
+          style={[
+            tw.style('font-light text-right mt-2'),
+            {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+          ]}>
+          این کد را پس از دریافت کالا، به مامور ارسال دانوین اعلام فرمایید
+        </Text>
+      </View>
+      <View style={tw.style('w-full flex flex-column items-end')}>
+        {order.items.map((item, index) => (
+          <Book book={item} key={index} />
+        ))}
+      </View>
+      <View
+        style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            مبلغ سبد خرید:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
+            ]}>
+            {_.join([order.shoppingCardPrice, 'تومان'], ' ')}
+          </Text>
+        </View>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            تخفیف:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+            ]}>
+            {_.join([order.discountPrice, 'تومان'], ' ')}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={[
+          tw.style('w-full flex flex-row-reverse justify-between py-4'),
+          {borderBottomWidth: 1, borderColor: '#86A0B933'},
+        ]}>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            هزینه ارسال کالا:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
+            ]}>
+            {_.join([order.sendPrice, 'تومان'], ' ')}
+          </Text>
+        </View>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            جمع هزینه پرداختی:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+            ]}>
+            {_.join([order.totalPrice, 'تومان'], ' ')}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={[
+          tw.style('w-full flex flex-row-reverse justify-between py-4'),
+          {borderBottomWidth: 1, borderColor: '#86A0B933'},
+        ]}>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            نحوه پرداخت:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
+            ]}>
+            {order.payMethod}
+          </Text>
+        </View>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            شماره تراکنش:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 17, color: '#05335F'},
+            ]}>
+            {order.transactionNumber}
+          </Text>
+        </View>
+      </View>
+      <View
+        style={[tw.style('w-full flex flex-row-reverse justify-between py-4')]}>
+        <View style={tw.style('flex flex-row-reverse')}>
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {fontSize: width / 32, color: '#05335F'},
+            ]}>
+            تاریخ تحویل:
+          </Text>
+          <Text
+            style={[
+              tw.style('font-light text-right mr-1'),
+              {fontSize: width / 32, lineHeight: 15, color: '#05335F'},
+            ]}>
+            {order.date}
+          </Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+    alignItems: 'flex-end',
+  },
+  container: {
+    width: width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+});
+
+export default OrderDetails;
+
+OrderDetails.defaultProps = {
+  order: {
+    number: '535353523653',
+    receiveCode: '300031',
+    status: 2,
+    items: [b1Image, b1Image],
+    date: '1400/1/11',
+    cost: '1.240.000',
+    address:
+      'تهران خیابان انقلاب حدفاصل ابوریحان و فلسطین بن بست سروش پلاک 2 واحد 12 شرقی',
+    name: 'هومن عابدی',
+    cellphone: '09121234568',
+    shoppingCardPrice: '981.000',
+    discountPrice: '12.000',
+    sendPrice: '18.000',
+    totalPrice: '18.000',
+    payMethod: 'حضوری',
+    transactionNumber: ' BS3194DNB98312',
+  },
+};

src/screens/OrdersFollowUp/components/Order.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  Image,
+  Pressable,
+} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import leftArrowIcon from '../assets/leftArrow.png';
+import plusIcon from '../assets/plus.png';
+import _ from 'lodash';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+const colors = {
+  1: '#FFF700',
+  4: '#FF0000',
+  3: '#4CFF00',
+  2: '#196EC0',
+};
+
+const status = {
+  1: 'در حال پردازش',
+  4: 'درخواست رد شد',
+  3: 'تکمیل شد',
+  2: 'ارسال شده',
+};
+
+function Order({order}) {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-col rounded-md overflow-hidden my-3'),
+        {borderWidth: 1, borderColor: '#EEF7FF'},
+      ]}>
+      <View
+        style={[
+          tw.style(
+            'flex flex-row-reverse w-full justify-between items-center p-3',
+          ),
+          {backgroundColor: '#EEF7FF'},
+        ]}>
+        <Text
+          style={[
+            tw.style('font-medium'),
+            {fontSize: width / 32, color: '#20297B'},
+          ]}>
+          {_.join(['شماره سفارش:', order.number], ' ')}
+        </Text>
+        <View style={tw.style('flex flex-row-reverse items-center')}>
+          <Text
+            style={[
+              tw.style('font-light'),
+              {color: '#20297B', fontSize: width / 32},
+            ]}>
+            {status[order.status]}
+          </Text>
+          <View
+            style={[
+              tw.style('h-4 w-4 rounded-full mr-2'),
+              {backgroundColor: colors[order.status]},
+            ]}></View>
+        </View>
+      </View>
+      <View
+        style={tw.style('w-full flex flex-row-reverse justify-between p-3')}>
+        <View style={tw.style('flex flex-col')}>
+          <View style={tw.style('flex flex-row-reverse mb-2')}>
+            {order.items.length < 2
+              ? order?.items?.map(item => (
+                  <Image
+                    source={item}
+                    style={[
+                      tw.style('rounded-md ml-1.5'),
+                      {width: width / 5.8, height: height / 8},
+                    ]}
+                  />
+                ))
+              : order.items
+                  ?.slice(0, 1)
+                  ?.map(item => (
+                    <Image
+                      source={item}
+                      style={[
+                        tw.style('rounded-md ml-1.5'),
+                        {width: width / 5.8, height: height / 8},
+                      ]}
+                    />
+                  ))}
+            {order.items.length >= 2 && (
+              <View
+                style={[
+                  tw.style(
+                    'flex flex-row-reverse items-center justify-center relative rounded-md overflow-hidden',
+                  ),
+                  {
+                    width: width / 5.8,
+                    height: height / 8,
+                    backgroundColor: '#EBEBEB',
+                  },
+                ]}>
+                {/* <Image
+                  source={order.items[2]}
+                  style={[tw.style('absolute left-0 top-0 h-full w-full z-10')]}
+                /> */}
+                <Image source={plusIcon} style={[tw.style('w-4 h-6 z-30')]} />
+              </View>
+            )}
+          </View>
+          <View style={[tw.style('bg-red-400')]}>
+            <Text
+              style={[
+                tw.style('p-2 rounded-md text-center'),
+                {
+                  fontSize: width / 32,
+                  backgroundColor: '#F0FFF1',
+                  color: '#05335F',
+                },
+              ]}>
+              {_.join(['کد تحویل:', order.receiveCode], ' ')}
+            </Text>
+          </View>
+        </View>
+        <View style={tw.style('flex flex-col items-center mr-4')}>
+          <Text
+            style={[
+              tw.style('my-3'),
+              {fontSize: width / 25, color: '#132F52'},
+            ]}>
+            {_.join(['جمع فاکتور:', order.cost], ' ')}
+          </Text>
+          <Pressable
+            style={[
+              tw.style('rounded-md flex flex-row-reverse justify-center px-5 py-3'),
+              {borderWidth: 1, borderColor: '#1999C0'},
+            ]}>
+            <Text style={{fontSize: width / 28, color: '#1999C0'}}>
+              جزئیات سفارش
+            </Text>
+            <Image
+              source={leftArrowIcon}
+              style={{width: 18, height: 18, marginRight: 10}}
+            />
+          </Pressable>
+          <Text
+            style={[
+              tw.style('my-5'),
+              {fontSize: width / 30, color: '#132F52'},
+            ]}>
+            {_.join(['تاریخ سفارش:', order.date], ' ')}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+    alignItems: 'flex-end',
+  },
+  container: {
+    width: width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+});
+
+export default Order;

src/screens/OrdersFollowUp/index.js

@@ -1,13 +1,66 @@
-import React from 'react'
-import { View, Text } from 'react-native';
+import React from 'react';
+import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
+import Order from './components/Order';
 import {connect} from 'react-redux';
+import b1Image from './assets/b1.png';
+import b2Image from './assets/b2.png';
+import b3Image from './assets/b3.png';
 
-function OrdersFollowUp({}) {
+const width = Dimensions.get('window').width;
+
+function OrdersFollowUp({orders}) {
   return (
-    <View>
-      <Text></Text>
-    </View>
-  )
+    <ScrollView
+      contentContainerStyle={styles.contentContainerStyle}
+      style={styles.container}>
+      {
+        orders.map((order, index) => <Order order={order} key={index} />)
+      }
+    </ScrollView>
+  );
 }
 
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 50,
+    alignItems: 'flex-end',
+  },
+  container: {
+    width: width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+});
+
 export default OrdersFollowUp;
+
+OrdersFollowUp.defaultProps = {
+  orders: [
+    {
+      number: '535353523653',
+      receiveCode: '300031',
+      status: 2,
+      items: [b1Image, b2Image, b3Image, b3Image],
+      date: '1400/1/12',
+      cost: '1.240.000',
+    },
+    {
+      number: '535353523653',
+      receiveCode: '300031',
+      status: 3,
+      items: [b1Image, b2Image, b3Image],
+      date: '1400/1/12',
+      cost: '1.240.000',
+    },
+    {
+      number: '535353523653',
+      receiveCode: '300031',
+      status: 4,
+      items: [b1Image, b2Image, b3Image],
+      date: '1400/1/12',
+      cost: '1.240.000',
+    },
+  ],
+};