**Course Title:** Building Mobile Applications with React Native **Section Title:** Working with APIs and Data Fetching **Topic:** Build an application that fetches data from a public API and displays it in a user-friendly manner.(Lab topic) In this lab topic, we will apply our knowledge of working with APIs and data fetching to build a fully functional application that retrieves data from a public API and presents it to the user in a clean and organized format. **Objective:** By the end of this lab topic, you should be able to: * Design and implement a React Native application that fetches data from a public API * Handle asynchronous operations and loading states * Display fetched data in a user-friendly manner using React Native components * Style the application to make it visually appealing **Materials Needed:** * A computer with a code editor or IDE of your choice (e.g., Visual Studio Code) * Node.js (LTS version) and npm installed * A React Native development environment set up (using React Native CLI or Expo) * A public API endpoint for testing (e.g., [JSONPlaceholder](https://jsonplaceholder.typicode.com/)) **Step 1: Create a new React Native project** Using your preferred method, create a new React Native project. For this example, we'll use the React Native CLI: ```bash npx react-native init MyApiApp ``` Replace `MyApiApp` with the desired name for your project. **Step 2: Choose a public API endpoint** Select a public API endpoint that provides JSON data. For this example, we'll use the [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API, which provides fake data for testing purposes. Choose an endpoint that interests you, such as the `/posts` endpoint, which returns a list of fake blog posts. **Step 3: Install necessary packages** In the project directory, install the necessary packages: ```bash npm install axios ``` Axios is a popular HTTP client library for making API requests. **Step 4: Create a new component for API data** Create a new component that will handle the API request and display the data. Name it `ApiData.js`: ```jsx import React, { useState, useEffect } from 'react'; import axios from 'axios'; const ApiData = () => { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchPosts = async () => { try { const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); setPosts(response.data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchPosts(); }, []); if (loading) { return <Text>Loading...</Text>; } if (error) { return <Text>Error: {error.message}</Text>; } return ( <FlatList data={posts} renderItem={({ item }) => ( <View style={{ paddingVertical: 10 }}> <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{item.title}</Text> <Text style={{ fontSize: 14 }}>{item.body}</Text> </View> )} keyExtractor={(item) => String(item.id)} /> ); }; export default ApiData; ``` **Step 5: Integrate the component into the main app** Import the `ApiData` component into your app's main component (`App.js`): ```jsx import React from 'react'; import ApiData from './ApiData'; const App = () => { return ( <View style={{ flex: 1 }}> <ApiData /> </View> ); }; export default App; ``` **Step 6: Run the app** Run the app on a simulator or physical device: ```bash npx react-native run-android ``` or ```bash npx react-native run-ios ``` **Result:** The app should now fetch data from the public API and display it in a scrollable list. Each item should have a title and a description. **Key Takeaways:** * Use Axios for making API requests * Use React hooks for managing state and lifecycle events * Use `useState` and `useEffect` for handling loading and error states * Use React Native components for rendering user-friendly data **Additional Resources:** * [JSONPlaceholder API documentation](https://jsonplaceholder.typicode.com/guide/) * [Axios documentation](https://axios-http.com/docs) Leave a comment below if you need help with any part of this lab topic, and we'll assist you shortly.