User Profile Form

Build a mobile form screen that allows users to edit their profile information. The form should handle keyboard interactions gracefully and display a confirmation dialog before saving changes.

Requirements

Form Layout

The form should display the following input fields:

• Name (text input)
• Email (text input with email keyboard)
• Bio (multi-line text input, minimum 3 lines)
• Save button at the bottom

Keyboard Behavior

The form must automatically adjust its layout when the keyboard appears to ensure all input fields remain visible and accessible. The adjustment should:

• Move the content up when the keyboard is shown
• Restore the original position when the keyboard is dismissed
• Work on both iOS and Android platforms
• Use platform-appropriate behavior (padding on iOS, height adjustment on Android)

Confirmation Dialog

When the user taps the Save button, display a confirmation dialog that:

• Appears over the current screen content
• Shows a title "Confirm Save"
• Shows a message "Are you sure you want to save these changes?"
• Provides two action buttons: "Cancel" and "Save"
• Can be dismissed by tapping outside the dialog or pressing Cancel
• Maintains transparency to show the underlying screen

The confirmation dialog should be implemented as an overlay component (not using the Alert API).

Test Cases

• When the keyboard appears while editing the Name field, the form adjusts to keep the input visible @test
• When the Save button is tapped, a confirmation dialog appears over the form @test
• When Cancel is tapped in the confirmation dialog, the dialog closes without saving @test
• When Save is tapped in the confirmation dialog, both the dialog closes and changes are saved @test

Implementation

@generates

API

import React from 'react';

interface ProfileFormProps {
  initialName?: string;
  initialEmail?: string;
  initialBio?: string;
  onSave?: (data: { name: string; email: string; bio: string }) => void;
}

/**
 * A form component for editing user profile information.
 * Handles keyboard interactions and displays a confirmation dialog before saving.
 */
export default function ProfileForm(props: ProfileFormProps): React.ReactElement;

Dependencies { .dependencies }

react-native { .dependency }

Provides mobile UI components and layout management.