diff --git a/android/app/build.gradle b/android/app/build.gradle
index 79a0d21..2f03111 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -141,6 +141,7 @@ android {
         versionCode 1
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+        missingDimensionStrategy 'react-native-camera', 'general'
 
         if (isNewArchitectureEnabled()) {
             // We configure the NDK build only if you decide to opt-in for the New Architecture.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index f8e1c77..4833575 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -2,6 +2,7 @@
   package="com.danovin">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.VIBRATE"/>
 
     <application
       android:name=".MainApplication"
diff --git a/ios/Podfile b/ios/Podfile
index 526117a..9f22c75 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -6,10 +6,12 @@ install! 'cocoapods', :deterministic_uuids => false
 
 target 'danovin' do
   config = use_native_modules!
-
+  permissions_path = '../node_modules/react-native-permissions/ios'
+  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
+  
   # Flags change depending on the env values.
   flags = get_default_flags()
-
+  
   use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
@@ -22,6 +24,7 @@ target 'danovin' do
   target 'danovinTests' do
     inherit! :complete
     # Pods for testing
+
   end
 
   # Enables Flipper.
diff --git a/ios/danovin/Info.plist b/ios/danovin/Info.plist
index b478fd5..e6d4786 100644
--- a/ios/danovin/Info.plist
+++ b/ios/danovin/Info.plist
@@ -4,6 +4,17 @@
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
+	<!-- qr code -->
+	<key>NSCameraUsageDescription</key>
+	<string>Your message to user when the camera is accessed for the first time</string>
+
+	<!-- Include this only if you are planning to use the camera roll -->
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Your message to user when the photo library is accessed for the first time</string>
+
+	<!-- Include this only if you are planning to use the microphone for video recording -->
+	<key>NSMicrophoneUsageDescription</key>
+	<!-- qr code -->
 	<key>CFBundleDisplayName</key>
 	<string>danovin</string>
 	<key>CFBundleExecutable</key>
diff --git a/package.json b/package.json
index e297940..b0e60cf 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,11 @@
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-awesome-alerts": "1.5.2",
+    "react-native-camera": "^4.2.1",
     "react-native-copilot": "^2.5.1",
     "react-native-htmlview": "^0.16.0",
+    "react-native-permissions": "^3.3.1",
+    "react-native-qrcode-scanner": "^1.5.5",
     "react-native-ratings": "^8.1.0",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "3.10.2",
diff --git a/src/navigation.js b/src/navigation.js
index e0a9707..96b2d47 100644
--- a/src/navigation.js
+++ b/src/navigation.js
@@ -18,15 +18,15 @@ import Home from '../src/screens/Home';
 import Products from '../src/screens/Products';
 import Login from '../src/screens/Login';
 import Otp from '../src/screens/Otp';
-import Product from "../src/screens/Product";
+import Product from '../src/screens/Product';
 // import AR from "../src/screens/AR";
-// import QR from "../src/screens/QR";
+import QR from '../src/screens/QR';
 // import QRContent from "../src/screens/QRContent";
 // import Faq from "../src/screens/Faq";
 // import Activation from "../src/screens/Activation";
 import Videos from '../src/screens/Videos';
-import Video from "../src/screens/Video";
-import VideoDisplay from "../src/screens/VideoDisplay";
+import Video from '../src/screens/Video';
+import VideoDisplay from '../src/screens/VideoDisplay';
 // import Contact from "../src/screens/Contact";
 // import Tests from "../src/screens/Tests";
 import ShoppingCart from '../src/screens/ShoppingCart';
@@ -642,7 +642,8 @@ const Navigation = ({
             />
           )}
         />
-        {/* <Stack.Screen name="QR" component={QR} />
+        <Stack.Screen name="QR" component={QR} />
+        {/*
         <Stack.Screen name="Orders" component={OrdersFollowUp} />
         <Stack.Screen name="Order" component={OrderDetails} />
         <Stack.Screen name="Faq" component={Faq} />
diff --git a/src/screens/QR/index.js b/src/screens/QR/index.js
index bb76df4..9072dcf 100644
--- a/src/screens/QR/index.js
+++ b/src/screens/QR/index.js
@@ -2,18 +2,22 @@ import React, { useState } from "react";
 import {
   StyleSheet,
   ScrollView,
-  SafeAreaView,
   Dimensions,
   StatusBar,
 } from "react-native";
+import {useSafeAreaInsets, SafeAreaView} from "react-native-safe-area-context";
 import Scan from "./layouts/Scan";
 
 const width = Dimensions.get("window").width;
 function QR({ route }) {
+  const insets = useSafeAreaInsets();
+
   return (
     <SafeAreaView
       style={{
-        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        flex : 1,
+        paddingTop : insets.top,
+        paddingBottom : insets.bottom
       }}
     >
       <ScrollView
@@ -31,6 +35,7 @@ export default QR;
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 0,
+    flex : 1
   },
   container: {
     width: Dimensions.get("window").width,
diff --git a/src/screens/QR/layouts/Scan/index.js b/src/screens/QR/layouts/Scan/index.js
index 4813f1c..fee5644 100644
--- a/src/screens/QR/layouts/Scan/index.js
+++ b/src/screens/QR/layouts/Scan/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   View,
   Text,
@@ -6,92 +6,98 @@ import {
   Dimensions,
   ImageBackground,
   StatusBar,
-} from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import { BarCodeScanner } from "expo-barcode-scanner";
-import { Entypo } from "@expo/vector-icons";
-import { connect } from "react-redux";
+} from 'react-native';
+import {useNavigation} from '@react-navigation/native';
+import QRCodeScanner from 'react-native-qrcode-scanner';
+import {RNCamera} from 'react-native-camera';
+// import { Entypo } from "@expo/vector-icons";
+import {connect} from 'react-redux';
 
 //style
-import tw from "tailwind-rn";
-import Colors from "../../../../constants/Colors";
-import fontSize from "../../../../constants/fontSize";
+import tw from 'tailwind-rn';
+import Colors from '../../../../constants/Colors';
+import fontSize from '../../../../constants/fontSize';
 
-const { width, height } = Dimensions.get("screen");
+const {width, height} = Dimensions.get('window');
 
 //assets
-import laptopImage from "../../assets/laptop.png";
+import laptopImage from '../../assets/laptop.png';
 
-function Scan({ route, theme, page }) {
+function Scan({route, theme, page}) {
   const navigation = useNavigation();
   const [hasPermission, setHasPermission] = React.useState(null);
   const [scanned, setScanned] = React.useState(false);
 
   React.useEffect(() => {
     (async () => {
-      const { status } = await BarCodeScanner.requestPermissionsAsync();
-      setHasPermission(status === "granted");
+      const {status} = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === 'granted');
     })();
   }, []);
 
-  const handleBarCodeScanned = ({ type, data }) => {
-    if (page === "activation") {
-      navigation.replace("Activation", {
-        data: data.slice(data.lastIndexOf("/") + 1, data.length),
+  const handleBarCodeScanned = data => {
+    if (page === 'activation') {
+      navigation.replace('Activation', {
+        data: data.slice(data.lastIndexOf('/') + 1, data.length),
       });
     } else {
-      navigation.replace("QRContent", {
-        data: data.slice(data.lastIndexOf("/") + 1, data.length),
+      navigation.replace('QRContent', {
+        data: data.slice(data.lastIndexOf('/') + 1, data.length),
       });
     }
   };
 
   return (
-    <ImageBackground
-      source={laptopImage}
-      resizeMode="cover"
-      style={[tw("w-full"), { height: height - StatusBar.currentHeight }]}
-    >
+    <ImageBackground source={laptopImage} resizeMode="cover" style={{flex: 1}}>
       <View
         style={tw(
-          "flex-1 flex  justify-evenly items-center  bg-gray-800 bg-opacity-80"
-        )}
-      >
-        <View style={{ width: height / 2.5, height: height / 2.5 }}>
-          {hasPermission && !scanned ? (
-            <BarCodeScanner
-              onBarCodeScanned={handleBarCodeScanned}
-              style={{ width: "100%", height: "100%" }}
-            />
-          ) : null}
+          'flex-1 flex justify-evenly items-center  bg-gray-800 bg-opacity-80',
+        )}>
+        <View style={{width: height / 2.5, height: height / 2.5, overflow: 'hidden'}}>
+          <QRCodeScanner
+            onRead={e => handleBarCodeScanned(e.data)}
+            flashMode={RNCamera.Constants.FlashMode.off}
+            topContent={<Text></Text>}
+            bottomContent={
+              <TouchableOpacity>
+                <Text></Text>
+              </TouchableOpacity>
+            }
+            containerStyle={{
+              width: '100%',
+              height: '100%',
+            }}
+            cameraContainerStyle={{
+              width: '100%',
+              height: '100%',
+            }}
+          />
         </View>
 
         {/* {scanned && ( */}
         <TouchableOpacity
           onPress={() => navigation.goBack()}
           style={[
-            tw("py-2.5 rounded-full flex justify-center flex-row items-center"),
+            tw('py-2.5 rounded-full flex justify-center flex-row items-center'),
             {
               width: height / 3.5,
               borderWidth: 1,
               borderColor: Colors.theme1.greenCF,
             },
-          ]}
-        >
-          <Entypo
+          ]}>
+          {/* <Entypo
             name="arrow-left"
             size={fontSize.base}
             style={{ marginRight: 5, color: Colors.theme1.greenCF }}
-          />
+          /> */}
           <Text
             style={[
               {
                 color: Colors.theme1.greenCF,
                 fontSize: fontSize.base,
-                fontFamily: "Regular",
+                fontFamily: 'Regular',
               },
-            ]}
-          >
+            ]}>
             بازگشت
           </Text>
         </TouchableOpacity>
