I really need some help with hooks in react native...
I have an ActionSheet which onPress one of the options a camera feature should open with "useCamera" function.
The "useCamera" is in another function(on another file), using the library "ImagePicker". (specific "ImagePicker.launchCamera")
the "ImagePicker.launchCamera" set the fileUri in the callback while the function return nothing.
So to access the fileUri, I tried to use useState Hook but I get "ERROR: Invalid Hook call.Hooks can only be called inside of the body of the function..." but the hook inside the function bodY!
ActionSheet code:
import {useCamera} from './PhotoHandle';
// export default class EditProfilePic extends React.Component {
function EditProfilePic(props) {
const [ActionSheetRef, setActionSheetRef] = useState(null);
const [fileDate, setFileDate] = useState(null);
return (
<View style={styles.images_container}>
<TouchableOpacity
style={styles.click_edit_icon}
onPress={() => ActionSheetRef.show()}>
<Image style={styles.editIcon} source={editIcon} />
</TouchableOpacity>
<Image source={props.profileSource} style={styles.image} />
<ActionSheet
ref={o => setActionSheetRef(o)}
title={
<Text style={{color: '#000', fontSize: 18}}>
Which one do you like?
</Text>
}
options={['Select from Photos', 'Camera', 'Cancel']}
cancelButtonIndex={2}
destructiveButtonIndex={2}
onPress={index => {
//camera
if (index == 1) {
useCamera()
}
}}
/>
</View>
);
}
LaunchCamera function:
export function useCamera() {
const [fileData, setFileData] = useState(null);
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, response => {
console.log('coolio' + response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
setFileData(response.data);
}
});
return fileData;
}
I tried to call useCamera() like "< useCamera / >",
I changed the anonymous function to just a function.
I tried to call useCamera() from other part of the code (not from onPress) .
I tried to use Context,and Redux.
ALL THE SAME ERROR.
please help meee,
Thanks!