TabNavigation.js 5.76 KB
Newer Older
Giang Tran committed
1
import React, {useEffect} from 'react';
2
import {View, Text, Linking, Image, DeviceEventEmitter} from 'react-native';
Giang Tran committed
3
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
Giang Tran committed
4
import Icon from 'react-native-vector-icons/FontAwesome5';
Giang Tran committed
5
import Ionicons from 'react-native-vector-icons/Ionicons';
Giang Tran committed
6
import FontAwesome from 'react-native-vector-icons/FontAwesome';
Giang Tran committed
7

Giang Tran committed
8 9 10
import Home from '../Screens/Home/Home';
import {connect} from 'react-redux';
import R from '../assets/R';
Giang Tran committed
11
import PlussModal from './PlussModal';
Giang Tran committed
12
import {confirmAlert} from '../components/Aleart';
Giang Tran committed
13 14
import Account from '../Screens/Account/Account';
import Exchange from '../Screens/Exchange/Exchange';
Giang Tran committed
15
import NewFeed from '../Screens/NewFeed/NewFeed';
Giang Tran committed
16
import Notification from '../Screens/Notification/Notification';
Giang Tran committed
17
import Test from '../Screens/NewFeed/Test';
Giang Tran committed
18
import {useNavigation} from '@react-navigation/native';
Giang Tran committed
19
import Transaction from '../Screens/Transaction/Transaction';
Giang Tran committed
20 21 22 23
import {
  AccountVerification,
  PACKETCQG,
  SETTINGOTP,
Giang Tran committed
24
  CHANGESMARTOTP,
Giang Tran committed
25
} from '../routers/ScreenNames';
26
import I18n, {setLocation} from '../helper/i18/i18n';
Giang Tran committed
27 28 29
import {changeLanguage} from '../actions/language';
import KEY from '../assets/AsynStorage';
import AsyncStorage from '@react-native-community/async-storage';
Giang Tran committed
30
import {DETAILNEW} from '../routers/ScreenNames';
31
import {getHeight, getWidth, logout} from '../Config/Functions';
Giang Tran committed
32

Giang Tran committed
33
const Tab = createBottomTabNavigator();
Giang Tran committed
34 35

const PayScreenComponent = () => {
Giang Tran committed
36
  return null;
Giang Tran committed
37 38 39
};

const TabNavigator = (props) => {
Giang Tran committed
40 41 42 43 44 45 46
  console.log(getHeight(), getWidth());
  const navigate = useNavigation();
  useEffect(() => {
    setInitLanguage();
    checkDeepking();
    setTimeout(() => {
      showPopUp();
Giang Tran committed
47
    }, 4000);
Giang Tran committed
48 49 50 51 52 53
    let logoutListener = DeviceEventEmitter.addListener('logout', (e) => {
      console.log('run in to logout');
      logout(navigate);
    });
    return () => {
      logoutListener.remove();
54
    };
Giang Tran committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
  }, []);

  const checkDeepking = () => {
    Linking.getInitialURL().then((url) => {
      if (url) {
        deeplinkScreen(url);
      }
    });
    Linking.addEventListener('url', (url) => {
      if (url) {
        handleOpenURL(url);
      }
    });
  };

  const handleOpenURL = (event) => {
    deeplinkScreen(event.url);
  };

  const deeplinkScreen = (url) => {
    const route = url.replace(/.*?:\/\//g, '');
    const id = route.match(/\/([^\/]+)\/?$/)[1];
    const root = route.split('/')[0];
    // const routeName = route.split('/')[1];
    if (root == 'screen') {
      navigate.navigate(DETAILNEW, {id});
    }
  };

  useEffect(() => {
    checkScreenInit();
  }, [props.screenInit]);

  const checkScreenInit = () => {
    if (props.screenInit.screen) {
      const {screen, id} = props.screenInit;
      navigate.navigate(screen, {id: id});
    }
  };

  const setInitLanguage = async () => {
    const laguage = await AsyncStorage.getItem(KEY.LANGUAGE);
    if (laguage) {
      props.changeLanguage(laguage);
    }
    setLocation(I18n, laguage);
  };

  const showPopUp = () => {
    if (props.user.status == 1) {
      return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
        navigate.navigate(AccountVerification);
      });
Giang Tran committed
108
    } else if (!props.user.smart_otp_status) {
Giang Tran committed
109 110 111 112 113
      return confirmAlert(
        props.language.language == 'vi'
          ? 'Bạn có muốn  cài đặt Smart OTP?'
          : 'Do you want setting Smart OTP?',
        () => {
Giang Tran committed
114 115 116 117
          navigate.navigate(CHANGESMARTOTP, {
            TYPE: 'CREATE_SMART_OTP',
            old_password: null,
          });
Giang Tran committed
118 119
        },
      );
Giang Tran committed
120 121 122 123
    } else if (props.user.status == 3 && !props.user.contract_code) {
      return confirmAlert(I18n.t('PopupOpenCQG'), () => {
        navigate.navigate(PACKETCQG);
      });
Giang Tran committed
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
    }
  };
  return (
    <View style={{flex: 1}}>
      <Tab.Navigator
        initialRouteName="Screen1"
        tabBarOptions={{activeTintColor: R.colors.main}}>
        <Tab.Screen
          name="Screen1"
          component={Home}
          options={{
            tabBarLabel: 'Overview',
            tabBarIcon: ({color, size}) => (
              <Icon name="landmark" size={size} color={color} />
            ),
          }}
        />
        <Tab.Screen
          name="Screen2"
          component={Transaction}
          options={{
            tabBarLabel:
              props.language.language == 'vi' ? 'Giao dịch' : 'Tradding',
            tabBarIcon: ({color, size}) => (
              <Image
                source={R.images.iconTransaction2}
                style={{width: size, height: size, tintColor: color}}
              />
            ),
          }}
        />

        <Tab.Screen
          name="Pay"
          component={PayScreenComponent}
          options={{
            tabBarButton: () => <PlussModal />,
          }}
        />

        <Tab.Screen
          name="Screen3"
          component={Notification}
          options={{
            tabBarLabel:
              props.language.language == 'vi' ? 'Thông báo' : 'Notification',
            tabBarIcon: ({color, size}) => (
              <Ionicons
                name="ios-notifications-outline"
                size={size}
                color={color}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Screen4"
          component={NewFeed}
          options={{
            tabBarLabel: props.language.language == 'vi' ? 'Tin tức' : 'News',
            tabBarIcon: ({color, size}) => (
              <Ionicons name="newspaper-outline" size={size} color={color} />
            ),
          }}
        />
      </Tab.Navigator>
    </View>
  );
Giang Tran committed
192 193
};

Giang Tran committed
194
const mapStateToProps = (state) => {
Giang Tran committed
195 196 197 198 199 200
  return {
    user: state.userReducer,
    notifi: state.CountNotificationReducer,
    screenInit: state.ScreenInitReducer,
    language: state.languageReducer,
  };
Giang Tran committed
201 202
};

Giang Tran committed
203
export default connect(mapStateToProps, {changeLanguage})(TabNavigator);