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>
</View>
);
}
2
Answers
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.
In the onPress function there’s a missing pair of brackets.
I don’t know if it’s relevant but in the return statement there’s an extra View
tag that it shouldn’t be there.