Okay, let's set up the React Native CLI application with the features you described. { "name": "mycliapp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "axios": "^1.6.8", "react": "18.2.0", "react-native": "0.74.0", "react-native-gesture-handler": "^2.16.1", "react-native-modal": "^13.0.1", "react-native-reanimated": "^3.11.0", "react-native-safe-area-context": "^4.10.1", "react-native-screens": "^3.31.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.81", "@react-native/eslint-config": "0.74.81", "@react-native/metro-config": "0.74.81", "@react-native/typescript-config": "0.74.81", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } module.exports = { presets: ['module:@react-native/babel-preset'], plugins: ['react-native-reanimated/plugin'], // Needs to be last }; import axios from 'axios'; // Replace with your actual API base URL const API_BASE_URL = 'https://jsonplaceholder.typicode.com'; // Example API const apiClient = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', // Add other common headers like Authorization if needed }, }); // --- Mock API Functions (Replace with actual API calls) --- // Mock Login API export const loginUser = async (email, password) => { console.log('Attempting login for:', email); // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate success/failure if (email === 'test@example.com' && password === 'password') { console.log('Login successful'); // Return mock user data or token return { success: true, data: { userId: '123', token: 'fake-jwt-token' } }; } else { console.log('Login failed'); return { success: false, error: 'Invalid credentials' }; } }; // Mock Fetch Community Items API export const fetchCommunityItems = async () => { console.log('Fetching community items...'); // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); try { // Using jsonplaceholder for mock data const response = await apiClient.get('/posts?_limit=25'); // Fetch 25 items console.log('Community items fetched successfully'); // Format data slightly to fit expected structure const formattedData = response.data.map(item => ({ id: item.id.toString(), title: item.title, body: item.body, })); return { success: true, data: formattedData }; } catch (error) { console.error('Error fetching community items:', error); return { success: false, error: 'Failed to fetch items' }; } }; // Mock Add Community Item API export const addCommunityItem = async (itemData) => { console.log('Adding community item:', itemData); // Simulate API call delay await new Promise(resolve => setTimeout(resolve, 1000)); try { // Simulate POST request (jsonplaceholder doesn't actually save it) const response = await apiClient.post('/posts', itemData); console.log('Community item added successfully (simulated)'); // Return the new item data (or confirmation) // Add a temporary ID for the frontend simulation return { success: true, data: { ...response.data, id: Date.now().toString() } }; } catch (error) { console.error('Error adding community item:', error); return { success: false, error: 'Failed to add item' }; } }; // --- API Manager Object (can add more specific methods here) --- const apiManager = { login: loginUser, getCommunityItems: fetchCommunityItems, addCommunityItem: addCommunityItem, // Add other API functions here (e.g., getUserProfile, updateSettings) }; export default apiManager; import React from 'react'; import { View, ActivityIndicator, StyleSheet, Modal, Text } from 'react-native'; const LoadingIndicator = ({ isVisible }) => { return ( {}} // Required on Android > Loading... ); }; const styles = StyleSheet.create({ modalBackground: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background }, activityIndicatorWrapper: { backgroundColor: '#FFFFFF', height: 120, width: 120, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', }, loadingText: { marginTop: 10, fontSize: 14, color: '#333', }, }); export default LoadingIndicator; import React from 'react'; import { TextInput, StyleSheet, View, Text } from 'react-native'; const InputField = ({ label, value, onChangeText, placeholder, secureTextEntry = false, error, ...props }) => { return ( {label && {label}} {error && {error}} ); }; const styles = StyleSheet.create({ container: { marginBottom: 15, width: '100%', }, label: { marginBottom: 5, fontSize: 14, color: '#333', fontWeight: '500', }, input: { height: 45, borderColor: '#ccc', borderWidth: 1, borderRadius: 5, paddingHorizontal: 10, backgroundColor: '#fff', fontSize: 16, color: '#333', }, inputError: { borderColor: 'red', }, errorText: { color: 'red', fontSize: 12, marginTop: 4, }, }); export default InputField; import React from 'react'; import { TouchableOpacity, Text, StyleSheet } from 'react-native'; const Button = ({ title, onPress, style, textStyle, disabled = false }) => { return ( {title} ); }; const styles = StyleSheet.create({ button: { backgroundColor: '#007bff', paddingVertical: 12, paddingHorizontal: 20, borderRadius: 5, alignItems: 'center', justifyContent: 'center', minWidth: 100, marginVertical: 10, }, text: { color: '#ffffff', fontSize: 16, fontWeight: 'bold', }, disabledButton: { backgroundColor: '#cccccc', }, }); export default Button; import React, { useState } from 'react'; import { View, Text, StyleSheet, TextInput, Alert } from 'react-native'; import Modal from 'react-native-modal'; import Button from './Button'; import InputField from './InputField'; const AddItemModal = ({ isVisible, onClose, onSubmit }) => { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const handleSubmit = async () => { if (!title.trim() || !body.trim()) { Alert.alert('Error', 'Please fill in both title and description.'); return; } setIsSubmitting(true); await onSubmit({ title, body }); setIsSubmitting(false); // Clear form on successful submit (handled by parent calling onClose) // setTitle(''); // setBody(''); }; const handleClose = () => { // Clear form when closing manually setTitle(''); setBody(''); onClose(); } return ( Add New Service Request