HeaderDrawer.js 2.74 KB
Newer Older
Giang Tran committed
1
import React, {useState} from 'react';
Giang Tran committed
2 3 4 5 6 7 8 9 10 11
import {
  View,
  Text,
  Image,
  StatusBar,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
  TouchableOpacity,
  Platform,
Giang Tran committed
12 13
  Button,
  TouchableWithoutFeedback,
Giang Tran committed
14 15 16 17 18
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
Giang Tran committed
19 20
import Modal from 'react-native-modal';
import Drawer from './Drawer';
Giang Tran committed
21
import SnackBar from '../SnackBar';
Giang Tran committed
22 23
import AppText from '../AppText';

Giang Tran committed
24 25
const HeaderDrawer = (props) => {
  const {title, isWhite} = props;
Giang Tran committed
26 27 28 29 30 31
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

Giang Tran committed
32
  return (
Giang Tran committed
33
    <ImageBackground
Giang Tran committed
34
      imageStyle={{resizeMode: 'stretch'}}
Giang Tran committed
35 36
      style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
      source={R.images.bgHeader}>
Giang Tran committed
37
      <SnackBar />
Giang Tran committed
38
      <StatusBar backgroundColor="transparent" translucent={true} />
Giang Tran committed
39

Giang Tran committed
40
      <View style={styles.headerContainer}>
Giang Tran committed
41
        <TouchableOpacity style={{width: 35, height: 30}} onPress={toggleModal}>
Giang Tran committed
42 43 44
          <Image source={R.images.iconMenu} style={styles.imgIcon} />
        </TouchableOpacity>

Giang Tran committed
45
        <AppText i18nKey={title} style={styles.txtTitle}></AppText>
Giang Tran committed
46
        <View style={{width: 35, height: 30}} />
Giang Tran committed
47
      </View>
Giang Tran committed
48 49 50
      <Modal
        animationIn={'fadeInLeft'}
        animationOut={'fadeOutLeft'}
Giang Tran committed
51
        style={{marginLeft: 20}}
Giang Tran committed
52 53 54 55 56 57 58 59
        isVisible={isModalVisible}
        backdropOpacity={0.5}>
        <View
          style={[
            {flex: 1, flexDirection: 'row'},
            Platform.OS == 'ios' ? {paddingVertical: 15} : {},
          ]}>
          <View style={styles.container}>
Giang Tran committed
60
            <Drawer toggleModal={toggleModal} />
Giang Tran committed
61 62 63 64 65 66 67 68 69
          </View>
          <TouchableWithoutFeedback onPress={toggleModal}>
            <View
              style={{
                flex: 1,
              }}></View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
Giang Tran committed
70 71 72 73 74 75 76 77 78 79
    </ImageBackground>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};

Giang Tran committed
80
export default connect(mapStateToProps, {})(HeaderDrawer);
Giang Tran committed
81 82 83

const styles = StyleSheet.create({
  img: {
Giang Tran committed
84
    height: 95,
Giang Tran committed
85 86
    width: '100%',

Giang Tran committed
87
    paddingTop: 30,
Giang Tran committed
88 89
  },
  headerContainer: {
Giang Tran committed
90
    height: 40,
Giang Tran committed
91
    paddingTop: 10,
Giang Tran committed
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
    width: '100%',
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 20,
    justifyContent: 'space-between',
  },
  imgIcon: {
    width: 25,
    height: 20,
  },
  txtTitle: {
    fontSize: getFontXD(52),
    color: R.colors.white,
    fontWeight: 'bold',
  },
Giang Tran committed
107 108 109
  container: {
    backgroundColor: 'white',
    height: '100%',
Giang Tran committed
110
    width: WIDTHXD(780),
Giang Tran committed
111 112
    borderRadius: 20,
  },
Giang Tran committed
113
});