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 8/21/2026, 4 pageviews

Converted Designs

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

const WalletScreen = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.header}>
          <TouchableOpacity style={styles.backBtn} activeOpacity={0.7}>
            <Text style={styles.backBtnText}>‹</Text>
          </TouchableOpacity>
          <Text style={styles.title}>Wallet & Transactions</Text>
        </View>

<View style={styles.cardsRow}>
          <View style={styles.tile}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>🕒</Text>
            </View>
            <Text style={styles.tileLabel}>Locked Coins</Text>
            <Text style={styles.tileValue}>611.55</Text>
          </View>

<View style={styles.tile}>
            <View style={styles.iconCircle}>
              <Text style={styles.iconText}>💳</Text>
            </View>
            <Text style={styles.tileLabel}>Withdrawn Coins</Text>
            <Text style={styles.tileValue}>0</Text>
          </View>
        </View>

<View style={styles.card}>
          <Text style={styles.cardTitle}>Payout & Bank Details</Text>

<View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>Payout Method</Text>
            <Text style={styles.fieldValueBlue}>UPI</Text>
          </View>

<View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>Account Holder</Text>
            <Text style={styles.fieldValue}>Aditi</Text>
          </View>

<View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>Account Number</Text>
            <Text style={styles.fieldValue}>50100451254</Text>
          </View>

<View style={styles.fieldRow}>
            <Text style={styles.fieldLabel}>UPI ID</Text>
            <Text style={styles.fieldValue}>aditi@ybl</Text>
          </View>
        </View>

<View style={styles.card}>
          <Text style={styles.cardTitle}>Transaction History</Text>
          <View style={styles.historyPlaceholder}>
            <Text style={styles.historyText}>No transactions yet</Text>
          </View>
        </View>
      </ScrollView>

<View style={styles.bottomNav} aria-label="Bottom navigation">
        <View style={styles.bottomIcon} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f7f9ff',
  },
  container: {
    paddingHorizontal: 16,
    paddingTop: 8,
    paddingBottom: 60,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
  },
  backBtn: {
    width: 44,
    height: 44,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#2b6cb0',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  backBtnText: {
    color: '#2b6cb0',
    fontSize: 26,
    lineHeight: 26,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    color: '#1c2a50',
  },
  cardsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 6,
  },
  tile: {
    width: '48%',
    backgroundColor: '#f8efe0',
    borderRadius: 16,
    padding: 14,
    alignItems: 'flex-start',
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 6,
    elevation: 3,
  },
  iconCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: '#2b6cb0',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  iconText: {
    fontSize: 18,
  },
  tileLabel: {
    fontSize: 14,
    color: '#333',
    marginBottom: 6,
  },
  tileValue: {
    fontSize: 26,
    fontWeight: '700',
    color: '#1b2a55',
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 20,
    marginTop: 20,
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 6,
    elevation: 4,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: '700',
    marginBottom: 12,
    color: '#122a60',
  },
  fieldRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 6,
  },
  fieldLabel: {
    fontSize: 14,
    color: '#555',
  },
  fieldValueBlue: {
    fontSize: 14,
    color: '#1e4bd1',
    fontWeight: '700',
  },
  fieldValue: {
    fontSize: 14,
    color: '#1f2d61',
    fontWeight: '600',
  },
  historyPlaceholder: {
    height: 140,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: '#eee',
    alignItems: 'center',
    justifyContent: 'center',
  },
  historyText: {
    color: '#aaa',
  },
  bottomNav: {
    height: 60,
    backgroundColor: '#fff',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8,
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  bottomIcon: {
    width: 40,
    height: 6,
    borderRadius: 3,
    backgroundColor: '#ddd',
  },
});

export default WalletScreen;

by GPT-5 Nano

Converted Designs

Request another