ilink-world/screens/wallet/WalletDetail.js

853 lines
33 KiB
JavaScript
Raw Normal View History

2020-04-11 22:33:59 +00:00
import React, { Component } from 'react';
2020-04-28 09:22:36 +00:00
import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
2020-04-11 22:33:59 +00:00
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import * as Utils from '../../utils/DeviceUtils';
2020-04-20 10:43:01 +00:00
import Icons from 'react-native-vector-icons/Ionicons'
2020-04-11 22:33:59 +00:00
import { Images } from '../../config/Images';
2020-04-17 22:03:04 +00:00
import CustomButton from '../../components/CustomButton';
2020-04-11 22:33:59 +00:00
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
2020-04-17 22:03:04 +00:00
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput } from "react-native-credit-card-input";
2020-04-20 10:43:01 +00:00
import { Typography, FontWeight } from '../../config/typography';
2020-04-28 09:22:36 +00:00
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
2020-04-20 10:43:01 +00:00
import getWalletActivated from '../../webservice/WalletApi';
2020-04-28 09:22:36 +00:00
import getWalletTransactionHistory from '../../webservice/WalletTransactionHistoryApi';
import transferCommissionAction from '../../webservice/WalletTransferCommission';
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
2020-04-20 10:43:01 +00:00
import { baseUrl } from '../../webservice/IlinkConstants';
let moment = require('moment-timezone');
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
2020-04-11 22:33:59 +00:00
2020-04-24 15:11:08 +00:00
let route = require('./../../route.json');
2020-04-20 10:43:01 +00:00
let slugify = require('slugify');
2020-04-17 22:03:04 +00:00
require('../../utils/Translations');
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
class WalletDetail extends Component {
2020-04-11 22:33:59 +00:00
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [
{ key: 'depot', title: I18n.t('DEPOSIT') },
{ key: 'retrait', title: I18n.t('WITHDRAWAL') }
2020-04-20 10:43:01 +00:00
],
heightHeader: Utils.heightHeader(),
2020-04-28 09:22:36 +00:00
isModalConfirmVisible: false,
wallet: null,
triggerTransferCommission: false
2020-04-11 22:33:59 +00:00
};
2020-04-20 10:43:01 +00:00
slugify.extend({ '+': 'plus' });
2020-04-11 22:33:59 +00:00
this.scrollY = new Animated.Value(0);
2020-04-20 10:43:01 +00:00
this.deltaY = new Animated.Value(0);
2020-04-28 09:22:36 +00:00
this.bgBannerY = new Animated.Value(0);
2020-04-20 10:43:01 +00:00
this.heightImageBanner = Utils.scaleWithPixel(250, 1);
this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
2020-04-17 22:03:04 +00:00
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
2020-04-28 09:22:36 +00:00
if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
let agentId = this.props.navigation.state.params.agentId;
this.props.getWalletActivated(agentId);
}
else {
this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
this.state.wallet = this.props.navigation.state.params.wallet;
}
2020-04-24 15:11:08 +00:00
2020-04-17 22:03:04 +00:00
}
2020-04-20 10:43:01 +00:00
2020-04-17 22:03:04 +00:00
static options(passProps) {
return {
topBar: {
drawBehind: false,
visible: true,
animate: true,
buttonColor: 'white',
background: {
color: 'white',
},
rightButtons: []
},
backButton: {
visible: true,
color: "white"
},
buttonColor: "white",
background: {
color: Color.primaryDarkColor
},
statusBar: {
drawBehind: false,
visible: true,
}
};
}
static navigationOptions = ({ navigation }) => {
return {
2020-04-24 15:11:08 +00:00
//headerTitle: this.props.navigation.state.params.wallet.network,
2020-04-17 22:03:04 +00:00
headerStyle: {
backgroundColor: Color.primaryColor,
paddingTop: 10
},
headerTitleStyle: {
color: "white"
}
}
};
2020-04-28 09:22:36 +00:00
componentDidMount() {
const { result } = this.props;
if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
if (result !== null) {
const wallet = Array.isArray(result) ? result[0] : result;
this.props.getWalletTransactionHistory(wallet.id);
this.setState({
wallet
})
}
}
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
return false;
} else {
return true;
}
}
2020-04-24 15:11:08 +00:00
isEmptyObject = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
return false;
}
2020-04-20 10:43:01 +00:00
}
2020-04-24 15:11:08 +00:00
return JSON.stringify(obj) === JSON.stringify({});
2020-04-20 10:43:01 +00:00
}
getWalletIcon = (wallet) => {
return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
}
getCreationDateToHumanFormat = (date) => {
let re = moment.tz(date, 'Etc/GMT+0').format();
return moment(re).fromNow();
}
2020-04-28 09:22:36 +00:00
2020-04-17 22:03:04 +00:00
updateLangue() {
this.props.navigation.setParams({ name: I18n.t('WALLET') })
this.forceUpdate()
2020-04-11 22:33:59 +00:00
}
handleIndexChange = index => this.setState({ index });
imageScale = () => {
return this.scrollY.interpolate({
inputRange: [0, 100],
outputRange: [1, 0.5],
extrapolate: 'clamp',
});
}
imageTranslateY = () => {
return this.scrollY.interpolate({
inputRange: [0, 100],
outputRange: [-5, 50],
extrapolate: 'clamp',
});
}
2020-04-28 09:22:36 +00:00
bgBannerY = () => {
return this.scrollY.interpolate({
inputRange: [0, 100],
outputRange: [150, 0],
extrapolate: 'clamp',
});
}
refresh = () => {
const { agentId, wallet } = this.props.navigation.state.params;
if (typeof agentId !== "undefined") {
this.props.getWalletActivated(wallet.agentId);
}
else
this.props.getWalletActivated(agentId);
}
2020-04-20 10:43:01 +00:00
2020-04-11 22:33:59 +00:00
renderTabBar = props => (
<TabBar
{...props}
scrollEnabled
indicatorStyle={[styles.indicator, { backgroundColor: Color.primaryColor }]}
style={[styles.tabBar, { backgroundColor: Color.containerBackgroundColor }]}
inactiveColor={Color.dividerColor}
activeColor={Color.grayColor}
tabStyle={styles.tab}
renderLabel={({ route, focused, color }) => (
<View style={{
flex: 1,
width: Utils.getWidthDevice() / 2,
alignItems: 'center'
}}>
2020-04-20 10:43:01 +00:00
<Text style={Typography.headline} style={{ color }}>
2020-04-11 22:33:59 +00:00
{
(route.key === 'depot') ?
(<Icon name='arrow-bottom-right'
color={color} size={20} />)
:
(<Icon name='arrow-top-left'
color={color} size={20} />)
}
{` ${route.title}`}
2020-04-20 10:43:01 +00:00
</Text>
2020-04-11 22:33:59 +00:00
</View>
)}
/>
);
2020-04-20 10:43:01 +00:00
renderHeader = (wallet) => (
<View style={[
styles.containField,
{
backgroundColor: Color.cardBackgroundColor,
zIndex: 11,
shadowColor: Color.borderColor,
borderColor: Color.borderColor,
2020-04-28 09:22:36 +00:00
2020-04-20 10:43:01 +00:00
}
]}>
<View style={[styles.contentLeftItem]}>
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
</View>
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
}}>
<Animated.Image
source={{ uri: this.getWalletIcon(wallet) }}
style={{
width: 120,
height: 120,
borderRadius: 60,
position: 'absolute',
alignSelf: 'center',
backgroundColor: Color.whiteColor,
bottom: 70,
transform: [{
scale: this.imageScale()
},
{
translateY: this.imageTranslateY()
}]
}} />
<View style={{
marginTop: 1, flex: 1,
alignItems: 'center',
justifyContent: 'flex-end'
}}>
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
2020-04-28 09:22:36 +00:00
<Tag primary style={styles.tagFollow}
onPress={() => {
this.renderDialogConfirmTransferCommission()
}}>
2020-04-20 10:43:01 +00:00
{I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
</Tag>
</View>
</View>
<View style={styles.contentLeftItem}>
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{this.getCreationDateToHumanFormat(wallet.created_date)}</Text>
</View>
</View>
);
renderLoader = () => {
2020-04-11 22:33:59 +00:00
return (
2020-04-20 10:43:01 +00:00
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{Platform.OS === 'android'
?
(
<>
<ProgressBarAndroid />
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
) :
<>
<ActivityIndicator size="large" color={'#ccc'} />
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
}
</View>
)
}
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
renderAccountDetail = (wallet) => (
<View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={[
styles.circlePoint,
{ backgroundColor: Color.primaryColor },
]}>
<Icons name='md-wallet'
size={28}
color={Color.whiteColor}
/>
</View>
<View>
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
</Text>
<Text style={[Typography.body2]}>{wallet.balance_princ}</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={[
styles.circlePoint,
{ backgroundColor: Color.primaryColor },
]}>
<Icons name='md-cash'
size={28}
color={Color.whiteColor}
/>
</View>
<View>
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('COMMISSION_ACCOUNT_TITLE')}
</Text>
<Text style={Typography.body2}>{wallet.balance_com}</Text>
</View>
</View>
</View>
);
2020-04-24 15:11:08 +00:00
renderDetailWallet = (walletParam) => {
const wallet = Array.isArray(walletParam) ? walletParam[0] : walletParam;
2020-04-20 10:43:01 +00:00
return (
2020-04-11 22:33:59 +00:00
2020-04-24 15:11:08 +00:00
!this.isEmptyObject(wallet) ?
2020-04-28 09:22:36 +00:00
(<>
{this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
{this.props.loading ?
<View
style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.props.loading ? responsiveWidth(100) : 0, height: this.props.loading ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, color: 'white', fontWeight: 'bold' }}>{I18n.t("LOADING_DOTS")}</Text>
</View> : null
}
<View
style={styles.container}>
<Animated.View style={{
position: 'absolute',
width: "100%",
zIndex: 1,
backgroundColor: Color.primaryColor,
height: 150
}} />
<ScrollView style={{
paddingHorizontal: 20, position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
}}
scrollEventThrottle={8}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: { y: this.scrollY },
},
2020-04-24 15:11:08 +00:00
},
2020-04-28 09:22:36 +00:00
])}>
<View style={{ marginTop: 80, }}>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
{this.renderHeader(wallet)}
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View
style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
{this.renderAccountDetail(wallet)}
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTIONS')}
</Text>
</View>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View style={styles.transactionContainer}>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View style={[styles.containerTouch]}>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<TouchableOpacity style={styles.contain}
onPress={() => this.props.navigation.push(route.walletDepot, {
wallet,
onGoBack: () => this.refresh(),
})}
activeOpacity={0.9}>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<Icon name='arrow-bottom-right'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View style={[styles.content]}>
2020-04-24 15:11:08 +00:00
2020-04-28 09:22:36 +00:00
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('DEPOSIT')}
</Text>
</View>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('DEPOSIT_DESCRIPTION')}
</Text>
</View>
2020-04-24 15:11:08 +00:00
</View>
2020-04-28 09:22:36 +00:00
</TouchableOpacity>
</View>
<View style={styles.containerTouch}>
<TouchableOpacity style={styles.contain}
onPress={() => this.props.navigation.push(route.walletRetrait, {
wallet,
onGoBack: () => this.refresh(),
})}
activeOpacity={0.9}>
<Icon name='arrow-top-left'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('WITHDRAWAL')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
2020-04-24 15:11:08 +00:00
</View>
2020-04-28 09:22:36 +00:00
</TouchableOpacity>
</View>
2020-04-24 15:11:08 +00:00
</View>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
{this.renderHistoryTransaction()}
</View>
2020-04-24 15:11:08 +00:00
</View>
2020-04-20 10:43:01 +00:00
2020-04-28 09:22:36 +00:00
</ScrollView>
</View>
</>)
2020-04-24 15:11:08 +00:00
:
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
2020-04-11 22:33:59 +00:00
</View>
2020-04-24 15:11:08 +00:00
)
2020-04-20 10:43:01 +00:00
)
}
2020-04-28 09:22:36 +00:00
renderHistoryTransactionItem = (item) => {
let re = moment.tz(item.date, 'Etc/GMT+0').format();
let date = moment(re).fromNow();
return (
<View
key={item.id}
style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={styles.iconContent}>
<Icon name={item.type === 'credit' ? 'arrow-top-left' : 'arrow-bottom-right'}
color={Color.primaryColor} size={20} />
</View>
<View>
{item.type === 'credit' ? (
<Text style={Typography.body1}>{I18n.t('WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
) :
(
<Text style={Typography.body1}>{I18n.t('DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
)
}
<Text style={[Typography.footnote, Color.grayColor]} style={{ marginTop: 5 }}>
{date}
</Text>
</View>
</View>
</View>
);
}
renderHistoryTransactionList = () => {
const { resultTransaction, errorTransaction } = this.props;
if (errorTransaction !== null) {
if (typeof errorTransaction.data !== 'undefined') {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{errorTransaction.data.error}</Text>
</View>
)
}
else {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{errorTransaction}</Text>
</View>
)
}
}
if (resultTransaction !== null) {
if (resultTransaction.response !== null) {
return (
Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
(
resultTransaction.response.map((item, ) => (
this.renderHistoryTransactionItem(item)
))
) :
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
</View>
)
)
}
}
}
renderHistoryTransaction = () => {
return (
<>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTION_HISTORY')}
</Text>
</View>
<ScrollView style={styles.transactionContainer}>
{
this.props.loadingTransaction ?
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{Platform.OS === 'android'
?
(
<>
<ProgressBarAndroid />
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
) :
<>
<ActivityIndicator size="large" color={'#ccc'} />
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
}
</View>
) : this.renderHistoryTransactionList()
}
</ScrollView>
</>
)
}
renderDialogConfirmTransferCommission = () => {
Alert.alert(
I18n.t("CONFIRM"),
I18n.t('CONFIRM_TRANSFER_COMMISSION')
,
[
{
text: I18n.t("NO"), onPress: () => {
}
},
{
text: I18n.t("YES"), onPress: () => {
this.props.transferCommissionAction(this.state.wallet.id);
this.refresh();
this.setState({
triggerTransferCommission: !this.state.triggerTransferCommission
});
}
}
],
{ cancelable: false }
)
}
renderDialogTransferCommissionResponse = () => {
const { resultTransferCommission, errorTransferCommission } = this.props;
if (errorTransferCommission !== null) {
if (typeof errorTransferCommission.data !== 'undefined') {
Alert.alert(
I18n.t("ERROR_LABLE"),
errorTransferCommission.data.error
,
[
{
text: I18n.t("OK"), onPress: () => {
}
}
],
{ cancelable: false }
)
}
else {
Alert.alert(
I18n.t("ERROR_LABLE"),
errorTransferCommission
,
[
{
text: I18n.t("OK"), onPress: () => {
}
}
],
{ cancelable: false }
)
}
}
if (resultTransferCommission !== null) {
if (resultTransferCommission.response !== null) {
Alert.alert(
I18n.t("SUCCESS"),
resultTransferCommission.response,
[
{
text: I18n.t("OK"), onPress: () => {
}
}
],
{ cancelable: false }
)
}
}
}
2020-04-20 10:43:01 +00:00
render() {
2020-04-24 15:11:08 +00:00
console.log('Wallet Detail props', this.props);
2020-04-20 10:43:01 +00:00
const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
2020-04-24 15:11:08 +00:00
console.log("WALLET PARAMS", this.props.navigation.state.params.wallet);
2020-04-20 10:43:01 +00:00
return (
!isHomeRootView ?
this.renderDetailWallet(this.props.navigation.state.params.wallet)
:
2020-04-28 09:22:36 +00:00
((this.props.loading || this.props.loadingTransferCommission) ?
2020-04-20 10:43:01 +00:00
this.renderLoader() :
2020-04-24 15:11:08 +00:00
(
this.props.result !== null &&
this.renderDetailWallet(this.props.result.response)
)
2020-04-20 10:43:01 +00:00
)
2020-04-11 22:33:59 +00:00
);
}
}
2020-04-20 10:43:01 +00:00
const mapStateToProps = state => ({
loading: state.walletReducer.loading,
result: state.walletReducer.result,
2020-04-28 09:22:36 +00:00
error: state.walletReducer.error,
loadingTransaction: state.walletHistoryReducer.loadingTransaction,
resultTransaction: state.walletHistoryReducer.resultTransaction,
errorTransaction: state.walletHistoryReducer.errorTransaction,
loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
2020-04-20 10:43:01 +00:00
});
const mapDispatchToProps = dispatch => bindActionCreators({
2020-04-28 09:22:36 +00:00
getWalletActivated,
getWalletTransactionHistory,
transferCommissionAction
2020-04-20 10:43:01 +00:00
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
2020-04-11 22:33:59 +00:00
const styles = StyleSheet.create({
container: {
flex: 1,
2020-04-17 22:03:04 +00:00
backgroundColor: Color.containerBackgroundColor
2020-04-11 22:33:59 +00:00
},
indicator: {
height: 2
},
tab: {
width: Utils.getWidthDevice() / 2
},
tabbar: {
height: 40
},
2020-04-20 10:43:01 +00:00
imgBanner: {
width: '100%',
height: 250,
position: 'absolute',
},
2020-04-11 22:33:59 +00:00
containField: {
2020-04-20 10:43:01 +00:00
padding: 10,
marginBottom: 20,
borderWidth: 0.5,
shadowOffset: { width: 1.5, height: 1.5 },
shadowOpacity: 1.0,
elevation: 5,
2020-04-11 22:33:59 +00:00
flexDirection: "row",
height: 140,
borderRadius: 10
},
2020-04-28 09:22:36 +00:00
paymentItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
borderBottomWidth: 1,
paddingVertical: 5,
width: responsiveWidth(100),
marginBottom: 15
},
iconContent: {
width: 60,
marginRight: 10,
alignItems: "center"
},
2020-04-11 22:33:59 +00:00
contentLeftItem: {
flex: 1,
paddingTop: 40,
paddingLeft: 10,
paddingRight: 10,
alignItems: "center"
},
tagFollow: { width: 150, margin: 10 },
profileItem: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingBottom: 20,
paddingTop: 20
2020-04-17 22:03:04 +00:00
},
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
2020-04-28 09:22:36 +00:00
paddingVertical: 10,
marginTop: 5
2020-04-20 10:43:01 +00:00
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 0.5,
},
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
transactionContainer: {
flexDirection: 'row',
2020-04-28 09:22:36 +00:00
paddingTop: 10,
2020-04-20 10:43:01 +00:00
},
containerTouch: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
shadowColor: Color.borderColor,
borderColor: Color.borderColor,
borderWidth: 0.5,
shadowOffset: { width: 1.5, height: 1.5 },
shadowOpacity: 1.0,
elevation: 5,
borderRadius: 10,
backgroundColor: Color.cardBackgroundColor
},
contain: {
flexDirection: 'row',
justifyContent: 'space-between',
},
imageBanner: {
marginTop: 15,
marginLeft: 5,
width: Utils.scaleWithPixel(30),
height: Utils.scaleWithPixel(30)
},
content: {
2020-04-28 09:22:36 +00:00
height: Utils.scaleWithPixel(60),
2020-04-20 10:43:01 +00:00
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 5,
2020-04-11 22:33:59 +00:00
}
})