Wallet

App.js

import React from 'react';
import { View, Text, StyleSheet, StatusBar, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import Constants from 'expo-constants';
import { SimpleLineIcons, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';


export default function App() {
  return (
    <View  style={styles.container}>
      <StatusBar barStyle='light-content' backgroundColor='#C01351' />

      <View style={styles.header}>
        <Ionicons name='ios-arrow-back' size={25} color='#FFF' />
        <Text style={styles.textHeader}>WALLET</Text>
        <MaterialCommunityIcons name='cash-usd' size={25} color='#FFF' />
      </View>

      <View style={styles.wallet}>
        <SimpleLineIcons name='wallet' size={25} color='#FD84B0' />
        <Text style={styles.walletValue}>$ 4,500</Text>
        <Text style={styles.walletDescription}>Wallet Amount</Text>
      </View>

      <View style={styles.payment}>
        <View style={styles.update}>
          <Text style={styles.textUpdate}>UPDATE  PAYMENT METHOD  </Text>
        </View>
        <View style={styles.myWallet}>
          <View style={styles.description}>
            <View style={styles.value}>
              <Text style={styles.textValue}>983</Text>
              <Text style={styles.textDescription}>Total Hours</Text>
            </View>
            <View style={styles.value}>
              <Text style={styles.textValue}>24K</Text>
              <Text style={styles.textDescription}>Total Earned</Text>
            </View>
          </View>
        </View>

        <View style={styles.product}>
          <View style={styles.details}>
            <View style={styles.products}>
              <MaterialCommunityIcons name='plus-circle-outline' size={22} color='#C9CFD3' />
              <View style={styles.productDescription}>
                <Text style={styles.productValue}>$ 1,750</Text>
                <Text style={styles.textProduct}>Amazone Camp...</Text>
              </View>
              <TouchableOpacity>
                <View style={styles.buttonRound}>  
                  <MaterialCommunityIcons name='arrow-right' size={22} color='#C9CFD3' />
                </View>
              </TouchableOpacity>  
            </View>
            <View style={styles.products}>
              <MaterialCommunityIcons name='plus-circle-outline' size={22} color='#C9CFD3' />
              <View style={styles.productDescription}>
                <Text style={styles.productValue}>$ 820</Text>
                <Text style={styles.textProduct}>Extention </Text>
              </View>
              <TouchableOpacity>
                <View style={styles.buttonRound}>  
                  <MaterialCommunityIcons name='arrow-right' size={22} color='#C9CFD3' />
                </View>
              </TouchableOpacity>  
            </View>
          </View>
        </View>
      </View>
      <View style={styles.actions}>
        <View style={styles.action1}>
          <TouchableWithoutFeedback>
            <View style={styles.actionButton}>
              <Text style={styles.textAction}>MY WALLET</Text>
            </View>
          </TouchableWithoutFeedback>
          <Svg width='32%' height='53.219'>
            <Path
              d="M54.451 0C23.513 4.95 31.557 53.832 0 53.213V0z"
              fill="#fff"
            />
        </Svg>   
        </View>
        <View style={styles.action2}>
          <Svg width='32%' height='53.219'>
            <Path
              d="M0 0c30.938 4.95 22.894 53.832 54.451 53.213V0z"
              fill="#CF1F58"
            />
          </Svg>
          <TouchableWithoutFeedback>
            <View style={styles.actionButton2}>
              <Text style={styles.textAction2}>MY AWARDS</Text>
            </View>
          </TouchableWithoutFeedback>
        </View> 
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    paddingHorizontal: 12,
    backgroundColor: '#C01351',
  },

  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
  },

  textHeader: {
    color: '#FFF',
    fontSize: 14,
    fontWeight: 'bold'
  },
  
  wallet: {
    paddingTop: 40,
    alignItems: 'center',
  },

  walletValue: {
    paddingTop: 18,
    fontSize: 63,
    color: '#FFF'
  },
  walletDescription: {
    fontSize: 16,
    color: '#FD84B0'
  },

  payment: {
    paddingTop: 40,
    alignItems: 'center',
  },

  update: {
    height: 66,
    width: '95%',
    backgroundColor: '#D6215D',
    borderTopLeftRadius: 30,
    borderTopEndRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    zIndex: 1
  },

  textUpdate: {
    color: '#FFF',
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 15
  },

  myWallet: {
    width: '100%',
    backgroundColor: '#FFF',
    borderTopLeftRadius: 30,
    borderTopEndRadius: 30,
    zIndex: 3,
    marginTop: -15,
  },

  description: {
    paddingTop: 38,
    paddingHorizontal: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },

  value: {
    alignItems: 'center'
  },

  textValue: {
    fontSize: 35,
    color: '#27425F',
  },

  textDescription: {
    fontSize: 12,
    color: '#C9CFD3'
  },

  product: {
    height: 160,
    width: '100%',
    backgroundColor: '#FFF',
    zIndex: 3,
    borderBottomEndRadius: 30,
    paddingVertical: 20,
    paddingHorizontal: 40,
  },

  details: {
    height: 120,
    width: '100%',
    borderWidth: 1,
    borderColor: '#C9CFD3',
    borderRadius: 30,
    justifyContent: 'center'
  },

  products: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingTop: 10
  },

  productValue: {
    fontSize: 18,
    color: '#27425F'
  },

  textProduct: {
    fontSize: 14,
    color: '#D6215D'
  },

  buttonRound: {
    height: 30,
    width: 30,
    borderWidth: 1,
    borderColor: '#C9CFD3',
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },

  actions: {
    flexDirection: 'row'
  },

  action1: {
    height: 53.219,
    width: '65%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    zIndex: 2,
  },

  actionButton: {
    backgroundColor: '#FFF',
    height: 53.219,
    width: '68%',
    borderBottomStartRadius: 30,
    justifyContent: 'center',
    alignItems: 'center'
  },

  textAction: {
    fontSize: 12,
    color: '#27425F'
  },

  action2: {
    height: 54,
    width: '50%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    position: 'absolute',
    left: '50%',
    zIndex: 1
  },

  actionButton2: {
    backgroundColor: '#CF1F58',
    marginTop: -27,
    height: 80,
    width: '68%',
    borderBottomEndRadius: 30,
    justifyContent: "flex-end",
    paddingBottom: 20,
    alignItems: 'center'
  },

  textAction2: {
    fontSize: 12,
    color:'#FFF'
  }
});