minor change

App.js

@@ -10,15 +10,22 @@ import Phonepehome from './phonepehome';
 import Webview from './webview';
 import Login from './login';
 import SearchProduct from './searchProduct';
+import QuizHomepage from './quiz';
+import CartPage from './cart';
+import CategoryPage from './categoryPage';
+import SplashScreen from 'react-native-splash-screen';
 
 const Stack = createNativeStackNavigator();
 
 const App = () => {
-console.log('hello')
+  React.useEffect(() => {
+    SplashScreen.hide();
+  }, []);
+
   return (
     <NavigationContainer>
       <Stack.Navigator
-        initialRouteName="RNForm"
+        initialRouteName="Apicall"
         screenOptions={{
           headerShown: false,
         }}>
@@ -33,7 +40,12 @@ console.log('hello')
         <Stack.Screen name="Phonepehome" component={Phonepehome}></Stack.Screen>
         <Stack.Screen name="Webview" component={Webview}></Stack.Screen>
         <Stack.Screen name="Login" component={Login}></Stack.Screen>
-        <Stack.Screen name="SearchProduct" component={SearchProduct}></Stack.Screen>
+        <Stack.Screen name="QuizHomepage" component={QuizHomepage}></Stack.Screen>
+        <Stack.Screen name="CartPage" component={CartPage}></Stack.Screen>
+        <Stack.Screen name="CategoryPage" component={CategoryPage}></Stack.Screen>
+        <Stack.Screen
+          name="SearchProduct"
+          component={SearchProduct}></Stack.Screen>
       </Stack.Navigator>
     </NavigationContainer>
   );

android/app/build.gradle

@@ -79,6 +79,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     enableHermes: false,  // clean and rebuild if changing
+     bundleInDebug: true
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -136,6 +137,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        missingDimensionStrategy 'react-native-camera', 'general' 
     }
     splits {
         abi {
@@ -186,6 +188,10 @@ android {
 
         }
     }
+    dexOptions {
+       javaMaxHeapSize "3g"
+    }
+
 }
 
 dependencies {
@@ -194,6 +200,8 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    implementation project(':react-native-splash-screen')
+
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'

android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,9 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+      <uses-permission android:name="android.permission.CAMERA" />
+<uses-permission android:name="android.permission.READ_PROFILE" />
+
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

android/app/src/main/java/com/basicrnapp/MainActivity.java

@@ -1,6 +1,10 @@
 package com.basicrnapp;
 import android.os.Bundle;
 import com.facebook.react.ReactActivity;
+// react-native-splash-screen >= 0.3.1
+import org.devio.rn.splashscreen.SplashScreen;
+// react-native-splash-screen < 0.3.1
+// import com.cboy.rn.splashscreen.SplashScreen; // here
 
 public class MainActivity extends ReactActivity {
 
@@ -10,6 +14,7 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected void onCreate(Bundle savedInstanceState) {
+     SplashScreen.show(this); //TO SHOW SPLASH SCREEN
     super.onCreate(null);
   }
 

android/app/src/main/java/com/basicrnapp/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -25,7 +26,6 @@ protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
           return packages;
         }
 

android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical">
+
+    <ImageView
+        android:layout_width="149dp"
+        android:layout_height="81dp"
+        android:scaleType="center"
+        android:src="@mipmap/launch_screen" />
+</RelativeLayout>

android/gradle.properties

@@ -26,3 +26,6 @@ android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
 FLIPPER_VERSION=0.99.0
+org.gradle.daemon=true
+org.gradle.configureondemand=true
+org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'basicrnapp'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

apicall.js

@@ -1,46 +1,53 @@
+import axios from 'axios';
+import React, {useEffect, useState} from 'react';
 import {
-  View,
-  Text,
+  Linking,
+  Pressable,
   ScrollView,
-  Image,
   StyleSheet,
-  Button,
-  Pressable,
-  Linking,
-  Platform,
+  Text,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import React, {useEffect, useState} from 'react';
-import axios from 'axios';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import {useDispatch, useSelector} from 'react-redux';
+import ProductItem from './productItem';
+import {saveCatalogData} from './redux/catalogSlice';
 
 export default function ApiCall(props) {
-  const [apiData, setapiData] = useState([]);
   const [isLoading, setisLoading] = useState(false);
+  const [totalQuantity, setQty] = useState(0);
+  const dispatch = useDispatch();
+  const productData = useSelector(state => state.catalogReducer.data);
+  const cartData = useSelector(state => state.cartReducer.data);
   const apiURL =
     'https://api.dotshowroom.in/api/dotk/catalog/getItemsBasicDetailsByStoreId/2490120?category_type=0';
-
   useEffect(() => {
-    //start loader
     setisLoading(true);
     axios
       .get(apiURL)
-      //api is pending. api call is going on in the server
       .then(data => {
-        //api call is success and complete
-        //false loader
-        setapiData(data.data);
+        dispatch({
+          type: saveCatalogData,
+          payload: data.data,
+        });
         setisLoading(false);
       })
-      .catch(() => {
-        //loader is false
-        //error handling
-        setisLoading(false);
-      });
-    //empty array means it will work only first time it loads
+      .catch(() => {});
   }, []);
 
+  useEffect(() => {
+    var totalQty = 0;
+    cartData &&
+      Object.keys(cartData).length &&
+      Object.keys(cartData).map(key => {
+        totalQty = totalQty + cartData[key].quantity;
+      });
+    setQty(totalQty);
+  }, [cartData]);
+
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{flex: 1}}>
       <View style={styles.container}>
         <Text style={styles.pageHeading}>ApiCall</Text>
         <Pressable
@@ -50,68 +57,67 @@ export default function ApiCall(props) {
           <Text>Redirect me to google in browser</Text>
         </Pressable>
         {isLoading ? <Text>Please wait... Loading</Text> : null}
-        <ScrollView>
-          {apiData?.store_items?.map(item => {
-            return (
-              <View key={item.category.name}>
-                <Text style={styles.catName}>
-                  {item.category && item.category.name}
-                </Text>
-                <View style={styles.productItemContainer}>
-                  {item?.items?.map(productItem => {
-                    return (
-                      <View style={styles.productItem} key={productItem?.id}>
-                        <Image
-                          style={{height: 150, width: '100%'}}
-                          source={{uri: productItem?.image_url}}
-                        />
-                        <Text
-                          style={{
-                            fontSize: 15,
-                            marginBottom: 10,
-                            color: '#000',
-                          }}
-                          numberOfLines={1}>
-                          {productItem?.name}
-                        </Text>
-                        <View style={styles.priceWrap}>
-                          <Text style={styles.dprice}>
-                            {productItem?.price} INR
-                          </Text>
-                          <Text style={styles.oprice}>
-                            {productItem?.discounted_price} INR
-                          </Text>
-                        </View>
-                        <Button
-                          onPress={() =>
-                            props.navigation.navigate('DetailPage', {
-                              data: productItem,
-                            })
-                          }
-                          title="Add to cart"
+        <View style={{flex: 1, padding: 20}}>
+          <ScrollView>
+            {productData?.store_items?.map(item => {
+              return (
+                <View key={item.category.name}>
+                  <TouchableOpacity
+                    onPress={() =>
+                      props.navigation.navigate('CategoryPage', {
+                        data: item,
+                      })
+                    }>
+                    <Text style={styles.catName}>
+                      {item.category && item.category.name}
+                    </Text>
+                  </TouchableOpacity>
+                  <View style={styles.productItemContainer}>
+                    {item?.items?.slice(0, 2)?.map((productItem, index) => {
+                      return (
+                        <ProductItem
+                          data={productItem}
+                          key={item.category && item.category.id + index}
                         />
-                      </View>
-                    );
-                  })}
+                      );
+                    })}
+                  </View>
+                  {item?.items?.length > 2 ? (
+                    <Text>See all products...</Text>
+                  ) : null}
                 </View>
-              </View>
-            );
-          })}
-        </ScrollView>
+              );
+            })}
+          </ScrollView>
+        </View>
+
+        {
+          <Pressable
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              padding: 10,
+              backgroundColor: 'blue',
+            }}
+            onPress={() => props.navigation.navigate('CartPage')}>
+            <Text style={{color: '#fff'}}>View Cart</Text>
+            <Text style={{color: '#fff'}}>{totalQuantity} items</Text>
+          </Pressable>
+        }
       </View>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    padding: 20,
+    flex: 1,
   },
   pageHeading: {
     fontSize: 20,
     textAlign: 'center',
-    fontWeight: 'bold',
     color: '#000',
+    fontFamily: 'Montserrat-Bold',
   },
   productItemContainer: {
     flexDirection: 'row',

cart.js

@@ -0,0 +1,22 @@
+import {View, Text, ScrollView} from 'react-native';
+import React from 'react';
+import {useSelector} from 'react-redux';
+import ProductItem from "./productItem";
+export default function CartPage(props) {
+  const cartData = useSelector(state => state.cartReducer.data);
+
+  return (
+    <ScrollView style={{padding: 20}}>
+      <Text>CartPages</Text>
+      {cartData &&
+        Object.keys(cartData)?.length &&
+        Object.keys(cartData).map(key => {
+          return (
+            <View>
+              <ProductItem data={cartData[key]}/>
+            </View>
+          );
+        })}
+    </ScrollView>
+  );
+}

categoryPage.js

@@ -0,0 +1,19 @@
+import {View, Text, ScrollView} from 'react-native';
+import React from 'react';
+import ProductItem from './productItem';
+
+export default function CategoryPage(props) {
+  console.log(props);
+  const catData = props?.route?.params?.data;
+  const cartData = props?.route?.params?.cartData;
+  return (
+    <ScrollView>
+      <Text>{catData?.category?.name}</Text>
+      <View style={{flexDirection: 'row', flexWrap: "wrap"}}>
+        {catData?.items?.map(item => {
+          return <ProductItem data={item} cartData={cartData} />;
+        })}
+      </View>
+    </ScrollView>
+  );
+}

index.js

@@ -1,5 +1,14 @@
 import {AppRegistry, LogBox} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import store from './redux/store';
+import React from 'react'
 
-AppRegistry.registerComponent(appName, () => App);
+import {Provider} from 'react-redux';
+
+const RNRedux = () => (
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
+AppRegistry.registerComponent(appName, () => RNRedux);