Search code examples
javascriptreact-nativeexpoimagepicker

React Native ImagePicker causes Invalid hook call


I'm trying to select a picture from the gallery via ImagePicker. It doesn't matter which ImagePicker i try, 'expo-image-picker' or 'react-native-image-crop-picker' I always face the error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I dont try to call a hook outside a function.. But when I select a picture I return a right response:

{"cropRect": {"height": 2242, "width": 1682, "x": 1155, "y": 0}, "height": 400, "mime": "image/jpeg", "modificationDate": "1695307585000", "path": "file:///storage/emulated/0/Android/data/com.clip/files/Pictures/4e0ae973-fd55-43ba-9758-34119952b375.jpg", "size": 103041, "width": 300}

The code looks like:

import React from "react";
import {
  NativeModules,
  StyleSheet,
  View,
  Text,
  ImageBackground,
  Pressable,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import ImagePicker from "react-native-image-crop-picker";

export default function ProfileScreen({ navigation, route }) {
  const [image, setImage] = React.useState(null);

  async function changeProfilePicture() {
    await ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      console.log(image);
    });
  }

  return (
    <View style={styles.ViewStyle}>
      <Pressable
        style={styles.PressableProfilePictureStyle}
        onPress={() => changeProfilePicture()}
      >
        <Feather name="edit" size={30} color="black" />
      </Pressable>
    </View>
  );
}


Solution

  • it wasn't about the Image Picker. Its was about the fact that the Socket connection disconnected and connected several times when opening the picker.