[Bug]: textVariableAnchor does not do anything (symbolLayer)

[RyanTG]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.13

Standalone component to reproduce

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';



const symbolStyles = {
  iconImage: ["example"],
  textField: ["get", "text"],
  textOffset: [1, -2], //BUG: the first value in this array works when using textVariableAnchor, but the second value doesn't do anything when textVariableAnchor is used
  textJustify: "left",
  // textRadialOffset: 1,
  textVariableAnchor: ['bottom'], //BUG: this doesn't do anything
  textAllowOverlap: false, // true or false, neither helps textVariableAnchor
  iconAllowOverlap: false // true or false, neither helps textVariableAnchor
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'Great label',
      },
      geometry: {
        type: 'Point',
        coordinates: [4.21, 5.97],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'Another label',
      },
      geometry: {
        type: 'Point',
        coordinates: [4.41, 5.97],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        text: 'Here is a label',
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [4.31, 5.87],
      },
    },
  ],
};

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>

        <Mapbox.MapView style={styles.map}
          scaleBarEnabled={false}
          pitchEnabled={false}
          rotateEnabled={false}>
          
          <Mapbox.Camera centerCoordinate={[4.31, 5.97]} zoomLevel={7} />
          <Mapbox.ShapeSource id={'shape-source-id-0'} shape={features}>
            <Mapbox.SymbolLayer id={'circle-layer'} style={symbolStyles} />
            <Mapbox.Images images={{ example: require('../assets/example.png') }} />
          </Mapbox.ShapeSource>
        </Mapbox.MapView>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1
  },
});

Observed behavior and steps to reproduce

No matter the values in the textVariableAnchor array, the anchor is always to the left. textVariableAnchor: ['bottom', 'left', 'right', 'top'] or any variation of that does not do anything.

Furthermore, when using textVariableAnchor, the textOffset property does not properly work. For example, textOffset: [1, -2], the 1 offset there works, but the -2 offset in that array does not work (change that value to anything and it has no effect).

Expected behavior

I would expect textVariableAnchor to work as stated in the rnmapbox symbolLayer docs and the mapbox docs .

Notes / preliminary analysis

No response

Additional links and references

No response