PlussModal.js 3.99 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
import AppText from '../components/AppText';
Giang Tran committed
26

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

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

Giang Tran committed
32 33 34 35 36 37 38 39 40 41 42 43
  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
44
      <Modal style={{margin: 0}} isVisible={isModalVisible}>
Giang Tran committed
45
        <View style={{flex: 1}}>
Giang Tran committed
46 47 48 49
          <TouchableWithoutFeedback onPress={toggleModal}>
            <View style={{flex: 1}}></View>
          </TouchableWithoutFeedback>
          <View style={styles.footer}>
Giang Tran committed
50 51 52 53 54 55 56
            <TouchableOpacity
              onPress={() => {
                navigate.navigate(WALLET);
                toggleModal();
              }}
              style={styles.wraper1}>
              <Image style={styles.imgIcon} source={R.images.iconWallet1} />
Giang Tran committed
57
              <AppText i18nKey={'Wallet'} style={styles.txt}></AppText>
Giang Tran committed
58
            </TouchableOpacity>
Giang Tran committed
59 60
            <TouchableOpacity
              onPress={() => {
Giang Tran committed
61
                navigate.navigate(CHOOSEMETHOD);
Giang Tran committed
62 63 64
                toggleModal();
              }}
              style={styles.wraper1}>
Giang Tran committed
65
              <Image style={styles.imgIcon} source={R.images.iconRecharge} />
Giang Tran committed
66
              <AppText i18nKey={'Deposit'} style={styles.txt}></AppText>
Giang Tran committed
67 68 69
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
Giang Tran committed
70
                navigate.navigate(WALLETWITHDRAW);
Giang Tran committed
71 72 73
                toggleModal();
              }}
              style={styles.wraper1}>
Giang Tran committed
74
              <Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
Giang Tran committed
75
              <AppText i18nKey={'Withdraw'} style={styles.txt}></AppText>
Giang Tran committed
76 77 78 79 80 81 82 83
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                navigate.navigate(TRANSFER);
                toggleModal();
              }}
              style={styles.wraper1}>
              <Image style={styles.imgIcon} source={R.images.iconTransfer} />
Giang Tran committed
84
              <AppText i18nKey={'Transfer'} style={styles.txt}></AppText>
Giang Tran committed
85 86
            </TouchableOpacity>
          </View>
Giang Tran committed
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 116
        </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
117 118
    width: WIDTHXD(160),
    height: WIDTHXD(160),
Giang Tran committed
119 120 121 122 123 124 125
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: -20,
    left: 15,
    borderRadius: WIDTHXD(90),
  },
Giang Tran committed
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
  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
143
    width: 100,
Giang Tran committed
144 145 146 147 148 149
  },
  txt: {
    fontSize: getFontXD(36),
    color: R.colors.txtMain,
    marginTop: 5,
  },
Giang Tran committed
150
});