Add footer and bottom buttons

README.md

@@ -1,7 +1,9 @@
-# RN-Ecommerce
+# RN-Ecommerce-Graphql
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FSimicart%2Frn-ecommerce-graphql.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FSimicart%2Frn-ecommerce-graphql?ref=badge_shield)
 
 
-__RN-Ecommerce__ is a React-Native library for building a customized Ecommerce app.
+Everythings you need to build a Magento mobile app.
+
 
 ### How to use:
 
@@ -11,4 +13,8 @@ _Currently in development_...
 
 We are grateful if you decide to contribute to this project. Please refer to [the contributing guideline](https://github.com/Simicart/rn-ecommerce-graphql/blob/master/CONTRIBUTING.md) for detailed information.
 
-If there's any problem, feel free to open an [issue](https://github.com/Simicart/rn-ecommerce-graphql/issues).
+If there's any problem, feel free to open an [issue](https://github.com/Simicart/rn-ecommerce-graphql/issues).
+
+
+## License
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FSimicart%2Frn-ecommerce-graphql.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FSimicart%2Frn-ecommerce-graphql?ref=badge_large)

example/android/app/build.gradle

@@ -219,3 +219,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

example/index.js

@@ -2,23 +2,43 @@
 import 'react-native-gesture-handler';
 
 import React from 'react';
