expo-image-picker crashes the application

Summary

expo-image-picker version: ~10.1.4

Expected behaviour:

• After taking a picture or cancelling to take a picture, the app will continue running.
• After opening an image from media library, the app will continue running.

Actual behaviour:

• After taking a picture, the app immediately closes.
• Cancelling to take a picture throws lateinit property stripe has not been initialized error
• After selecting an image from media library, the app immediately closes.
• Cancelling to select an image throws Parameter specified as non-null is null: method kotlin.j0.d.l.e, parameter data

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

41

Environment

Expo CLI 4.4.8 environment info: System: OS: macOS 11.3.1 Shell: 5.8 - /bin/zsh Binaries: Node: 12.14.0 - /usr/local/bin/node npm: 7.8.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: Android SDK: API Levels: 25, 27, 28, 29 Build Tools: 27.0.3, 28.0.3, 29.0.2 System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom IDEs: Android Studio: 4.1 AI-201.8743.12.41.7199119 Xcode: /undefined - /usr/bin/xcodebuild npmPackages: expo: ~41.0.0 => 41.0.0 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 npmGlobalPackages: expo-cli: 4.4.8 Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

Step 1: Create new app and go into it

expo init my-app -t expo-template-blank-typescript
cd myapp

Step 2: Install expo-image-picker in your app

expo install expo-image-picker

Step 3: Create a useImagePicker.ts hook (copy code below)

Note: I have tested it without the hook. It does the same thing. The source code below would make it easier for you to reproduce the bug on expo-image-picker

import { useCallback } from "react";
import * as ImagePicker from "expo-image-picker";

type ApiResponse<T> = {
  data?: T;
  success?: string;
  error?: string;
};

interface ImagePickerObj {
  getImageFromCamera: () => Promise<ApiResponse<string>>;
  getImageFromLibrary: () => Promise<ApiResponse<string>>;
}

const useImagePicker = (): ImagePickerObj => {
  const getImageFromCamera = useCallback(async (): Promise<
    ApiResponse<string>
  > => {
    try {
      const { granted } = await ImagePicker.requestCameraPermissionsAsync();
      if (!granted) {
        return {
          error: "Permission not granted for camera.",
        };
      }
      const cameraData = await ImagePicker.launchCameraAsync({ base64: true });
      if (cameraData.cancelled) {
        return {
          error: "Cancelled taking photo",
        };
      }
      return {
        data: cameraData.base64,
        success: "Successfully took photo",
      };
    } catch (e) {
      return {
        error: e.toString(),
      };
    }
  }, []);

  const getImageFromLibrary = useCallback(async (): Promise<
    ApiResponse<string>
  > => {
    try {
      const {
        granted,
      } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (!granted) {
        return {
          error: "Permission not granted for media library.",
        };
      }
      const mediaData = await ImagePicker.launchImageLibraryAsync({
        base64: true,
      });
      if (mediaData.cancelled) {
        return {
          error: "Cancelled picking image from library",
        };
      }
      return {
        data: mediaData.base64,
        success: "success",
      };
    } catch (e) {
      return {
        error: e.toString(),
      };
    }
  }, []);

  return {
    getImageFromCamera,
    getImageFromLibrary,
  };
};

export default useImagePicker;

Step 4: Modify the contents of App.tsx to the following

import { StatusBar } from 'expo-status-bar';
import React, {useCallback} from 'react';
import { StyleSheet, Text, View, Button, ToastAndroid } from 'react-native';
import useImagePicker from "./useImagePicker";

export default function App() {
  const imagePicker = useImagePicker();

  const handlePicture = useCallback(async () => {
    const results = await imagePicker.getImageFromLibrary();
    if (results.success && results.data) {
      ToastAndroid.show(results.success, ToastAndroid.SHORT);
      console.log(results.data);
    } else {
      ToastAndroid.show(
          results.error || "Something went wrong",
          ToastAndroid.SHORT,
      );
    }
  }, [imagePicker]);

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button title="Take picture" onPress={handlePicture} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Step 5: Run the application on your android device Step 6: Press the “Take picture” button to open the library

6a. Select an image. The app will crash. 6b. Rebuilt the app again, press the take picture and hit the back button. You should see an error.

Step 7. Replace line 10 to const results = await imagePicker.getImageFromLibrary();, then rebuild the app.

7a. Press the “Take picture” button and take a picture. The app will crash. 7b. Press the “Take picture” button and hit the back button. You should see an error.

[cruzach]

Hi! This error has to do with our most recent update to Expo Go on Android, we’ll be shipping a fix for it soon.

In the meantime, you can download the previous version of Expo Go here

[cruzach]

Expo Go 2.19.6 is now available on the play store