Solving unhandled promise rejection in React Native

Unhandled promise rejection is a common error in React Native that occurs when a Promise fails but the error is not properly handled. It can cause warnings, unexpected behavior, or crashes if not managed correctly.

This error occurs when a Promise rejects without using .catch() or try-catch for error handling.
Proper error handling helps prevent crashes and improves app stability.
It can be solved using .catch(), async-await with try-catch, or global error handling methods.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

For the Android Emulator, press "a" as mentioned in the image below.
For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Error Shown: Below is a code of error that can occur in a React Native app when a promise is rejected but the rejection is not handled. The error message is shown in the image below.

Example: The below code will show the error and problem:

App.js

import { useState } from "react"; // Importing useState hook from React
import { 
  View,        // Container component for layout
  Button,      // Button component for user interaction
  Text         // Text component for displaying text
} from "react-native"; // Importing components from React Native
import { StatusBar } from "expo-status-bar"; // Importing StatusBar from Expo

export default function App() {
  // State to hold the fetched data
  const [data, setData] = useState();

  // Function to handle button press and fetch data from API
  function onPress() {
    fetch("https://randomuser.me/api/idk") // Fetching data from the API
      .then((response) => response.json()) // Parsing the response as JSON
      .then((data) => {
        // Updating the state with the fetched data
        setData(JSON.stringify(data));
      })
      
  }

  return (
    <View
      style={{
        flex: 1, // Make the view take up the full screen
        alignItems: "center", // Center items horizontally
        justifyContent: "center", // Center items vertically
      }}
    >
      <StatusBar style="auto" /> {/* Display the status bar */}
      <Button title="Load data" onPress={onPress} /> {/* Button to trigger data fetch */}
      <Text>{data}</Text> {/* Display the fetched data */}
    </View>
  );
}

Output:

A "Possible unhandled promise rejection" warning occurs when a Promise is rejected but the error is not handled.
Promises are used for asynchronous operations and can either be resolved or rejected.
If a rejected promise is not handled using .catch() or try-catch, it leads to warnings or unexpected behavior.
Proper error handling using .catch() and try-catch blocks helps prevent these issues and improves app stability.

To find the cause of this error, you can try the following steps

One possible cause of this error is the use of .catch() statements in your code that are not handling promise rejections. To fix this, you can add a .catch() statement to your promises and include a rejection handler to handle any errors that might occur.

Another possible cause of this error is syntax errors or typos in your code. To fix this, you can carefully review your code and look for any mistakes that might be causing the promise rejection.

Example: Here is an example of how you can use .catch() to handle a possible unhandled promise rejection in a React Native app: