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

visa.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="31"
   height="24"
   viewBox="0 0 750 471"
   version="1.1"
   id="svg14"
   sodipodi:docname="visa.svg"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
  <metadata
     id="metadata18">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1515"
     inkscape:window-height="928"
     id="namedview16"
     showgrid="false"
     inkscape:zoom="0.384"
     inkscape:cx="83.333333"
     inkscape:cy="235.5"
     inkscape:window-x="2301"
     inkscape:window-y="293"
     inkscape:window-maximized="0"
     inkscape:current-layer="Page-1" />
  
  <desc
     id="desc2">Created with Sketch.</desc>
  <defs
     id="defs4" />
  <g
     id="Page-1"
     stroke="none"
     stroke-width="1"
     fill="none"
     fill-rule="evenodd">
    <g
       id="visa"
       fill-rule="nonzero">
      <rect
         id="Rectangle-1"
         fill="#0E4595"
         x="0"
         y="0"
         width="750"
         height="471"
         rx="40" />
      <polygon
         id="Shape"
         fill="#FFFFFF"
         points="278.1975 334.2275 311.5585 138.4655 364.9175 138.4655 331.5335 334.2275" />
      <path
         d="M524.3075,142.6875 C513.7355,138.7215 497.1715,134.4655 476.4845,134.4655 C423.7605,134.4655 386.6205,161.0165 386.3045,199.0695 C386.0075,227.1985 412.8185,242.8905 433.0585,252.2545 C453.8275,261.8495 460.8105,267.9695 460.7115,276.5375 C460.5795,289.6595 444.1255,295.6545 428.7885,295.6545 C407.4315,295.6545 396.0855,292.6875 378.5625,285.3785 L371.6865,282.2665 L364.1975,326.0905 C376.6605,331.5545 399.7065,336.2895 423.6355,336.5345 C479.7245,336.5345 516.1365,310.2875 516.5505,269.6525 C516.7515,247.3835 502.5355,230.4355 471.7515,216.4645 C453.1005,207.4085 441.6785,201.3655 441.7995,192.1955 C441.7995,184.0585 451.4675,175.3575 472.3565,175.3575 C489.8055,175.0865 502.4445,178.8915 512.2925,182.8575 L517.0745,185.1165 L524.3075,142.6875"
         id="path13"
         fill="#FFFFFF" />
      <path
         d="M661.6145,138.4655 L620.3835,138.4655 C607.6105,138.4655 598.0525,141.9515 592.4425,154.6995 L513.1975,334.1025 L569.2285,334.1025 C569.2285,334.1025 578.3905,309.9805 580.4625,304.6845 C586.5855,304.6845 641.0165,304.7685 648.7985,304.7685 C650.3945,311.6215 655.2905,334.1025 655.2905,334.1025 L704.8025,334.1025 L661.6145,138.4655 Z M596.1975,264.8725 C600.6105,253.5935 617.4565,210.1495 617.4565,210.1495 C617.1415,210.6705 621.8365,198.8155 624.5315,191.4655 L628.1385,208.3435 C628.1385,208.3435 638.3555,255.0725 640.4905,264.8715 L596.1975,264.8715 L596.1975,264.8725 Z"
         id="Path"
         fill="#FFFFFF" />
      <path
         d="M 45.878906 138.46484 L 45.197266 142.53906 C 66.288263 147.64458 85.126465 155.03257 101.61914 164.22461 L 148.96484 333.91602 L 205.41992 333.84961 L 289.42383 138.46484 L 232.90234 138.46484 L 180.66211 271.96094 L 175.0957 244.83203 C 174.83824 244.00408 174.55942 243.17304 174.27344 242.3418 L 156.10742 154.99219 C 152.87742 142.59619 143.50892 138.89684 131.91992 138.46484 L 45.878906 138.46484 z "
         id="path16"
         style="fill:#ffffff;fill-opacity:1" />
    </g>
  </g>
</svg>