expo go: photoLibraryPermissionModule: Native Module 'photoLibraryPermissionModule' was null!

[stevekuznetsov]

Reproduction link

https://github.com/stevekuznetsov/ant-design-react-native-reproducer

Steps to reproduce

yarn add @ant-design/react-native
yarn add @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler

Then, import and use <Card>:

import React from 'react';
import {Card} from '@ant-design/react-native';
...
export const Broken: React.FunctionComponent<> = () => {
  return <Card></Card>
}

Then, view app in Expo Go

expo start --clear

What is expected?

App works and displays an empty card.

What is actually happening?

photoLibraryPermissionModule: Native Module 'photoLibraryPermissionModule' was null! Did you run pod install?
at node_modules/@react-native-camera-roll/camera-roll/src/CameraRollIOSPermission.ts:17:15 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/@react-native-camera-roll/camera-roll/src/index.ts:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/@ant-design/react-native/lib/image-picker/CameraRollPicker.js:1:916 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/@ant-design/react-native/lib/image-picker/ImageRoll.js:1:950 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/@ant-design/react-native/lib/image-picker/index.js:1:822 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/@ant-design/react-native/lib/index.js:1:5928 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at components/Observations.tsx:7:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at App.tsx:24:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo/AppEntry.js:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:200:44 in guardedLoadModule
at http://192.168.86.23:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global code

Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist. 

If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:203:40 in guardedLoadModule
at http://192.168.86.23:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

Environment	Info
antd	5.0.2
React	0.69.6
System	iOS
Browser	n/a
expo	6.0.8

---

I did not use any photo components, just one <Card> import.

[stevekuznetsov]

My question would be - does this project expect to work with Expo Go, or is a custom dev build always going to be required? Also - if I never use the photo picker, why am I required to have that native module just by importing the module?

[1uokun]

My question would be - does this project expect to work with Expo Go, or is a custom dev build always going to be required? Also - if I never use the photo picker, why am I required to have that native module just by importing the module?

Use babel-plugin-import (Recommended) @stevekuznetsov

See the detail in https://rn.mobile.ant.design/docs/react/introduce

[stevekuznetsov]

@1uokun would that solve my problem if and only if I did not use the component (CameraRollPicker) that imported (CameraRollIOSPermission)? Should this library use the expo version of the camera roll to be compatible?

[1uokun]

The Expo Go app doesn't support custom native modules(CameraRollIOSPermission is a NativeModule: code)

ref: https://docs.expo.dev/guides/config-plugins/

[stevekuznetsov]

@1uokun yes, but expo has it's own camera roll: https://docs.expo.dev/versions/latest/sdk/imagepicker/ and if it's a goal of this project to be expo-compatible, would it be better to use that library?

[1uokun]

Expo-compatible is not this project's first,

so we will not import any expo-related libraries in the near future, include https://docs.expo.dev/versions/latest/sdk/imagepicker/