import React, {Component, useState} from 'react'; import { View, Text, TouchableOpacity, StyleSheet, Button, TouchableWithoutFeedback, Image, } from 'react-native'; import Icon from 'react-native-vector-icons/Entypo'; import R from '../assets/R'; import {HEIGHTXD, WIDTHXD, getFontXD, WIDTHXDICON} from '../Config/Functions'; import Modal from 'react-native-modal'; import {useNavigation} from '@react-navigation/native'; import { WITHDRAW, DEPOSIT, TRANSFER, CHOOSEMETHOD, WALLET, WALLETWITHDRAW, } from '../routers/ScreenNames'; import AppText from '../components/AppText'; const PlussModal = (props) => { const [isModalVisible, setModalVisible] = useState(false); const navigate = useNavigation(); const toggleModal = () => { setModalVisible(!isModalVisible); }; return ( <View style={styles.container}> <View style={styles.wraper}> <TouchableOpacity onPress={toggleModal} style={styles.btn}> <Icon name={'plus'} size={HEIGHTXD(60)} color={R.colors.white} /> </TouchableOpacity> </View> <Modal style={{margin: 0}} isVisible={isModalVisible}> <View style={{flex: 1}}> <TouchableWithoutFeedback onPress={toggleModal}> <View style={{flex: 1}}></View> </TouchableWithoutFeedback> <View style={styles.footer}> <TouchableOpacity onPress={() => { navigate.navigate(WALLET); toggleModal(); }} style={styles.wraper1}> <Image style={styles.imgIcon} source={R.images.iconWallet1} /> <AppText i18nKey={'Wallet'} style={styles.txt}></AppText> </TouchableOpacity> <TouchableOpacity onPress={() => { navigate.navigate(CHOOSEMETHOD); toggleModal(); }} style={styles.wraper1}> <Image style={styles.imgIcon} source={R.images.iconRecharge} /> <AppText i18nKey={'Deposit'} style={styles.txt}></AppText> </TouchableOpacity> <TouchableOpacity onPress={() => { navigate.navigate(WALLETWITHDRAW); toggleModal(); }} style={styles.wraper1}> <Image style={styles.imgIcon} source={R.images.iconWithdrawal} /> <AppText i18nKey={'Withdraw'} style={styles.txt}></AppText> </TouchableOpacity> <TouchableOpacity onPress={() => { navigate.navigate(TRANSFER); toggleModal(); }} style={styles.wraper1}> <Image style={styles.imgIcon} source={R.images.iconTransfer} /> <AppText i18nKey={'Transfer'} style={styles.txt}></AppText> </TouchableOpacity> </View> </View> </Modal> </View> ); }; export default PlussModal; const styles = StyleSheet.create({ btn: { backgroundColor: R.colors.main, width: WIDTHXDICON(135), height: WIDTHXDICON(135), justifyContent: 'center', alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 3, borderRadius: WIDTHXDICON(144), }, container: { flex: 1, }, wraper: { backgroundColor: R.colors.white, width: WIDTHXDICON(144), height: WIDTHXDICON(144), justifyContent: 'center', alignItems: 'center', position: 'absolute', top: -HEIGHTXD(45), left: 15, borderRadius: WIDTHXDICON(90), }, 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', width: 100, }, txt: { fontSize: getFontXD(36), color: R.colors.txtMain, marginTop: 5, }, });