AnnchoiYeanaan/MyTabBar.js

import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
} from 'react-native';
import { inject, observer } from 'mobx-react';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import { observable } from 'mobx';
import { colors } from './src/assets/styles/colors-theme';
import { images } from './src/assets/images/index';

Icon.loadFont();

const MyTabBar = inject("appStore")(observer(class MyTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }



  render() {
    var { state, descriptors, navigation, logined } = this.props;
    return (
      <View style={{ backgroundColor: colors.MAIN }}>
        <View style={{
          flexDirection: 'row', backgroundColor: 'black', height: 66,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
        }}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                  ? options.title
                  : route.name;
            let iconName;
            let focus
            switch (route.name) {
              case 'Main':
                iconName = 'home';
                focus = 'home';
                break;
              case 'Category':
                iconName = images.ICON_LIST;
                focus = images.ICON_LIST_FOCUS;
                break;
              // case 'Favourite':
              //   iconName = images.NAV_FAV;
              //   focus = images.NAV_FAV_FOCUS;
              //   break;
              case 'Cart':
                iconName = images.NAV_CART;
                focus = images.NAV_CART_FOCUS;
                break;
              case 'Setting':
                iconName = images.NAV_PROFILE;
                focus = images.NAV_PROFILE_FOCUS;
                break;
            }

            const isFocused = state.index === index;

            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
              });

              if (!isFocused && !event.defaultPrevented) {
                console.log(route.name);
                if (route.name == 'Setting' && !this.store.logined) {
                  navigation.navigate('Login');
                } else {
                  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',
                  justifyContent: 'center',
                  marginTop: 5,
                  marginBottom: 15,
                }}>
                {route.name == 'Main' ? (<Icon name={iconName} color={isFocused ? colors.MAIN : 'white'} size={28} />) : (<Image style={{ width: 25, height: 25, resizeMode: "contain", }} source={isFocused ? focus : iconName} />)}


                {label == 'Cart' ? (
                  <View
                    style={{
                      justifyContent: 'center',
                      alignItems: 'center',
                      position: 'absolute',
                      top: 5,
                      right: 25,
                    }}>
                    <Icon name="circle" color={'red'} size={18} />
                    <Text
                      style={{
                        position: 'absolute',
                        top: 4,
                        fontWeight: '800',
                        fontSize: 8,
                        color: 'white',
                      }}>
                      {this.store.shoppingCart.length}
                    </Text>
                  </View>
                ) : (
                    <View />
                  )}
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    );
  }
}))

export default MyTabBar