convert code from class to function

How to / Third Party Tooling
1

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.

import React, { Component } from 'react';

…

class App extends Component {
  state = {
    image: null,
    uploading: false,
  };

  render() {
    let {
      image
    } = this.state;

    return (
            <View style={styles.container}>
                <View style={styles.containerBottom}>            
                  <View style={styles.buttonContainer}>
                    <Button onPress={this._takePhoto} color="#FF0000" title="TAKE PHOTO"/>
                  </View>
                </View>               
            </View>
    );
  }



  _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;

function code below.

import React, { useState } from 'react';

…

function App() {

  const [image, setImage] = useState(null);
  const [uploading, setUploading] = useState(false);  

  let pickerResult;

    return (
            <View style={styles.container}>
                <View style={styles.containerBottom}>            
                  <View style={styles.buttonContainer}>
                    <Button onPress={_takePhoto} color="#FF0000" title="take photo"/>
                  </View>
                </View>               
            </View>
    );

  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;