import React, {useEffect} from 'react'; import {View, Text, Linking, Image, DeviceEventEmitter} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/FontAwesome5'; import Ionicons from 'react-native-vector-icons/Ionicons'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; import Home from '../Screens/Home/Home'; import {connect} from 'react-redux'; import R from '../assets/R'; import PlussModal from './PlussModal'; import {confirmAlert} from '../components/Aleart'; import Account from '../Screens/Account/Account'; import Exchange from '../Screens/Exchange/Exchange'; import NewFeed from '../Screens/NewFeed/NewFeed'; import Notification from '../Screens/Notification/Notification'; import Test from '../Screens/NewFeed/Test'; import {useNavigation} from '@react-navigation/native'; import Transaction from '../Screens/Transaction/Transaction'; import { AccountVerification, PACKETCQG, SETTINGOTP, } from '../routers/ScreenNames'; import I18n, {setLocation} from '../helper/i18/i18n'; import {changeLanguage} from '../actions/language'; import KEY from '../assets/AsynStorage'; import AsyncStorage from '@react-native-community/async-storage'; import {DETAILNEW} from '../routers/ScreenNames'; import {getHeight, getWidth, logout} from '../Config/Functions'; const Tab = createBottomTabNavigator(); const PayScreenComponent = () => { return null; }; const TabNavigator = (props) => { console.log(getHeight(), getWidth()); const navigate = useNavigation(); useEffect(() => { setInitLanguage(); checkDeepking(); setTimeout(() => { showPopUp(); }, 4000); let logoutListener = DeviceEventEmitter.addListener('logout', (e) => { console.log('run in to logout'); logout(navigate); }); return () => { logoutListener.remove(); }; }, []); 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); }); } else if (props.user.status == 3 && !props.user.contract_code) { return confirmAlert(I18n.t('PopupOpenCQG'), () => { navigate.navigate(PACKETCQG); }); } else if (!props.user.smart_otp_status) { return confirmAlert( props.language.language == 'vi' ? 'Bạn có muốn cài đặt Smart OTP?' : 'Do you want setting Smart OTP?', () => { navigate.navigate(SETTINGOTP); }, ); } }; 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> ); }; const mapStateToProps = (state) => { return { user: state.userReducer, notifi: state.CountNotificationReducer, screenInit: state.ScreenInitReducer, language: state.languageReducer, }; }; export default connect(mapStateToProps, {changeLanguage})(TabNavigator);