Find what caused Possible unhandled promise rejection in React Native ?

In this article, we will check out the `Possible Unhandled Promise Rejection` error in react native.

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.

• 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.
• For iOS users, simply scan the QR code using the Camera app.
• 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: 

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:

If you are getting a "Possible unhandled promise rejection" warning in your React Native app, it means that a promise was rejected, but the rejection was not handled. Promises in JavaScript are used to handle asynchronous operations, and they can either be resolved or rejected. When a promise is rejected, you can handle the rejection by using the catch method.

Unhandled promise rejections often occur when asynchronous operations fail without proper error handling. Adding try-catch blocks and using .catch() methods can help avoid these issues.

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:

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));
      })
      .catch((error) => {
        // Handle any errors during the fetch
        console.error("Error fetching data:", error);
      });
  }

  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>
  );
}

In this example, the onPress function is called when the button is clicked. The fetchData function makes an HTTP request using the fetch function and waits for the response. If the request is successful, the response data is stored in the data state using the setData function. If the request fails, the rejection is caught by the catch function, and the error message is logged to the console.

Error after adding ".catch()":

Now the function will throw more descriptive errors, which you can use to debug the code.

In conclusion, the "Possible unhandled promise rejection" error can be a frustrating problem to deal with in a React Native app. However, by carefully reviewing your code, using debugging tools, and checking for issues with third-party libraries, you can often identify and fix the source of the problem.