direction routes in react native not shown - react-native-maps

Question

first i use react-native-maps to locate the expo app in toronto,and i use react-native-maps-directions to draw route between two location in toronto.MapView component works,but its child component MapViewDirections not working.no error notification.
"react-native-maps": "0.30.2",
"react-native-maps-directions": "1.8.0"
code like below:
import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import MapViewDirections from 'react-native-maps-directions';
const LATITUDE = 43.653225;
const LONGITUDE = -79.383186;
export default function App() {
const origin = {latitude: 43.791680, longitude: -79.312770};
const destination = {latitude: 43.785230, longitude: -79.293420};
const GOOGLE_MAPS_APIKEY = 'myapikey';
return (
<View style={styles.container}>
<MapView provider="google"
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
style={styles.map} >
<MapViewDirections
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
onError={(errorMessage) => {
console.log('GOT AN ERROR');
}}
/>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
})

Answer 1

Finally,I found the solution after I check MapViewDirections's source code .MapViewDirections component has very special logic while using,this component constructed with react-native-maps,so it should be work with MapView.And secondly,its state should be shown after re-render,I use usestate to make its state rendered.I paste code here:
import * as React from 'react';
import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import MapViewDirections from 'react-native-maps-directions';
import { useState } from 'react';
const LATITUDE = 43.653225;
const LONGITUDE = -79.383186;
export default function App() {
const [coordinates] = useState([
{
latitude: 43.791680, longitude: -79.312770,
},
{
latitude: 43.785230, longitude: -79.293420,
},
]);
const origin = {latitude: 43.791680, longitude: -79.312770};
const destination = {latitude: 43.785230, longitude: -79.293420};
const GOOGLE_MAPS_APIKEY = 'AIzaSyBpAexI1D_HPIrR9xz_RqAAKDNlYKmW0Q8';
return (
<View style={styles.container}>
<MapView
style={styles.maps}
initialRegion={{
latitude: coordinates[0].latitude,
longitude: coordinates[0].longitude,
latitudeDelta: 0.0622,
longitudeDelta: 0.0121,
}}>
<MapViewDirections
origin={coordinates[0]}
destination={coordinates[1]}
apikey={GOOGLE_MAPS_APIKEY} // insert your API Key here
strokeWidth={4}
strokeColor="#111111"
/>
<Marker coordinate={coordinates[0]} />
<Marker coordinate={coordinates[1]} />
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
maps: {
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
},
})