@@ -101,7 +107,7 @@ function Scan({ route, theme, page }) {
   );
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   theme: state.publicApi.theme,
 });
 
diff --git a/yarn.lock b/yarn.lock
index 6fc09fb..b2312c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,7 +1105,7 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@react-native-async-storage/async-storage@^1.17.6":
+"@react-native-async-storage/async-storage@^1.13.4", "@react-native-async-storage/async-storage@^1.17.6":
   version "1.17.6"
   resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.17.6.tgz#ddb3520d051f71698c8a0e79e8959a7bf6d9f43b"
   integrity sha512-XXnoheQI3vQTQmjphdXNLTmtiKZeRqvI8kPQ25X5Eae7nZjdYEEGN+0z8N2qyelbUIQwKgmW0aagJk56q7DyNg==
@@ -5778,7 +5778,7 @@ prompts@^2.0.1, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5860,6 +5860,13 @@ react-native-awesome-alerts@1.5.2:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-camera@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-native-camera/-/react-native-camera-4.2.1.tgz#caf74081f055e89d7e9b0cd5108965d808c60e90"
+  integrity sha512-+Vkql24PFYQfsPRznJCvPwJQfyzCnjlcww/iZ4Ej80bgivKjL9eU0IMQIXp4yi6XCrKi4voWXxIDPMupQZKeIQ==
+  dependencies:
+    prop-types "^15.6.2"
+
 react-native-codegen@^0.0.17:
   version "0.0.17"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.17.tgz#83fb814d94061cbd46667f510d2ddba35ffb50ac"
