Build a Full Mobile App Based on an API Call

This is an Expo Mobile app project, it is a new clean project ready to start with.

Generate a complete React Native screen/component that integrates with the provided API endpoint. Create a mobile-optimized UI with proper state management, error handling, and loading states.
API Specification
Endpoint Details

{{CURL_API_CALL}}

Expected Response
{{API_RESPONSE}}


Requirements
Technical Stack
Framework: Expo SDK (latest)
Language: TypeScript
State Management: React Hooks (useState, useEffect)
HTTP Client: fetch API or axios
Styling: StyleSheet (React Native)
Navigation: React Navigation (if needed)

Component Structure
Create the following files:
Main Screen Component: screens/[FeatureName]Screen.tsx
API Service: services/[featureName]Service.ts
Types: types/[featureName].types.ts
Components: Any reusable components in components/

Mobile UI Requirements

Form Design:
Use React Native input components (TextInput, Picker, etc.)
Implement proper keyboard handling (KeyboardAvoidingView)
Add input validation with error messages
Use appropriate keyboard types (numeric, email, etc.)
Include clear/reset functionality


Visual Design:
Follow platform-specific design guidelines (iOS/Android)
Implement proper spacing using padding/margin
Use ScrollView or FlatList for long content
Add SafeAreaView for notch handling
Implement pull-to-refresh if applicable
Use ActivityIndicator for loading states


User Experience:
Show loading overlay during API calls
Display user-friendly error messages
Add success feedback (alerts or in-app notifications)
Implement proper touch feedback (TouchableOpacity)
Handle offline scenarios gracefully


State Management:
Track form inputs with useState
Manage loading, error, and success states
Clean up effects properly
Handle component unmounting during API calls




Use consistent color scheme
Implement responsive design using Dimensions API
Create reusable style constants
Follow React Native styling best practices
Add proper shadow/elevation for cards

Error Handling

Network errors
Validation errors
API errors with status codes
Timeout handling
Retry mechanisms

Additional Features to Include

 Form validation before submission
 Keyboard dismissal on submit
 Haptic feedback (if applicable)
 Accessibility labels
 Dark mode support (if needed)
 Internationalization ready


[optional]
use the following UI as an inspiration: