Credit card files

App.js

import { StatusBar } from 'expo-status-bar';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style='light' />
      <View style={{ padding: 16, flex: 1 }}>
        <Text style={styles.header}>Card Payment</Text>

        <View style={{ flex: 1 }}>
          <View style={{ marginBottom: 16 }}>
            <Text style={{ color: '#fff' }}>Card number</Text>
            <TextInput style={styles.textInput} />
          </View>
          <View style={{ flexDirection: 'row', gap: 16 }}>
            <View style={{ flex: 1 }}>
              <Text style={{ color: '#fff' }}>Expiry date</Text>
              <TextInput style={styles.textInput} />
            </View>
            <View style={{ flex: 1 }}>
              <Text style={{ color: '#fff' }}>CVV number</Text>
              <TextInput style={styles.textInput} />
            </View>
          </View>
        </View>

        <TouchableOpacity style={styles.button}>
          <Text style={{ color: '#fff' }}>Save</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#010101',
  },
  header: {
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 600,
    marginBottom: 24,
    color: '#fff',
  },
  textInput: {
    borderRadius: 8,
    borderWidth: 2,
    padding: 12,
    backgroundColor: '#fff',
    fontSize: 16,
  },
  button: {
    backgroundColor: '#C51B53',
    borderRadius: 24,
    padding: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

mastercard.svg

<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_843_31117)">
<path d="M5.51073 23.8808V22.2923C5.51073 21.6833 5.1467 21.2863 4.52274 21.2863C4.21082 21.2863 3.87285 21.3921 3.63885 21.7363C3.45695 21.4451 3.19702 21.2863 2.80706 21.2863C2.54701 21.2863 2.28719 21.3656 2.07912 21.6569V21.3392H1.5332V23.8808H2.07912V22.4776C2.07912 22.0276 2.31312 21.8157 2.67715 21.8157C3.04094 21.8157 3.22307 22.054 3.22307 22.4776V23.8808H3.76899V22.4776C3.76899 22.0276 4.02881 21.8157 4.36678 21.8157C4.73081 21.8157 4.9127 22.054 4.9127 22.4776V23.8808H5.51073ZM13.5955 21.3392H12.7117V20.5714H12.1658V21.3392H11.6718V21.8421H12.1656V23.0071C12.1656 23.5897 12.3996 23.9337 13.0236 23.9337C13.2576 23.9337 13.5174 23.8544 13.6995 23.7485L13.5435 23.2719C13.3875 23.3778 13.2056 23.4043 13.0756 23.4043C12.8156 23.4043 12.7117 23.2455 12.7117 22.9806V21.8421H13.5955V21.3392ZM18.2229 21.2861C17.911 21.2861 17.703 21.4451 17.573 21.6569V21.3392H17.0271V23.8808H17.573V22.4512C17.573 22.0276 17.7549 21.7893 18.0928 21.7893C18.1968 21.7893 18.3268 21.8158 18.4308 21.8422L18.5868 21.3128C18.4828 21.2863 18.3268 21.2863 18.2229 21.2863V21.2861ZM11.2299 21.551C10.9698 21.3656 10.6059 21.2863 10.216 21.2863C9.59211 21.2863 9.17622 21.6039 9.17622 22.107C9.17622 22.5306 9.48814 22.7688 10.0341 22.8483L10.294 22.8748C10.58 22.9277 10.7359 23.0071 10.7359 23.1396C10.7359 23.3248 10.528 23.4572 10.164 23.4572C9.80006 23.4572 9.51407 23.3248 9.33206 23.1925L9.07212 23.6161C9.35811 23.8278 9.74807 23.9337 10.1379 23.9337C10.8658 23.9337 11.2819 23.5897 11.2819 23.113C11.2819 22.6629 10.9439 22.4246 10.4239 22.3453L10.164 22.3187C9.92997 22.2922 9.74807 22.2394 9.74807 22.0805C9.74807 21.8952 9.92997 21.7893 10.216 21.7893C10.528 21.7893 10.8399 21.9216 10.9959 22.0011L11.2299 21.551ZM25.7359 21.2863C25.4238 21.2863 25.2159 21.4451 25.0858 21.6569V21.3392H24.5399V23.8808H25.0858V22.4512C25.0858 22.0276 25.2679 21.7893 25.6057 21.7893C25.7098 21.7893 25.8398 21.8158 25.9438 21.8422L26.0998 21.3128C25.9958 21.2863 25.8398 21.2863 25.7359 21.2863ZM18.7688 22.61C18.7688 23.3778 19.2887 23.9337 20.0946 23.9337C20.4585 23.9337 20.7185 23.8544 20.9784 23.6426L20.7185 23.1925C20.5105 23.3513 20.3026 23.4307 20.0686 23.4307C19.6266 23.4307 19.3147 23.113 19.3147 22.61C19.3147 22.1335 19.6266 21.8157 20.0686 21.7893C20.3026 21.7893 20.5105 21.8686 20.7185 22.0276L20.9784 21.5775C20.7185 21.3656 20.4585 21.2863 20.0946 21.2863C19.2887 21.2863 18.7688 21.8422 18.7688 22.61ZM23.8121 22.61V21.3392H23.2662V21.6569C23.0842 21.4187 22.8242 21.2863 22.4863 21.2863C21.7844 21.2863 21.2385 21.8422 21.2385 22.61C21.2385 23.3778 21.7844 23.9337 22.4863 23.9337C22.8502 23.9337 23.1102 23.8014 23.2662 23.5631V23.8808H23.8121V22.61ZM21.8103 22.61C21.8103 22.1599 22.0963 21.7893 22.5642 21.7893C23.0061 21.7893 23.3182 22.1335 23.3182 22.61C23.3182 23.0601 23.0061 23.4307 22.5642 23.4307C22.0963 23.4042 21.8103 23.0601 21.8103 22.61ZM15.2853 21.2863C14.5574 21.2863 14.0374 21.8157 14.0374 22.61C14.0374 23.4043 14.5573 23.9337 15.3113 23.9337C15.6752 23.9337 16.0392 23.8278 16.3252 23.5897L16.0651 23.1925C15.8572 23.3513 15.5972 23.4572 15.3373 23.4572C14.9993 23.4572 14.6614 23.2984 14.5833 22.8482H16.4292V22.6365C16.4552 21.8157 15.9873 21.2863 15.2853 21.2863ZM15.2853 21.7628C15.6232 21.7628 15.8573 21.9747 15.9092 22.3718H14.6094C14.6614 22.0276 14.8954 21.7628 15.2853 21.7628ZM28.8294 22.61V20.3331H28.2835V21.6569C28.1014 21.4187 27.8415 21.2863 27.5035 21.2863C26.8017 21.2863 26.2557 21.8422 26.2557 22.61C26.2557 23.3778 26.8017 23.9337 27.5035 23.9337C27.8676 23.9337 28.1275 23.8014 28.2835 23.5631V23.8808H28.8294V22.61ZM26.8277 22.61C26.8277 22.1599 27.1136 21.7893 27.5816 21.7893C28.0235 21.7893 28.3354 22.1335 28.3354 22.61C28.3354 23.0601 28.0235 23.4307 27.5816 23.4307C27.1136 23.4042 26.8277 23.0601 26.8277 22.61ZM8.57819 22.61V21.3392H8.03227V21.6569C7.85026 21.4187 7.59032 21.2863 7.25235 21.2863C6.55047 21.2863 6.00455 21.8422 6.00455 22.61C6.00455 23.3778 6.55047 23.9337 7.25235 23.9337C7.61637 23.9337 7.87631 23.8014 8.03227 23.5631V23.8808H8.57819V22.61ZM6.55047 22.61C6.55047 22.1599 6.83645 21.7893 7.30434 21.7893C7.74628 21.7893 8.05832 22.1335 8.05832 22.61C8.05832 23.0601 7.74628 23.4307 7.30434 23.4307C6.83645 23.4042 6.55047 23.0601 6.55047 22.61Z" fill="black"/>
<path d="M11.0488 2.03845H19.2376V17.0235H11.0488V2.03845Z" fill="#FF5F00"/>
<path d="M11.5684 9.53113C11.5684 6.48651 12.9722 3.78597 15.1298 2.03855C13.5442 0.767759 11.5425 0 9.35882 0C4.18536 0 0 4.26247 0 9.53113C0 14.7997 4.18536 19.0623 9.3587 19.0623C11.5424 19.0623 13.5441 18.2945 15.1298 17.0236C12.9722 15.3027 11.5684 12.5758 11.5684 9.53113Z" fill="#EB001B"/>
<path d="M30.2861 9.53113C30.2861 14.7997 26.1007 19.0623 20.9274 19.0623C18.7437 19.0623 16.742 18.2945 15.1562 17.0236C17.3399 15.2763 18.7178 12.5758 18.7178 9.53113C18.7178 6.48651 17.3139 3.78597 15.1562 2.03855C16.7419 0.767759 18.7437 0 20.9274 0C26.1007 0 30.2861 4.289 30.2861 9.53113Z" fill="#F79E1B"/>
</g>
<defs>
<clipPath id="clip0_843_31117">
<rect width="30.3158" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

visa.svg