-import { AppRegistry } from 'react-native';
+import { AppRegistry, ScrollView, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { AppComposite } from 'simicart';
 import AppRouter from './route/navigation';
 
 import { name as appName } from './app.json';
+import App from './src/App';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import AppStateDisplay from './src/test_component/appStateDisplay.js';
+import CatalogStateDisplay from './src/test_component/catalogStateDisplay.js';
+import CartStateDisplay from './src/test_component/cartStateDisplay';
+import UserStateDisplay from './src/test_component/userStateDisplay.js';
+import CheckoutStateDisplay from './src/test_component/checkoutStateDisplay.js';
+import TabBar from './src/components/TabBar/tabBar.js'
 import counterSlice from './src/customReducer/counterSlice';
 import Config from './src/Helper/config';
 
+const Drawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator()
+
 function Index() {
   return (
     <NavigationContainer>
       <AppComposite customReducer={counterSlice} apiBase={Config.merchant_url}>
-        <AppRouter />
+        <Tab.Navigator tabBar={props => <TabBar {...props}/>}>
+          <Tab.Screen name={'Cart'} component={CartStateDisplay}/>
+          <Tab.Screen name={'App'} component={AppStateDisplay} options={{tabBarLabel: 'Home'}}/>
+          <Tab.Screen name={'Catalog'} component={CatalogStateDisplay} />
+          <Tab.Screen name={'User'} component={UserStateDisplay} options={{tabBarLabel: 'Chau Bui'}}/>
+          <Tab.Screen name={'Checkout'} component={CheckoutStateDisplay} />
+        </Tab.Navigator>
       </AppComposite>
     </NavigationContainer>
   );
 }
 
 AppRegistry.registerComponent(appName, () => Index);
+

example/package.json

@@ -11,17 +11,21 @@
   "dependencies": {
     "@apollo/client": "^3.2.5",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.8",
     "@react-navigation/drawer": "^5.9.3",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.12.5",
     "@reduxjs/toolkit": "^1.4.0",
     "graphql": "^15.3.0",
     "react": "16.11.0",
     "react-native": "0.62.2",
+    "react-native-feather": "^1.0.2",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-reanimated": "^1.13.1",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.13.0",
+    "react-native-svg": "^12.1.0",
+    "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.2",
     "rxjs": "^6.6.3"
   },

example/src/components/TabBar/tabBar.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View, Text, TouchableOpacity } from 'react-native'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
+const activeTintColor = '#749867'
+const inactiveTintColor = 'gray'
+
+function TabBar({ state, descriptors, navigation }) {
+  return (
+    <View style={{ 
+      flexDirection: 'row',
+      backgroundColor:"#DEDEDE",
+      paddingTop: 5,
+      paddingBottom: 5,
+      justifyContent:"center",
+      alignItems:"center" 
+    }}>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const isFocused = state.index === index;
+
+        let cartCounter
+        if(route.name === 'Cart') {
+          const count = 3;
+          cartCounter = count ? 
+            <View 
+              style={{
+                position: 'absolute', 
+                backgroundColor: '#D23B1F',
+                zIndex: 1,
+                padding: 1,
+                height: 11,
+                width: 11,
+                borderRadius: 50,
+                alignItems: 'center',
+                justifyContent: 'center',
+                left: 37
+              }}
+            >
+              <Text style={{fontSize: 9, color: 'white'}}>{count}</Text>
+            </View>
+            : null
+        }
+
+        let iconName;
+        if (route.name === 'App') {
+          iconName = isFocused ? 'home-sharp' : 'home-outline';
+        } else if (route.name === 'Cart') {
+          iconName = isFocused ? 'cart' : 'cart-outline';
+        } else if (route.name === 'Catalog') {
+          iconName = isFocused ? 'list' : 'list-outline';
+        } else if (route.name === 'User') {
+          iconName = isFocused ? 'person' : 'person-outline';
+        } else if (route.name === 'Checkout') {
+          iconName = isFocused ? 'card' : 'card-outline';
+        } 
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityStates={isFocused ? ['selected'] : []}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{ flex: 1, alignItems:"center" }}
+          >
+            {cartCounter}
+            <Ionicons name={iconName} size={20} color={isFocused ? activeTintColor : inactiveTintColor}/>
+            <Text style={{ color: isFocused ? activeTintColor : inactiveTintColor }}>
+              {label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+export default TabBar

example/src/test_component/appStateDisplay.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { useAppContext } from 'simicart';
 import ColorfulButton from '../visualComponent/ColorfulButton';
 import StateDisplayer from './stateDisplayer';
@@ -19,7 +19,7 @@ function AppStateDisplay(props) {
   } = appApi;
 
   return (
-    <View>
+    <ScrollView>
       <StateDisplayer data={appState} title={'App'} />
       <ColorfulButton
         title={'stack'}
@@ -70,7 +70,19 @@ function AppStateDisplay(props) {
           setPageLoading(false);
         }}
       />
-    </View>
+      <ColorfulButton
+        title={'SET_PAGE_LOADING true'}
+        onPress={() => {
+          setPageLoading(true);
+        }}
+      />
+      <ColorfulButton
+        title={'SET_PAGE_LOADING false'}
+        onPress={() => {
+          setPageLoading(false);
+        }}
+      />
+    </ScrollView>
   );
 }
 

example/src/test_component/cartStateDisplay.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, Text } from 'react-native';
 import StateDisplayer from './stateDisplayer.js';
 import ColorfulButton from '../visualComponent/ColorfulButton.js';
 

example/src/test_component/catalogStateDisplay.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import StateDisplayer from './stateDisplayer';
 import ColorfulButton from '../visualComponent/ColorfulButton';
+
 import { useCatalogContext } from 'simicart';
 import { getRandomLargeNumber } from '../Helper/getRandomLargeNumber';
 

example/src/test_component/checkoutStateDisplay.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { useCheckoutContext } from 'simicart';
 import StateDisplayer from './stateDisplayer.js';
 import ColorfulButton from '../visualComponent/ColorfulButton.js';
+
 import { getRandomLargeNumber } from '../Helper/getRandomLargeNumber.js';
 
 function CheckoutStateDisplay(props) {

example/src/test_component/userStateDisplay.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { useUserContext } from 'simicart';
 import StateDisplayer from './stateDisplayer.js';
 import ColorfulButton from '../visualComponent/ColorfulButton.js';
+
 import { getRandomLargeNumber } from '../Helper/getRandomLargeNumber.js';
 
 function UserStateDisplay(props) {