@@ -5891,6 +5898,25 @@ react-native-htmlview@^0.16.0:
     entities "^1.1.1"
     htmlparser2-without-node-native "^3.9.2"
 
+react-native-permissions@^2.0.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-permissions/-/react-native-permissions-2.2.2.tgz#3d2a63f6b7d6be52fc86e30f77412a9566283028"
+  integrity sha512-ihf4shQDSX5Oo9ChQXb9kr13mmyyNem5MaEvOpr3dCjhBOBWyEMztXm9/uPK1Qg5PsNpaYLa1KpcPZDCw87LXg==
+
+react-native-permissions@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-permissions/-/react-native-permissions-3.3.1.tgz#8a359d9c0531afcde2f642a459b48c4c1e3e8f2d"
+  integrity sha512-Ap9nVWBWJ7lyU6Ye3Qltm2V+Ut6XjDcs+6ZBmK1UUxcCoSSGx/mQg2GbMJLjlnoVtUgVHR3IhyZ0mN9DlMPRFQ==
+
+react-native-qrcode-scanner@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/react-native-qrcode-scanner/-/react-native-qrcode-scanner-1.5.5.tgz#0d20101712715da108742a2bbbd0397569031b01"
+  integrity sha512-il79uStkFqUvofqXJQfOL30qgQyU17MUKxj7IGHv6oT2OxIY/vutTwuPPDbsivtv0yTMHP4dGx/79oys4eAuNw==
+  dependencies:
+    "@react-native-async-storage/async-storage" "^1.13.4"
+    prop-types "^15.5.10"
+    react-native-permissions "^2.0.2"
+
 react-native-ratings@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-8.1.0.tgz#3fa9ad29128dc3a88e59518ba151e61c59dd0647"