setup tabbar

ios/Podfile.lock

@@ -497,6 +497,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: db3bc0bfd6407f748d2932183bbe6046ef7108ab
+PODFILE CHECKSUM: ff083ffc9072408b74d721ac5fc0815d6315b00c
 
 COCOAPODS: 1.10.1

package.json

@@ -23,7 +23,7 @@
     "react-native-gesture-handler": "^1.9.0",
     "react-native-indicators": "^0.17.0",
     "react-native-linear-gradient": "^2.5.6",
-    "react-native-modal": "^11.6.1",
+    "react-native-modal": "^11.7.0",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.17.1",
@@ -31,9 +31,6 @@
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3"
-
-
-
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

src/routers/PlussModal.js

+import React, {Component, useState} from 'react';
+import {View, Text, TouchableOpacity, StyleSheet, Button} from 'react-native';
+import Icon from 'react-native-vector-icons/Entypo';
+import R from '../assets/R';
+import {WIDTHXD} from '../Config/Functions';
+import Modal from 'react-native-modal';
+
+const PlussModal = (props) => {
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const toggleModal = () => {
+    setModalVisible(!isModalVisible);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.wraper}>
+        <TouchableOpacity onPress={toggleModal} style={styles.btn}>
+          <Icon name={'plus'} size={27} color={R.colors.white} />
+        </TouchableOpacity>
+      </View>
+
+      <Modal isVisible={isModalVisible}>
+        <View style={{flex: 1}}>
+          <Text>Hello!</Text>
+
+          <Button title="Hide modal" onPress={toggleModal} />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default PlussModal;
+
+const styles = StyleSheet.create({
+  btn: {
+    backgroundColor: R.colors.main,
+    width: WIDTHXD(144),
+    height: WIDTHXD(144),
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 3,
+    borderRadius: 30,
+  },
+  container: {
+    flex: 1,
+  },
+  wraper: {
+    backgroundColor: R.colors.white,
+    width: WIDTHXD(175),
+    height: WIDTHXD(175),
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: -20,
+    left: 15,
+    borderRadius: WIDTHXD(90),
+  },
+});

src/routers/StackNavigation.js

@@ -14,7 +14,7 @@ function MyStack(props) {
   return (
     <Stack.Navigator
       headerMode={'none'}
-      initialRouteName={ScreenName.LOGINSCREEN}>
+      initialRouteName={ScreenName.TABNAVIGATOR}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
     </Stack.Navigator>

src/routers/TabNavigation.js

 import React, {useEffect} from 'react';
+import {View, Text} from 'react-native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Home from '../Screens/Home/Home';
 import {connect} from 'react-redux';
 import R from '../assets/R';
+import PlussModal from './PlussModal';
 
 const Tab = createBottomTabNavigator();
-const TabNavigator = props => {
+
+const PayScreenComponent = () => {
+  return null;
+};
+
+const TabNavigator = (props) => {
   return (
     <Tab.Navigator
       initialRouteName="Screen1"
@@ -15,9 +23,49 @@ const TabNavigator = props => {
         name="Screen1"
         component={Home}
         options={{
-          tabBarLabel: 'Trang chủ',
+          tabBarLabel: 'Overview',
+          tabBarIcon: ({color, size}) => (
+            <Icon name="landmark" size={size} color={color} />
+          ),
+        }}
+      />
+
+      <Tab.Screen
+        name="Screen2"
+        component={Home}
+        options={{
+          tabBarLabel: 'Tài khoản',
+          tabBarIcon: ({color, size}) => (
+            <Icon name="user-tie" size={size} color={color} />
+          ),
+        }}
+      />
+
+      <Tab.Screen
+        name="Pay"
+        component={PayScreenComponent}
+        options={{
+          tabBarButton: () => <PlussModal />,
+        }}
+      />
+
+      <Tab.Screen
+        name="Screen3"
+        component={Home}
+        options={{
+          tabBarLabel: 'Giao dịch',
+          tabBarIcon: ({color, size}) => (
+            <Icon name="chart-line" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Screen4"
+        component={Home}
+        options={{
+          tabBarLabel: 'Thông báo',
           tabBarIcon: ({color, size}) => (
-            <Icon name="home" size={size} color={color} />
+            <MaterialIcons name="notifications-on" size={size} color={color} />
           ),
         }}
       />
@@ -25,13 +73,10 @@ const TabNavigator = props => {
   );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     notifi: state.CountNotificationReducer,
   };
 };
 
-export default connect(
-  mapStateToProps,
-  {},
-)(TabNavigator);
+export default connect(mapStateToProps, {})(TabNavigator);

yarn.lock

@@ -6040,7 +6040,7 @@ react-native-linear-gradient@^2.5.6:
   resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
   integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==
 
-react-native-modal@^11.6.1:
+react-native-modal@^11.7.0:
   version "11.7.0"
   resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-11.7.0.tgz#6637d757eeac6eda85f7017a9dfdee0c0fe3a34c"
   integrity sha512-0AeAugUrn12DaJK+k2XGmt8ZIUyWgl1nRdipfwHZDnzFSM8g1oqpf7rHxjOqhimHtmzSj4xJ//ZOn1DWe9aC5Q==