expo convert from class to function - reactjs

Question

I am converting this code, which is working fine, from class to function. Replaced all of the classes to functions, created constant and useState as per many examples I have seen. There is no errors but it is not working and I can't figure out what is wrong. Any help is appreciated.
class App extends Component {
state = {
image: null,
uploading: false,
};
render() {
let {
image
} = this.state;
return (
...
);
}
_takePhoto = async () => {
const {
status: cameraPerm
} = await Permissions.askAsync(Permissions.CAMERA);
const {
status: cameraRollPerm
} = await Permissions.askAsync(Permissions.CAMERA_ROLL);
// only if user allows permission to camera AND camera roll
if (cameraPerm === 'granted' && cameraRollPerm === 'granted') {
let pickerResult = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: false,
aspect: [4, 3],
quality: 0.2,
});
this._handleImagePicked(pickerResult);
}
};
_handleImagePicked = async pickerResult => {
let uploadResponse, uploadResult;
try {
this.setState({
uploading: true
});
if (!pickerResult.cancelled) {
uploadResponse = await uploadImageAsync(pickerResult.uri);
uploadResult = await uploadResponse.json();
this.setState({
image: uploadResult.location
});
}
} catch (e) {
console.log({ uploadResponse });
console.log({ uploadResult });
console.log({ e });
alert('Upload failed, sorry :(');
} finally {
this.setState({
uploading: false
});
}
};
}
async function uploadImageAsync(uri) {
let apiUrl = 'http://elieatme.com/kamel/uploads.php';
let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];
var datetime = moment()
.utcOffset('+02:00')
.format('YYYY-MM-DD hh:mm:ss a');
let formData = new FormData();
formData.append('fileToUpload', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
};
return fetch(apiUrl, options);
}
export default App;
to function code below
function App() {
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
let pickerResult;
return (
...
);
function _takePhoto() {
const {
status: cameraPerm
} = Permissions.askAsync(Permissions.CAMERA);
const {
status: cameraRollPerm
} = Permissions.askAsync(Permissions.CAMERA_ROLL);
// only if user allows permission to camera AND camera roll
if (cameraPerm === 'granted' && cameraRollPerm === 'granted') {
pickerResult = ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: false,
aspect: [4, 3],
quality: 0.2,
});
_handleImagePicked(pickerResult);
}
}
function _handleImagePicked() {
let uploadResponse, uploadResult;
try {
setUploading(true);
if (!pickerResult.cancelled) {
uploadResponse = uploadImageAsync(pickerResult.uri);
uploadResult = uploadResponse.json();
setImage(uploadResult.location);
}
} catch (e) {
console.log({ uploadResponse });
console.log({ uploadResult });
console.log({ e });
alert('Upload failed, sorry :(');
} finally {
setUploading(false);
}
}
}
function uploadImageAsync(uri) {
let apiUrl = 'http://elieatme.com/kamel/uploads.php';
let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];
var datetime = moment()
.utcOffset('+02:00')
.format('YYYY-MM-DD hh:mm:ss a');
let formData = new FormData();
formData.append('fileToUpload', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
};
return fetch(apiUrl, options);
}
export default App;

Answer 1

Please check where you have closed your function app.
You have closed your app function after _handleImagePicked().
And after return statement none of you code going to execute.
function App() {
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
let pickerResult;
return (
...
);
} /// Close app function
function _takePhoto() {
const {
status: cameraPerm
} = Permissions.askAsync(Permissions.CAMERA);
const {
status: cameraRollPerm
} = Permissions.askAsync(Permissions.CAMERA_ROLL);
// only if user allows permission to camera AND camera roll
if (cameraPerm === 'granted' && cameraRollPerm === 'granted') {
pickerResult = ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: false,
aspect: [4, 3],
quality: 0.2,
});
_handleImagePicked(pickerResult);
}
}
function _handleImagePicked() {
let uploadResponse, uploadResult;
try {
setUploading(true);
if (!pickerResult.cancelled) {
uploadResponse = uploadImageAsync(pickerResult.uri);
uploadResult = uploadResponse.json();
setImage(uploadResult.location);
}
} catch (e) {
console.log({ uploadResponse });
console.log({ uploadResult });
console.log({ e });
alert('Upload failed, sorry :(');
} finally {
setUploading(false);
}
}
}/// Remove this closing
function uploadImageAsync(uri) {
let apiUrl = 'http://elieatme.com/kamel/uploads.php';
let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];
var datetime = moment()
.utcOffset('+02:00')
.format('YYYY-MM-DD hh:mm:ss a');
let formData = new FormData();
formData.append('fileToUpload', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
};
return fetch(apiUrl, options);
}
export default App;