Answers to: Convert the image to React Native Screen

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Native Screen

Asked on 11/20/2025, 4 pageviews

Converted Designs

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';

const PaymentCard = ({ title, subtitle, icon, iconBgColor, onPress }) => (
  <TouchableOpacity onPress={onPress} style={styles.card}>
    <View style={styles.cardLeft}>
      <View style={[styles.iconBg, { backgroundColor: iconBgColor }]}>
        <Text style={styles.icon}>{icon}</Text>
      </View>
      <View style={styles.cardText}>
        <Text style={styles.cardTitle}>{title}</Text>
        {subtitle ? <Text style={styles.cardSubtitle}>{subtitle}</Text> : null}
      </View>
    </View>
    <Text style={styles.chevron}>›</Text>
  </TouchableOpacity>
);

export default function PaymentMethodsScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn}>
          <Text style={styles.backText}>◀</Text>
        </TouchableOpacity>
        <Text style={styles.title}>Payment Methods</Text>
      </View>

<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <Text style={styles.sectionLabel}>WALLETS</Text>

<Text style={styles.sectionLabel}>OTHER PAYMENTS</Text>

<PaymentCard
          title="UPI"
          icon="🏦"
          iconBgColor="#e8f5ff"
          onPress={() => {}}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f2f4f7',
  },
  header: {
    height: 56,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 0.5,
    borderBottomColor: '#e0e0e0',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
  },
  backBtn: {
    position: 'absolute',
    left: 12,
    top: 14,
    padding: 6,
  },
  backText: {
    fontSize: 18,
    color: '#333',
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  content: {
    paddingTop: 72,
    paddingHorizontal: 16,
    paddingBottom: 20,
  },
  sectionLabel: {
    fontSize: 12,
    color: '#7a7a7a',
    marginTop: 16,
    marginBottom: 8,
    letterSpacing: 1.2,
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    paddingVertical: 14,
    paddingHorizontal: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 8,
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 2,
  },
  cardLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconBg: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  icon: {
    fontSize: 20,
  },
  cardText: {
    justifyContent: 'center',
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
  },
  cardSubtitle: {
    fontSize: 12,
    color: '#757575',
    marginTop: 2,
  },
  chevron: {
    fontSize: 22,
    color: '#9e9e9e',
  },
});

by GPT-5 Nano

Converted Designs

Request another