Reputation: 11
So, i want to make a RectButton that when pressed it will execute a function (onFlyToPress()) that sends the camera to a specific coordenates. But everytime i use flyTo functions it returns to me a Exception saying that this function is unrecognized/Camera is not a object.
import React, { Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { PermissionsAndroid } from 'react-native';
import tabbarConfigs from '../appColorElements.json'; // arquivo que controla toda a estrutura da tabbar
import { RectButton } from 'react-native-gesture-handler';
export default class Principal extends Component {
state = {
position: [50, 50],
styleURL: 'mapbox://styles/qun4ntumt/ck390137d3lta1dnvs5u9428r',
};
onFlyToPress() {
this.map.flyTo([-122.400021, 37.789085], 6000);
}
render() {
return (
<View style={styles.container}>
<MapboxGL.MapView
style={styles.map}
styleURL={tabbarConfigs.colorElements.mapa.cor}
rotateEnabled={false}
animated={true}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={false}
debugActivex>
<MapboxGL.Camera
zoomLevel={16}
centerCoordinate={this.state.position}
maxZoomLevel={16}
/>
<MapboxGL.UserLocation />
</MapboxGL.MapView>
<RectButton
style={styles.btnCentralizer}
onPress={() => {
this.onFlyToPress();
}}>
<Localicon
height={20}
width={20}
fill={tabbarConfigs.colorElements.paletaApp.cinza}
style={{ alignSelf: 'center' }}
/>
</RectButton>
</View>
);
}
}
Upvotes: 1
Views: 2569
Reputation: 398
I had the same problem. Instead of flyTo() I have directly updated the center coordinates on the Camera by using setState({centerCoordinates}) in place of flyTo().
<MapboxGL.Camera
zoomLevel={15}
animationMode={'flyTo'}
animationDuration={3000}
centerCoordinate={this.state.centerCoordinate}
/>
Hope this will help.
Upvotes: 2