converting class component to react functional component/hooks

Question

Would anyone be able to please assist in converting this class component code to a functional component/hooks

class MarkerTypes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapSnapshot: null,
    };
  }

  takeSnapshot() {
    this.map.takeSnapshot(
      300,
      300,
      {
        latitude: LATITUDE - SPACE,
        longitude: LONGITUDE - SPACE,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01 * ASPECT_RATIO,
      },
      (err, data) => {
        if (err) {
          console.log(err);
        }
        this.setState({ mapSnapshot: data });
      }
    );
  }

render() {
  return (
    <View>
      <MapView initialRegion={...} ref={map => { this.map = map }}>
        <Marker coordinate={this.state.coordinate} />
      </MapView>
      <Image source={{ uri: this.state.mapSnapshot.uri }} />
      <TouchableOpacity onPress={this.takeSnapshot}>
        Take Snapshot
      </TouchableOpacity>
    </View>
  );
}

Something like this: I want to tap on a button to take the snapshot

https://github.com/react-native-community/react-native-maps#take-snapshot-of-map

const snapShot = () => {
    takeSnapshot({
      width: 300, // optional, when omitted the view-width is used
      height: 300, // optional, when omitted the view-height is used
      format: "png", // image formats: 'png', 'jpg' (default: 'png')
      quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1)
      result: "file", // result types: 'file', 'base64' (default: 'file')
    });
    snapshot.then((uri) => {
      console.log(uri);
    });
  };
return(
<TouchableOpacity onPress={snapShot}>
   <AppText>Get snapshot</AppText>
</TouchableOpacity>
)

I started learning react with hooks and haven't work with class based components so I don't really know where to start here. Basically I am not worried about the state at the moment, I just want to be able to use this code to call a function when I tap on a button. I have updated my question. I am not worried about state at the moment — Iggy's Pop
– Iggy's Pop, Commented Aug 10, 2020 at 18:39

ViktorG · Accepted Answer · 2020-08-10 18:49:56Z

1

I hope I understood you intentions correctly. I did not test the following code but I guess it would be something like this:

import React, {useState, useRef} from 'react';
import {View} from 'react-native';
import MapView, {Marker} from 'react-native-maps';

export const Map= ({coordinate}) => {
    const [mapSnapshotUri, setMapSnapshotUri] = useState(null);
    const map = useRef(null);
    
    const snapShot = () => {
        const snapshot = map.current.takeSnapshot({
            width: 300, // optional, when omitted the view-width is used
            height: 300, // optional, when omitted the view-height is used
            format: 'png', // image formats: 'png', 'jpg' (default: 'png')
            quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1)
            result: 'file', // result types: 'file', 'base64' (default: 'file')
        });
        
        snapshot.then((uri) => {
            setMapSnapshotUri(uri);
        });
    };
    
    return (
        <View>
            <MapView ref={map}>
                <Marker coordinate={coordinate}/>
            </MapView>
            <TouchableOpacity onPress={snapShot}>
                <AppText>Get snapshot</AppText>
            </TouchableOpacity>
        </View>
    );
};

answered Aug 10, 2020 at 18:49

ViktorG

5151 gold badge11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iggy's Pop Over a year ago

Okay, this is working pretty great! The only issue I have now is that it keeps showing the same location in the snapshot, so something isn't right with the coordinates..

Collectives™ on Stack Overflow

converting class component to react functional component/hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related