# React Native CRUD App with API Integration Here's a step-by-step guide to create a React Native app with CRUD operations using an API: 1. First, set up the project structure 2. Install required dependencies 3. Create API service 4. Build UI components 5. Implement CRUD operations ## Step 1: Create the React Native project ```bash npx react-native init CRUDApp cd CRUDApp ``` ## Step 2: Install required dependencies ```bash npm install axios react-native-vector-icons ``` ## Step 3: Project Structure ``` CRUDApp/ ├── src/ │ ├── components/ │ │ ├── ItemList.js │ │ └── AddItem.js │ ├── services/ │ │ └── api.js │ └── screens/ │ └── MainScreen.js ├── App.js └── package.json ``` ## Step 4: API Service (src/services/api.js) ```javascript import axios from 'axios'; const API_URL = 'https://jsonplaceholder.typicode.com/posts'; export const getItems = async () => { try { const response = await axios.get(API_URL); return response.data; } catch (error) { console.error('Error fetching items:', error); throw error; } }; export const addItem = async (item) => { try { const response = await axios.post(API_URL, item); return response.data; } catch (error) { console.error('Error adding item:', error); throw error; } }; export const deleteItem = async (id) => { try { await axios.delete(`${API_URL}/${id}`); return id; } catch (error) { console.error('Error deleting item:', error); throw error; } }; ``` ## Step 5: Item List Component (src/components/ItemList.js) ```javascript import React from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; const ItemList = ({ items, onDelete }) => { return ( item.id.toString()} renderItem={({ item }) => ( {item.title} onDelete(item.id)}> )} /> ); }; const styles = StyleSheet.create({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 20, borderBottomWidth: 1, borderBottomColor: '#ccc', }, title: { fontSize: 16, }, }); export default ItemList; ``` ## Step 6: Add Item Component (src/components/AddItem.js) ```javascript import React, { useState } from 'react'; import { View, TextInput, Button, StyleSheet } from 'react-native'; const AddItem = ({ onAdd }) => { const [text, setText] = useState(''); const handleSubmit = () => { if (!text.trim()) return; onAdd({ title: text }); setText(''); }; return (