Convert from class-based component to functional-based component - reactjs

Question

I am trying to use the react-native-maps-directions example found in https://www.npmjs.com/package/react-native-maps-directions on my project.
Can someone help me convert this code from class base component to functional base component.
import React, { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.771707;
const LONGITUDE = -122.4053769;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const GOOGLE_MAPS_APIKEY = '…';
class Example extends Component {
constructor(props) {
super(props);
// AirBnB's Office, and Apple Park
this.state = {
coordinates: [
{
latitude: 37.3317876,
longitude: -122.0054812,
},
{
latitude: 37.771707,
longitude: -122.4053769,
},
],
};
this.mapView = null;
}
onMapPress = (e) => {
this.setState({
coordinates: [
...this.state.coordinates,
e.nativeEvent.coordinate,
],
});
}
render() {
return (
<MapView
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
style={StyleSheet.absoluteFill}
ref={c => this.mapView = c}
onPress={this.onMapPress}
>
{this.state.coordinates.map((coordinate, index) =>
<MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
)}
{(this.state.coordinates.length >= 2) && (
<MapViewDirections
origin={this.state.coordinates[0]}
waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): undefined}
destination={this.state.coordinates[this.state.coordinates.length-1]}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
strokeColor="hotpink"
optimizeWaypoints={true}
onStart={(params) => {
console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
}}
onReady={result => {
console.log(`Distance: ${result.distance} km`)
console.log(`Duration: ${result.duration} min.`)
this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
}}
onError={(errorMessage) => {
// console.log('GOT AN ERROR');
}}
/>
)}
</MapView>
);
}
}
export default Example;
Can someone help me convert this code from class base component to functional base component.
Thanks.

Answer 1

i'm not react native use (i only use the reactjs) but this is my try it may help (i can't test if it work or not).
import React from 'react'
import { useState ,useRef} from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.771707;
const LONGITUDE = -122.4053769;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const GOOGLE_MAPS_APIKEY = '…';
const Example = () => {
const [coordinates, setCoordinates] = useState([{
latitude: 37.3317876,
longitude: -122.0054812,
},
{
latitude: 37.771707,
longitude: -122.4053769,
},
],)
let mapView = useRef(null)
let onMapPress = (e) => {
setCoordinates((coordinates) =>
[
...coordinates,
e.nativeEvent.coordinate,
],
);
}
return (
<MapView
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
style={StyleSheet.absoluteFill}
ref={c => mapView.current = c}
onPress={onMapPress}
>
{coordinates.map((coordinate, index) =>
<MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
)}
{(coordinates.length >= 2) && (
<MapViewDirections
origin={coordinates[0]}
waypoints={(coordinates.length > 2) ? coordinates.slice(1, -1) : undefined}
destination={coordinates[coordinates.length - 1]}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
strokeColor="hotpink"
optimizeWaypoints={true}
onStart={(params) => {
console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
}}
onReady={result => {
console.log(`Distance: ${result.distance} km`)
console.log(`Duration: ${result.duration} min.`)
mapView.current.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
}}
onError={(errorMessage) => {
// console.log('GOT AN ERROR');
}}
/>
)}
</MapView>
)
}
export default Example;