PlussModal.js 3.89 KB
Newer Older
Giang Tran committed
1
import React, {Component, useState} from 'react';
Giang Tran committed
2 3 4 5 6 7 8 9 10
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Button,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
Giang Tran committed
11 12
import Icon from 'react-native-vector-icons/Entypo';
import R from '../assets/R';
Giang Tran committed
13
import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
Giang Tran committed
14 15
import Modal from 'react-native-modal';

Giang Tran committed
16
import {useNavigation} from '@react-navigation/native';
Giang Tran committed
17 18 19 20 21
import {
  WITHDRAW,
  DEPOSIT,
  TRANSFER,
  CHOOSEMETHOD,
Giang Tran committed
22
  WALLET,
Giang Tran committed
23
  WALLETWITHDRAW,
Giang Tran committed
24
} from '../routers/ScreenNames';
Giang Tran committed
25

Giang Tran committed
26 27 28
const PlussModal = (props) => {
  const [isModalVisible, setModalVisible] = useState(false);

Giang Tran committed
29 30
  const navigate = useNavigation();

Giang Tran committed
31 32 33 34 35 36 37 38 39 40 41 42
  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>

Giang Tran committed
43
      <Modal style={{margin: 0}} isVisible={isModalVisible}>
Giang Tran committed
44
        <View style={{flex: 1}}>
Giang Tran committed
45 46 47 48
          <TouchableWithoutFeedback onPress={toggleModal}>
            <View style={{flex: 1}}></View>
          </TouchableWithoutFeedback>
          <View style={styles.footer}>
Giang Tran committed
49 50 51 52 53 54 55 56 57
            <TouchableOpacity
              onPress={() => {
                navigate.navigate(WALLET);
                toggleModal();
              }}
              style={styles.wraper1}>
              <Image style={styles.imgIcon} source={R.images.iconWallet1} />
              <Text style={styles.txt}>Ví tin</Text>
            </TouchableOpacity>
Giang Tran committed
58 59
            <TouchableOpacity
              onPress={() => {
Giang Tran committed
60
                navigate.navigate(CHOOSEMETHOD);
Giang Tran committed
61 62 63
                toggleModal();
              }}
              style={styles.wraper1}>
Giang Tran committed
64
              <Image style={styles.imgIcon} source={R.images.iconRecharge} />
Giang Tran committed
65 66 67 68
              <Text style={styles.txt}>Np tin</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
Giang Tran committed
69
                navigate.navigate(WALLETWITHDRAW);
Giang Tran committed
70 71 72
                toggleModal();
              }}
              style={styles.wraper1}>
Giang Tran committed
73
              <Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
Giang Tran committed
74 75 76 77 78 79 80 81 82 83 84 85
              <Text style={styles.txt}>Rút tin</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                navigate.navigate(TRANSFER);
                toggleModal();
              }}
              style={styles.wraper1}>
              <Image style={styles.imgIcon} source={R.images.iconTransfer} />
              <Text style={styles.txt}>Chuyn khon</Text>
            </TouchableOpacity>
          </View>
Giang Tran committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
        </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,
Giang Tran committed
116 117
    width: WIDTHXD(160),
    height: WIDTHXD(160),
Giang Tran committed
118 119 120 121 122 123 124
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: -20,
    left: 15,
    borderRadius: WIDTHXD(90),
  },
Giang Tran committed
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
  footer: {
    backgroundColor: 'white',
    height: HEIGHTXD(400),
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    justifyContent: 'space-around',
    alignItems: 'center',
    flexDirection: 'row',
  },
  imgIcon: {
    width: WIDTHXD(150),
    height: HEIGHTXD(150),
    resizeMode: 'contain',
  },
  wraper1: {
    justifyContent: 'center',
    alignItems: 'center',
Giang Tran committed
142
    width: 100,
Giang Tran committed
143 144 145 146 147 148
  },
  txt: {
    fontSize: getFontXD(36),
    color: R.colors.txtMain,
    marginTop: 5,
  },
Giang Tran committed
149
});