Should all things on the map for react-native-mapbox-gl be Markers?

Question

I'm using react-native-mapbox-gl for a project. I want to render a few custom buttons/components on the map, but every time I do I think the map covers the component. I can render the button after the mapview, but then I cannot use data from the map. I checked the component is valid by rendering it somewhere else. The component I'm trying to do is a zoom button.

I could render the component outside the and feed the new zoom prop into MapView, but would it be best practice be to have all buttons and icons on the map be markers?

I have set the Z-index of the button to 10, and the Z-index of the map to -1 but that didn't help.

I also want to have animated objects on my map that are moving. I can render the map and then not have to update it while my new markers move right?

import React, { useState } from "react";
import { View, Text } from "react-native";
import styles from "./styles";
import MapboxGL from "@rnmapbox/maps";
import ZoomButton from "../ZoomButton";
MapboxGL.setAccessToken(
  "Token"
);

const coordinates = [100, 100];

const HomeMap = () => {
  const markers = [
    {
      key: 1,
      title: "first",
      coordinates: [110, -50],
    },
    {
      key: 2,
      title: "second",
      coordinates: [105, -50],
    },
  ];
  const zoom = 15;

  return (
    <View style={styles.page}>
      <View position={"relative"} style={styles.container}>
        <MapboxGL.MapView zoomEnabled={true} style={styles.map}>
          <MapboxGL.Camera zoomLevel={14} centerCoordinate={coordinates} />

          {markers.map((marker) => (
            <View style={styles.pointAnnotation} key={marker.key}>
              <MapboxGL.PointAnnotation
                id={marker.title}
                coordinate={marker.coordinates}
                style={styles.pointAnnotation}
              />
            </View>
          ))}
          <View>
            <ZoomButton
              style={styles.zoomButton}
              name={"zoom-in"}
              //onPress={() => {
              //this._map.getZoom().then((zoom) => {
              //this.camera.zoomTo(zoom + 1);
              //});
              //}}
            />
            <ZoomButton style={styles.zoomButton} name={"zoom-out"} />
          </View>
        </MapboxGL.MapView>
      </View>
    </View>
  );
};

export default HomeMap;

Answer 1

Did you try moving up the <ZoomButton/> to be the first element in the MapView? I just tried it on mine and it seems to be working fine like this. I believe when the pointAnnotations are rendered they are changing what appears after them, but I am not sure without seeing the exact styles going on in this snippet.