A React native code snippet generated by AI from a Figma mock

PayFrom.tsx

// generted by Figma MCP and Claude Sonnet 4.5 in Copilot

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  Image,
} from 'react-native';

// Asset URLs (you'll need to download these and add to your project)
const ASSETS = {
  statusBarRight: 'https://www.figma.com/api/mcp/asset/4694678f-6114-4ecc-934f-aa6e97eba8d4',
  statusBarLeft: 'https://www.figma.com/api/mcp/asset/2e43d5ba-f8d9-4acd-b032-5474ce6d7a3a',
  progressComplete: 'https://www.figma.com/api/mcp/asset/3f69a36a-149f-4779-b246-712c1bbf1166',
  progressActive: 'https://www.figma.com/api/mcp/asset/b86b9711-0760-4498-9de6-1864f935a1ee',
  progressLine: 'https://www.figma.com/api/mcp/asset/f441b73c-31ed-4aaf-aaa7-748f38421b5b',
  progressDisabled: 'https://www.figma.com/api/mcp/asset/1eb6dced-d976-4640-867c-bd47249d63b1',
};

interface AccountTileProps {
  icon: string;
  iconBgColor: string;
  iconColor: string;
  title: string;
  subtitle: string;
  onPress?: () => void;
  showChevron?: boolean;
  selected?: boolean;
}

const AccountTile: React.FC<AccountTileProps> = ({
  icon,
  iconBgColor,
  iconColor,
  title,
  subtitle,
  onPress,
  showChevron = false,
  selected = false,
}) => {
  const Wrapper = onPress ? TouchableOpacity : View;
  
  return (
    <Wrapper
      style={[styles.tile, selected && styles.tileSelected]}
      onPress={onPress}
    >
      <View style={styles.tileContent}>
        <View style={[styles.iconBubble, { backgroundColor: iconBgColor }]}>
          <Text style={[styles.icon, { color: iconColor }]}>{icon}</Text>
        </View>
        <View style={styles.tileText}>
          <Text style={styles.tileTitle}>{title}</Text>
          <Text style={styles.tileSubtitle}>{subtitle}</Text>
        </View>
      </View>
      {showChevron && (
        <Text style={styles.chevron}>›</Text>
      )}
    </Wrapper>
  );
};

const ProgressBar: React.FC<{ currentStep: number; totalSteps: number }> = ({
  currentStep,
  totalSteps,
}) => {
  return (
    <View style={styles.progressContainer}>
      <View style={styles.progressBubbles}>
        {Array.from({ length: totalSteps }).map((_, index) => {
          const step = index + 1;
          const isComplete = step < currentStep;
          const isCurrent = step === currentStep;
          
          return (
            <React.Fragment key={step}>
              {index > 0 && (
                <View style={styles.progressLineContainer}>
                  <View
                    style={[
                      styles.progressLine,
                      isComplete && styles.progressLineActive,
                    ]}
                  />
                </View>
              )}
              <View style={styles.progressBubble}>
                {isComplete ? (
                  <Text style={styles.progressCheckmark}>✓</Text>
                ) : (
                  <View
                    style={[
                      styles.progressCircle,
                      isCurrent && styles.progressCircleActive,
                    ]}
                  >
                    <Text
                      style={[
                        styles.progressNumber,
                        !isCurrent && styles.progressNumberDisabled,
                      ]}
                    >
                      {step}
                    </Text>
                  </View>
                )}
              </View>
            </React.Fragment>
          );
        })}
      </View>
    </View>
  );
};

