Thiago Leão
Thiago Leão

Reputation: 11

MapBoxGL flyTo not working - unrecognized

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

Answers (1)

Sharad S Katre
Sharad S Katre

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

Related Questions