runtime error while running npx expo run android

[algoORgoal]

ERROR Failed to check permission [TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: useSyncDeviceMedia.ts
12 | const checkPermission = async (setHasPermission: (value: boolean) => void) => {
13 | try {

14 | const isGranted = await MediaModule.checkNotificationListenerPermission();
| ^
15 | setHasPermission(isGranted);
16 | if (isGranted) {
17 | MediaModule.startObserver();
Call Stack
checkPermission (apps/frontend/hooks/useSyncDeviceMedia.ts:14:76)
(apps/frontend/hooks/useSyncDeviceMedia.ts:12:22)
useEffect$argument_0 (apps/frontend/hooks/useSyncDeviceMedia.ts:35:20)

Code: _layout.tsx
26 | }}
27 | >

28 | <Stack
| ^
29 | screenOptions={{
30 | headerShown: false,
31 | contentStyle: { backgroundColor: "transparent" },
Call Stack
RootLayout (apps/frontend/app/_layout.tsx:28:17)
ERROR [Error: Uncaught (in promise, id: 0) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:21:20)
ERROR [Error: Uncaught (in promise, id: 1) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 2) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 3) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 4) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 5) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 6) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)
ERROR [Error: Uncaught (in promise, id: 7) TypeError: Cannot read property 'checkNotificationListenerPermission' of null]

Code: NotificationAccessRequired.tsx
14 | const checkPermission = async () => {
15 | if (!isVisible) return;

16 | const granted = await MediaModule.checkNotificationListenerPermission();
| ^
17 | setIsVisible(!granted);
18 | };
19 |
Call Stack
checkPermission (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:16:76)
useEffect$argument_0 (apps/frontend/components/home/NotificationAccessRequired/NotificationAccessRequired.tsx:18:6)

[algoORgoal]

NotificationAccessRequired 컴포넌트에서, MediaModule을 console로 찍어보니 null이 나옵니다.
@parkcoool

import { MediaModule } from "@/core/mediaModule";

import { styles } from "./NotificationAccessRequired.styles";

export default function NotificationAccessRequired() {
  const [isVisible, setIsVisible] = useState(true);

  // 컴포넌트가 마운트될 때 권한 상태 확인
  useEffect(() => {
    const checkPermission = async () => {
      if (!isVisible) return;
      console.log("MediaModule", MediaModule);
      const granted = await MediaModule.checkNotificationListenerPermission();
      setIsVisible(!granted);
    };

    const intervalRef = setInterval(checkPermission, 5000);
    checkPermission();

    return () => clearInterval(intervalRef);
  }, [isVisible]);

  // 권한 부여 버튼 핸들러
  const handleGrant = () => {
    MediaModule.openNotificationListenerSettings();
  };

  // 닫기 버튼 핸들러
  const handleClose = () => {
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <View style={[styles.wrapper]}>
      {/* 닫기 버튼 */}
      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
        <MaterialIcons name="close" size={24} style={styles.closeIcon} />
      </TouchableOpacity>

      {/* 설명 */}
      <View style={styles.body}>
        <Text style={styles.description}>
          {"기기에서 재생하는 곡을 연동하려면 알림 접근 권한이 필요합니다."}
        </Text>
      </View>

      {/* 푸터 */}
      <View style={styles.footer}>
        {/* 권한 부여 버튼 */}
        <TouchableOpacity style={styles.button} onPress={handleGrant}>
          <MaterialIcons
            name={"notifications"}
            size={20}
            style={styles.buttonIcon}
          />
          <Text style={styles.buttonText}>{"알림 접근 권한 부여하기"}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

[algoORgoal]

근데 expo 안 거치고 native module 그대로 사용하는 이유가 있나요?
네이티브 코드 직접 작성 안 하고, 네이티브 빌드 환경 세팅하고싶지 않다면 때 웬만하면 expo plugin을 사용하고, app config js에서 expo plugin을 추가해서 링킹해야하는 걸로 알고 있어요.
https://docs.expo.dev/versions/latest/sdk/media-library/