update 5 files

App.js

@@ -1,28 +1,28 @@
-import Navigation from "./src/navigation";
-import AlertModal from "./src/components/AlertModal";
-import { Provider } from "react-redux";
-import { store, persistor } from "./src/redux/store";
-import React from "react";
-import { PersistGate } from "redux-persist/integration/react";
-import { copilot } from "react-native-copilot";
+import Navigation from './src/navigation';
+import AlertModal from './src/components/AlertModal';
+// import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Provider} from 'react-redux';
+import {store, persistor} from './src/redux/store';
+import React from 'react';
+import {PersistGate} from 'redux-persist/integration/react';
+import {copilot} from 'react-native-copilot';
 
-const App = () => {
+const App = props => {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <Navigation />
+          <Navigation startUserGuide={() => props.start()} />
           <AlertModal />
       </PersistGate>
     </Provider>
   );
 };
 
-
 export default copilot({
   labels: {
-    previous: "قبلی",
-    next: "بعدی",
-    skip: "رد کردن",
-    finish: "پایان",
+    previous: 'قبلی',
+    next: 'بعدی',
+    skip: 'رد کردن',
+    finish: 'پایان',
   },
 })(App);

src/components/Drawer.js

@@ -367,7 +367,7 @@ const Drawer = ({
       >
         <View
           style={[
-            tw("flex items-end pt-12 px-4"),
+            tw("flex items-end pt-6 px-4"),
             {
               backgroundColor:
                 theme === "light"

src/navigation.js

@@ -15,7 +15,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 // import OrdersFollowUp from "../src/screens/OrdersFollowUp";
 import Splash from "../src/screens/Splash";
 import Home from "../src/screens/Home";
-// import Products from "../src/screens/Products";
+import Products from "../src/screens/Products";
 import Login from "../src/screens/Login";
 import Otp from "../src/screens/Otp";
 // import Product from "../src/screens/Product";
@@ -519,7 +519,7 @@ const ProductsStackScreen = ({ theme }) => {
       }}
       initialRouteName="Products"
     >
-      <ProductsStack.Screen name="Products" children={() => <View></View>} />
+      <ProductsStack.Screen name="Products" children={() => <Products />} />
       {/* <ProductsStack.Screen name="Product" component={Product} />
       <ProductsStack.Screen name="Sample" component={Sample} />
       <ProductsStack.Screen name="Info" component={Info} /> */}

src/screens/Home/index.js

@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import {connect} from 'react-redux';
-import {blog, book, userProduct, publicApi} from '../../redux/actions';
-import {useNavigation} from '@react-navigation/native';
+import {blog, book, userProduct} from '../../redux/actions';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
@@ -9,8 +8,6 @@ import {
   View,
   StyleSheet,
   ScrollView,
-  Platform,
-  StatusBar,
   LayoutAnimation,
   Dimensions,
 } from 'react-native';
@@ -57,7 +54,7 @@ const Home = ({
       setTimeout(() => {
         startUserGuide();
         AsyncStorage.setItem('firstLogin', JSON.stringify(true));
-      }, 800);
+      }, 1200);
     }
   }, []);
 
@@ -111,10 +108,6 @@ const Home = ({
 
 // Later on in your styles..
 const styles = StyleSheet.create({
-  safeStyle: {
-    // paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-    flex: 1,
-  },
   contentContainerStyle: {
     paddingBottom: height / 10,
 

src/screens/Products/index.js

@@ -1,26 +1,20 @@
-import React, { useState, useEffect } from "react";
-
-import {
-  View,
-  ScrollView,
-  SafeAreaView,
-  StatusBar,
-  Dimensions,
-  LayoutAnimation,
-} from "react-native";
-import { connect } from "react-redux";
-import { book, config } from "../../redux/actions";
+import React, {useState, useEffect} from 'react';
+import {View, ScrollView, Dimensions, LayoutAnimation} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {connect} from 'react-redux';
+import {book, config} from '../../redux/actions';
 
 //components
-import Drawer from "../../components/Drawer";
-import Header from "./components/Header";
-import Main from "./components/Main";
-import Navbar from "../../components/Navbar";
+import Drawer from '../../components/Drawer';
+import Header from './components/Header';
+import Main from './components/Main';
+import Navbar from '../../components/Navbar';
 
 //style
+import tw from 'tailwind-rn';
 
 //variables
-const {height} = Dimensions.get("window");
+const {height} = Dimensions.get('window');
 
 function Products({
   books,
@@ -29,40 +23,37 @@ function Products({
   route,
   setFilterOptions,
   filterOptions,
-  getFilters
+  getFilters,
 }) {
-  const [position, setPosition] = useState("100%");
+  const insets = useSafeAreaInsets();
+  const [position, setPosition] = useState('100%');
 
   useEffect(() => {
     getFilters();
-    getBooks({ vod: true });
+    getBooks({vod: true});
   }, []);
 
   const setBoxPosition = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setPosition(position === "100%" ? "0%" : "100%");
+    setPosition(position === '100%' ? '0%' : '100%');
   };
 
   useEffect(() => {
-    if (route?.params?.productType === "دوره ویدئویی") {
-      setFilterOptions({ ...filterOptions, productType: "محصولات ویدیویی" });
+    if (route?.params?.productType === 'دوره ویدئویی') {
+      setFilterOptions({...filterOptions, productType: 'محصولات ویدیویی'});
     }
   }, [route]);
 
   return (
     <SafeAreaView
-      style={{
-        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-        position: "relative",
-      }}
-    >
+      style={{flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom}}>
       <Navbar
         setBoxPosition={setBoxPosition}
         headerOptions={{
           logo: true,
           menu: false,
           hamburgerMenu: true,
-          title: "",
+          title: '',
           bookmark: false,
           qr: true,
           back: false,
@@ -70,14 +61,14 @@ function Products({
       />
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <Header />
-      <ScrollView contentContainerStyle={{ paddingBottom: height / 2 }}>
+      <ScrollView contentContainerStyle={{paddingBottom: height / 2}}>
         <Main books={books} grades={grades} />
       </ScrollView>
     </SafeAreaView>
   );
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   grades: state.publicApi.grades,
   books: state.book.list,
   filterOptions: state.book.filterOptions,
@@ -86,7 +77,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = {
   getBooks: book.list,
   setFilterOptions: book.setFilterOptions,
-  getFilters: config.getFilters
+  getFilters: config.getFilters,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Products);