react-native-image-picker null launchImageLibrary

Question

I'm new to react-native and trying to build an app to upload photos. The following use of react-native-image-picker `launchImageLibrary does not work when running in ios simulator.

I get a Cannot read property "launchImageLibrary" of null error. It seems the import isn't working but I'm not sure why. I'm guess is has something to do with linking?

I've tried reinstalling dependencies, running pod install in the ios directory, adding the NSPhotoLibraryUsageDescription key to the Info.plist.

Dependencies

  "dependencies": {
    "@react-native-firebase/app": "^17.4.0",
    "@react-native-firebase/storage": "^17.4.0",
    "firebase": "^9.18.0",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "react-native-image-picker": "^5.3.1"
  }

Code

import React, {useState} from 'react';
import {StyleSheet, Button, Image, View, Alert} from 'react-native';
import {
  launchImageLibrary,
  ImageLibraryOptions,
} from 'react-native-image-picker';

import UploadFile from '../services/UploadFile';

export default function UploadScreen() {
  const [imageUri, setImageUri] = useState('');

  const options: ImageLibraryOptions = {
    mediaType: 'photo',
    includeBase64: false,
    selectionLimit: 1,
  };
  const pickImage = () => {
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.error('User cancelled image picker');
      } else if (response.errorCode) {
        console.error('ImagePicker Error: ', response.errorMessage);
      } else if (!response.assets?.length || !response.assets[0].uri) {
        console.error('no image selected');
      } else {
        setImageUri(response.assets[0].uri);
      }
    });
  };

  const uploadImage = async () => {
    const response = await fetch(imageUri);
    const blob = await response.blob();
    const filename = imageUri.split('/').pop();
    UploadFile(blob, filename!);
    Alert.alert('Image uploaded successfully!');
  };

  return (
    <View style={styles.uploadScreen}>
      {imageUri && (
        <Image source={{uri: imageUri}} style={styles.previewImage} />
      )}
      <Button title="Select Image" onPress={pickImage} />
      <Button title="Upload Image" onPress={uploadImage} disabled={!imageUri} />
    </View>
  );
}

const styles = StyleSheet.create({
  uploadScreen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  previewImage: {width: 200, height: 200},
});