export default function PayFromScreen() {
  const [selectedAccount, setSelectedAccount] = React.useState<string>('pnc');

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton}>
          <Text style={styles.backIcon}>‹</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Pay From</Text>
      </View>

      {/* Progress Bar */}
      <View style={styles.progressSection}>
        <ProgressBar currentStep={3} totalSteps={4} />
      </View>

      {/* Content */}
      <View style={styles.content}>
        {/* PNC Bank Account - Selected */}
        <AccountTile
          icon="💰"
          iconBgColor="#D9F2E8"
          iconColor="#007459"
          title="PNC Bank...5910"
          subtitle="Checking"
          selected={selectedAccount === 'pnc'}
          onPress={() => setSelectedAccount('pnc')}
        />

        {/* Chase Account */}
        <AccountTile
          icon="💰"
          iconBgColor="#D9F2E8"
          iconColor="#007459"
          title="Chase...1234"
          subtitle="Checking"
          selected={selectedAccount === 'chase'}
          onPress={() => setSelectedAccount('chase')}
        />

        {/* Add Bank Account */}
        <AccountTile
          icon="+"
          iconBgColor="#DBF2FF"
          iconColor="#005CC4"
          title="Add a Bank Account"
          subtitle="Connect your account"
          showChevron
          onPress={() => console.log('Add bank account')}
        />
      </View>

      {/* Bottom CTA Buttons */}
      <View style={styles.ctaContainer}>
        <TouchableOpacity
          style={[styles.button, styles.buttonDisabled]}
          disabled
        >
          <Text style={styles.buttonTextDisabled}>Next</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={[styles.button, styles.buttonOutline]}>
          <Text style={styles.buttonTextOutline}>Go Back</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  
  // Header
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 24,
    paddingTop: 52,
    paddingBottom: 16,
    gap: 8,
  },
  backButton: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backIcon: {
    fontSize: 16,
    color: '#005CC4',
  },
  headerTitle: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '600',
    fontSize: 24,
    lineHeight: 32,
    color: '#122C26',
    letterSpacing: -0.5,
    flex: 1,
  },

  // Progress Bar
  progressSection: {
    paddingHorizontal: 24,
    paddingVertical: 16,
  },
  progressContainer: {
    width: '100%',
  },
  progressBubbles: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressBubble: {
    width: 21,
    height: 21,
    justifyContent: 'center',
    alignItems: 'center',
  },
  progressCheckmark: {
    fontSize: 10.5,
    color: '#007459',
  },
  progressCircle: {
    width: 21,
    height: 21,
    borderRadius: 10.5,
    backgroundColor: '#CBD8D6',
    justifyContent: 'center',
    alignItems: 'center',
  },
  progressCircleActive: {
    backgroundColor: '#007459',
  },
  progressNumber: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '600',
    fontSize: 12.6,
    lineHeight: 12.6,
    color: '#FFFFFF',
  },
  progressNumberDisabled: {
    color: '#FFFFFF',
  },
  progressLineContainer: {
    flex: 1,
    height: 3,
    justifyContent: 'center',
  },
  progressLine: {
    height: 3,
    backgroundColor: '#CBD8D6',
  },
  progressLineActive: {
    backgroundColor: '#007459',
  },

  // Content
  content: {
    paddingHorizontal: 24,
    gap: 8,
  },

  // Tile
  tile: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#CBD8D6',
    borderRadius: 8,
    gap: 16,
  },
  tileSelected: {
    borderColor: '#007459',
    borderWidth: 2,
  },
  tileContent: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  iconBubble: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    fontSize: 16,
  },
  tileText: {
    flex: 1,
    gap: 8,
  },
  tileTitle: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '600',
    fontSize: 16,
    lineHeight: 18,
    color: '#122C26',
  },
  tileSubtitle: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '450',
    fontSize: 14,
    lineHeight: 20,
    color: '#677370',
  },
  chevron: {
    fontSize: 24,
    color: '#005CC4',
  },

  // CTA Buttons
  ctaContainer: {
    position: 'absolute',
    bottom: 32,
    left: 24,
    right: 24,
    gap: 16,
  },
  button: {
    paddingVertical: 16,
    paddingHorizontal: 48,
    borderRadius: 26.5,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 56,
  },
  buttonDisabled: {
    backgroundColor: '#D6DAD7',
  },
  buttonOutline: {
    backgroundColor: '#FFFFFF',
    borderWidth: 3,
    borderColor: '#005CC4',
  },
  buttonTextDisabled: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '600',
    fontSize: 18,
    lineHeight: 22.5,
    color: '#898989',
  },
  buttonTextOutline: {
    fontFamily: 'Suisse Int\'l',
    fontWeight: '600',
    fontSize: 18,
    lineHeight: 22.5,
    color: '#005CC4',
  },
});