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/27/2025, 4 pageviews

Converted Designs

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

export default function EditProfileScreen() {
  const [name, setName] = useState('Balakumar Karunanithi');
  const [gender, setGender] = useState('Male');
  const [dob, setDob] = useState('');
  const [email, setEmail] = useState('balakumareeee92@gmail.com');

return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn} onPress={() => {}}>
          <Text style={styles.backText}>◀</Text>
        </TouchableOpacity>
        <Text style={styles.title}>Edit Profile</Text>
      </View>

<Text style={styles.label}>Gender</Text>
        <View style={styles.genderRow}>
          {['Male', 'Female', 'Others'].map((g) => (
            <TouchableOpacity
              key={g}
              onPress={() => setGender(g)}
              style={[
                styles.genderOption,
                gender === g && styles.genderOptionSelected
              ]}
            >
              <View style={styles.radioOuter}>
                {gender === g && <View style={styles.radioDot} />}
              </View>
              <Text style={styles.genderText}>{g}</Text>
            </TouchableOpacity>
          ))}
        </View>

<Text style={styles.label}>Email</Text>
        <TextInput
          style={styles.input}
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
        />

<TouchableOpacity style={styles.button} onPress={() => {}}>
          <Text style={styles.buttonText}>Save & Update</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#fff' },
  header: {
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backBtn: { position: 'absolute', left: 16, top: 16, padding: 8 },
  backText: { fontSize: 20, color: '#333' },
  title: { fontSize: 18, fontWeight: '600' },
  content: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 40 },
  label: { fontSize: 12, color: '#6b6b6b', marginTop: 12, marginBottom: 6 },
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 8,
    paddingHorizontal: 12,
    backgroundColor: '#fff',
  },
  genderRow: { flexDirection: 'row', marginTop: 6, marginBottom: 8 },
  genderOption: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 14,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 8,
    marginRight: 12,
    backgroundColor: '#fff',
    minWidth: 110,
  },
  genderOptionSelected: {
    borderColor: '#e5e5e5',
  },
  radioOuter: {
    width: 16,
    height: 16,
    borderRadius: 8,
    borderWidth: 2,
    borderColor: '#e74c3c',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 6,
  },
  radioDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#e74c3c',
  },
  genderText: { fontSize: 14, color: '#333' },
  button: {
    marginTop: 18,
    backgroundColor: '#000',
    height: 50,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: { color: '#fff', fontSize: 16 },
});

by GPT-5 Nano

Converted Designs

Request another