[expo-notifications] Expo Go App closing when local notification pressed

[rrcabrera9625]

Please provide the following:

1. SDK Version: ^48.0.19
2. Platforms(Android/iOS/web/all): Android
3. Add the appropriate “Tag” based on what Expo library you have a question on.

I’m trying to code a function that allows the app to navigate to a specific screen when a local notification is pressed, but not even a console.log() is shown in terminal. This is the code inside App.js that handles it:

useEffect(() => {
    const subscription = Notifications.addNotificationReceivedListener(
      (notification) => {
        console.log("Notification received");
        console.log(notification);
      }
    );

    const subscription_response =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log("Notification response received");
        console.log(response);
        // here is where i want to put my function but code above is never executed
      });

    return () => {
      subscription.remove();
      subscription_response.remove();
    };
  }, []);

Notification is been received but when i press it, the app crash and close, no error shown on console, just close…

Here’s my full code:

import React, { useCallback, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import { StatusBar } from "expo-status-bar";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
import StackNavigator from "./src/components/navigators/StackNavigator";
import * as SplashScreen from "expo-splash-screen";
import * as Notifications from "expo-notifications";
import { useFonts } from "expo-font";

Notifications.setNotificationHandler({
  handleNotification: async () => {
    return {
      shouldShowAlert: true,
      shouldPlaySound: true,
      shouldSetBadge: true,
    };
  },
});

export default function App() {
  const navTheme = DefaultTheme;
  navTheme.colors.background = "white";

  const [fontsLoaded] = useFonts({
    // load fonts
  });

  useEffect(() => {
    async function prepare() {
      await SplashScreen.preventAutoHideAsync();
    }
    prepare();
  }, []);

  useEffect(() => {
    const subscription = Notifications.addNotificationReceivedListener(
      (notification) => {
        console.log("Notification received");
        console.log(notification);
      }
    );

    const subscription_response =
      Notifications.addNotificationResponseReceivedListener((response) => {
        console.log("Notification response received");
        console.log(response);
      });

    return () => {
      subscription.remove();
      subscription_response.remove();
    };
  }, []);

  const onLayout = useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
      console.log("Splash screen hidden");
      console.log("Fonts loaded");
      console.log("App loaded");
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayout}>
      <StatusBar style="auto" />
      <NavigationContainer theme={navTheme}>
        <StackNavigator />
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});