Is it possible to use own "left" "right" "up" "down" buttons for react-native-maps?

Question

I am using react-native-maps for react-native and I like to use my own buttons for "left" "right" "up" and "down" instead of using the fingers to swipe. (also a button for rotation)

i searched a lot in the web, but i couldn't find a solution for that.

---

It was possible for me to use setInterval and add a number to the longitude or latitude, but this is/was very data intensive, slow and not so smooth.

<MapView style={{ flex: 1 }}
                    initialRegion={this.state.region}
                    followUserLocation={false}
                    showsUserLocation={false}
                    zoomEnabled={false}
                    zoomControlEnabled={false}
                    zoomTapEnabled={false}
                    rotateEnabled={false}
                    scrollEnabled={false}
                  ></MapView>
<Button title="up" onPress... />
<Button title="down" onPress.../>
<Button title="left" onPress... />
<Button title="right onPress... />
<Button title="rotate-left" onPress... />
<Button title="rotate-right" onPress... />

Motivation

Does anyone have any idea? Or maybe -> is it possible to use buttons for swipe instead of using the fingers to swipe? Thanks Jan – Motivation

Yes, you can use buttons. Simply add number to longitude or latitude after pressing relevant button. But I guess problem is the same as with setInterval. – Sworn

Answer 1

You can use camera view instead of region for specifying latitude and longitude. It provides a way to navigate to specific coordinate and also rotate the map.
First create state for initial position of map:

this.state = {
camera: {
        center: {
          latitude: 40.712776,
          longitude: -74.005974,
        },
        pitch: 0,
        heading: 0,
        zoom: 15
      }
}

then use it with MapView like this:

<MapView 
      ref={(ref) => this.mapView = ref}
      camera={this.state.camera}
      .../>

Now specify calculated latitude and longitude for moving to specific side(function for left, right, up and down button).

    MoveToPosition = () => {
        const duration = 1000;

        //provided static latitude and longitude for moving downwards from original location
        var newCam = {
          center: {
            latitude: 40.702776,
            longitude: -74.005974,
          }
        }
        //below method animates view to specified latitude and longitude in provided duration
        this.mapView.animateCamera(newCam, duration);
    }

And to rotate the map you can specify degree in number in heading prop.

RotateFun = () => {
    heading += 90;
    this.mapView.animateCamera({ heading: heading }, 1000);
  }

You can do the same using region prop and animateToRegion method where you can specify latitude and longitude.(but, i think there isn't any prop for rotating when using region)

You can find more information for the same in documentation: https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

Tram