**Course Title:** Building Mobile Applications with React Native **Section Title:** Working with APIs and Data Fetching **Topic:** Error handling and loading states **Overview** In the previous topics, we discussed how to fetch data from APIs using the fetch API and Axios. However, we didn't cover how to handle errors and loading states. In this topic, we'll learn how to handle errors and loading states when working with APIs in React Native. **Why Error Handling and Loading States Matter** Error handling and loading states are crucial when building mobile applications. If your app encounters an error while fetching data, it should display an error message to the user and provide a way to recover from the error. Similarly, your app should display a loading state while fetching data to inform the user that something is happening in the background. **Try-Catch Block** One way to handle errors when fetching data is to use a try-catch block. The try block contains the code that might throw an error, while the catch block contains the code that will run if an error occurs. Here's an example of using a try-catch block with the fetch API: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { const [data, setData] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch('https://api.example.com/data'); const data = await response.json(); setData(data); } catch (error) { setError(error.message); } finally { setLoading(false); } }; fetchData(); }, []); return ( <View> {loading ? ( <Text>Loading...</Text> ) : ( <View> {error ? ( <Text>Error: {error}</Text> ) : ( <Text>Data: {JSON.stringify(data)}</Text> )} </View> )} </View> ); }; const styles = StyleSheet.create({}); export default App; ``` **Axios Error Handling** Axios provides a more robust way of handling errors compared to the fetch API. Axios errors have a response property that contains information about the error. Here's an example of using Axios with error handling: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import axios from 'axios'; const App = () => { const [data, setData] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await axios.get('https://api.example.com/data'); setData(response.data); } catch (error) { setError(error.response.data.error); } finally { setLoading(false); } }; fetchData(); }, []); return ( <View> {loading ? ( <Text>Loading...</Text> ) : ( <View> {error ? ( <Text>Error: {error}</Text> ) : ( <Text>Data: {JSON.stringify(data)}</Text> )} </View> )} </View> ); }; const styles = StyleSheet.create({}); export default App; ``` **Loading States** Loading states are just as important as error handling. Your app should display a loading state while fetching data to inform the user that something is happening in the background. React Native provides several ways to display loading states, including the `ActivityIndicator` component. Here's an example of using `ActivityIndicator` to display a loading state: ```jsx import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, ActivityIndicator } from 'react-native'; const App = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { const fetchData = async () => { setLoading(true); const response = await fetch('https://api.example.com/data'); const data = await response.json(); setData(data); setLoading(false); }; fetchData(); }, []); return ( <View> {loading ? ( <ActivityIndicator size="large" color="#0000ff" /> ) : ( <Text>Data: {JSON.stringify(data)}</Text> )} </View> ); }; const styles = StyleSheet.create({}); export default App; ``` **Best Practices** Here are some best practices to keep in mind when handling errors and loading states in your React Native app: * Always handle errors when fetching data. * Display a loading state while fetching data. * Provide a way for the user to recover from an error. * Display error messages in a user-friendly way. * Use a consistent way of handling errors throughout your app. **Conclusion** In this topic, we learned how to handle errors and loading states when working with APIs in React Native. We covered try-catch blocks, Axios error handling, and loading states. We also discussed best practices for handling errors and loading states in your React Native app. **What's Next?** In the next topic, we'll learn about state management with Redux. We'll cover the basics of Redux, including actions, reducers, and store. **Leave a comment or ask for help** If you have any questions or need help with any of the concepts covered in this topic, please leave a comment or ask for help. **External Resources** * [Axios Error Handling](https://axios-http.com/docs/handling_errors) * [React Native ActivityIndicator](https://reactnative.dev/docs/activityindicator) Note: Always use the latest version of React Native and Axios to ensure you have the latest features and bug fixes.