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, 3 pageviews

Converted Designs

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

const RideDetailsScreen = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn}>
          <Text style={styles.backText}>← My Rides</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Ride Details</Text>
        <View style={styles.headerSpacer} />
      </View>

<ScrollView contentContainerStyle={styles.container}>
        <View style={styles.card}>
          <View style={styles.cardTop}>
            <View style={styles.topLeft}>
              <Text style={styles.sectionLabel}>Auto</Text>
              <Text style={styles.dateText}>03th Nov 2025 • 01:51 PM</Text>
              <Text style={styles.fare}>₹102 (est)</Text>
            </View>
            <View style={styles.topRight}>
              <Text style={styles.icon}>🚗</Text>
              <Text style={styles.completed}>Completed</Text>
            </View>
          </View>

<Text style={styles.sectionTitle}>Address Details</Text>
          <Text style={styles.rideId}>Ride ID #RD17 6215 8100 9238 776</Text>

<View style={styles.locationRow}>
            <View style={styles.pinGreen} />
            <View style={styles.locationText}>
              <Text style={styles.locTitle}>RMZ Gateway, No. 63</Text>
              <Text style={styles.locSub}>
                RMZ Gateway, No. 63, Srinivagilu Main Rd, 4th Block, Ejipura, Bengaluru, Karnataka 560034, India
              </Text>
            </View>
          </View>

<View style={styles.locationRow}>
            <View style={styles.pinOrange} />
            <View style={styles.locationText}>
              <Text style={styles.locTitle}>384, Krishna Reddy Layout</Text>
              <Text style={styles.locSub}>
                384, Krishna Reddy Layout, Amarjyoti Layout, Domlur, Bengaluru, Karnataka 560071, India
              </Text>
            </View>
          </View>

<View style={styles.ratingRow}>
          <Image
            source={{ uri: 'https://placehold.co/48x48' }}
            style={styles.avatar}
          />
          <View style={styles.ratingInfo}>
            <Text style={styles.ratingTitle}>You rated SOMASHEKHARB H</Text>
            <View style={styles.starsRow}>
              {Array.from({ length: 5 }).map((_, idx) => (
                <Text key={idx} style={styles.star}>☆</Text>
              ))}
            </View>
          </View>
        </View>

<Text style={styles.sectionTitle}>Ride Summary</Text>
        <View style={styles.summaryCard}>
          <View style={styles.row}>
            <Text style={styles.label}>Suggested Fare</Text>
            <Text style={styles.value}>₹102</Text>
          </View>
          <View style={styles.dividerThin} />
          <View style={styles.row}>
            <Text style={styles.totalLabel}>Total Amount</Text>
            <Text style={styles.totalValue}>₹102.00</Text>
          </View>

<TouchableOpacity style={styles.emailRow}>
            <Text style={styles.emailIcon}>✉️</Text>
            <Text style={styles.emailText}>Send receipt via email</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default RideDetailsScreen;

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#f4f6fb',
  },
  header: {
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f6f7fb',
    borderBottomWidth: 0.5,
    borderBottomColor: '#e2e6ef',
  },
  backBtn: {
    position: 'absolute',
    left: 14,
    top: 16,
  },
  backText: {
    color: '#1b6ef3',
    fontSize: 14,
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: '600',
  },
  headerSpacer: {
    width: 60,
  },
  container: {
    padding: 16,
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 18,
    padding: 16,
    paddingTop: 12,
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 6,
    elevation: 3,
    marginBottom: 12,
  },
  cardTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  topLeft: {
    maxWidth: '70%',
  },
  sectionLabel: {
    fontSize: 18,
    fontWeight: '700',
    color: '#111',
  },
  dateText: {
    fontSize: 13,
    color: '#555',
    marginTop: 6,
  },
  fare: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
    fontWeight: '600',
  },
  topRight: {
    alignItems: 'flex-end',
  },
  icon: {
    fontSize: 22,
  },
  completed: {
    marginTop: 6,
    backgroundColor: '#d7f6e0',
    color: '#0a7a3a',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
    fontWeight: '600',
    fontSize: 12,
  },
  divider: {
    height: 1,
    backgroundColor: '#eee',
    marginVertical: 12,
  },
  sectionTitle: {
    fontSize: 14,
    color: '#8894a6',
    fontWeight: '700',
    marginTop: 4,
  },
  rideId: {
    fontSize: 13,
    color: '#666',
    marginTop: 6,
  },
  locationRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginTop: 10,
  },
  pinGreen: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#27a24b',
    marginTop: 6,
    marginRight: 10,
  },
  pinOrange: {
    width: 14,
    height: 14,
    borderRadius: 7,
    backgroundColor: '#f59e0b',
    marginTop: 6,
    marginRight: 10,
  },
  locationText: {
    flex: 1,
  },
  locTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
  },
  locSub: {
    fontSize: 12,
    color: '#555',
    marginTop: 4,
  },
  estTime: {
    fontSize: 12,
    color: '#555',
    marginTop: 8,
  },
  helpCard: {
    backgroundColor: '#e8f0ff',
    borderRadius: 14,
    padding: 14,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12,
  },
  helpIcon: {
    fontSize: 20,
    marginRight: 10,
  },
  helpText: {
    color: '#1c4d96',
    fontWeight: '600',
  },
  ratingRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 14,
    borderRadius: 12,
    marginTop: 12,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
  },
  ratingInfo: {
    marginLeft: 12,
  },
  ratingTitle: {
    fontSize: 14,
    fontWeight: '600',
  },
  starsRow: {
    flexDirection: 'row',
    marginTop: 6,
  },
  star: {
    fontSize: 16,
    color: '#bbb',
    marginRight: 4,
  },
  sectionSubtitle: {},
  sectionHeader: {},
  sectionBody: {},
  sectionBodyText: {},
  ratingCard: {},
  sectionLabelLeft: {},
  ratingCardPlaceholder: {},
  sectionTitle2: {},
  ratingCardLine: {},
  ratingTextBlock: {},
  ratingTitle2: {},
  summaryCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 14,
    marginTop: 10,
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 6,
  },
  label: {
    fontSize: 14,
    color: '#444',
  },
  value: {
    fontSize: 14,
    color: '#111',
    fontWeight: '600',
  },
  dividerThin: {
    height: 1,
    backgroundColor: '#eee',
    marginVertical: 6,
  },
  totalLabel: {
    fontSize: 14,
    color: '#444',
  },
  totalValue: {
    fontSize: 14,
    color: '#111',
    fontWeight: '700',
  },
  emailRow: {
    marginTop: 12,
    flexDirection: 'row',
    alignItems: 'center',
  },
  emailIcon: {
    fontSize: 16,
    marginRight: 8,
  },
  emailText: {
    color: '#1e64b6',
    fontWeight: '600',
  },
});

by GPT-5 Nano

Converted Designs

Request another