Render ShapeSource conditionally without not in style error

[andyl-ioki]

Hej there!

At first: Thanks for this project 👍

Project setup

We are using rnmapbox v10.1.28.
In our project we have layers which render conditionally. So their shape might be null and their shape changes often over time. The shape depends on the users interaction with the App and phone. Also the shape is saved to our state store and the Mapbox component reads it from there.

As ShapeSource must have a non empty shape, we decided to use a simple if before returning the actual ShapeSource like:

if (!point) {
  return null;
}

return {
  <MapboxGL.ShapeSource id="Point-Source" shape={point}>
    <MapboxGL.SymbolLayer id="Point-Marker" style={style} />
  </MapboxGL.ShapeSource>
}

Current Problem

Since we migrated to v10 the app creates errors, whenever we switch between both returns, e.g.:

Mapbox [error] RNMBXMapView | Map load failed: {type=source, message=Source Point-Source is not in style, begin=93170428277}

Solution

I checked the examples they always have at least a minimal shape. But for us this is not always the case.
So I tried to put in a fallback shape like [0.0, 0.0], ... and use the visibility property to just hide it, if we don't have any data for our SymbolLayer or LineLayer.

With this workaround the errors vanish completely.

Replication at RN Example App

I was not successful to replicate on the example app. 😢
The only thing I can come up with is, that it might be an race condition. We are doing many calculations on our App, changing a lot of lines here and there.
Maybe mapbox is not ready with adding the style or something at that point? 🤔

What I can give you is a near same example of what we similarily do in our App for the the example App:

Example code from `example/src/examples/Map/ShowAndHideLayer.js`

import React from 'react';
import { Text } from 'react-native';
import {
  MapView,
  Camera,
  FillLayer,
  LineLayer,
  ShapeSource,
} from '@rnmapbox/maps';

import Bubble from '../common/Bubble';

const defaultCamera = {
  centerCoordinate: [-77.044211, 38.852924],
  zoomLevel: 16,
};

const styles = {
  mapView: { flex: 1 },
};

const lineString = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [-77.044211, 38.852924],
      [-77.045659, 38.860158],
      [-77.044232, 38.862326],
      [-77.040879, 38.865454],
      [-77.039936, 38.867698],
      [-77.040338, 38.86943],
      [-77.04264, 38.872528],
      [-77.03696, 38.878424],
      [-77.032309, 38.87937],
      [-77.030056, 38.880945],
      [-77.027645, 38.881779],
      [-77.026946, 38.882645],
      [-77.026942, 38.885502],
      [-77.028054, 38.887449],
      [-77.02806, 38.892088],
      [-77.03364, 38.892108],
      [-77.033643, 38.899926],
    ],
  },
};

const otherLineString = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [-77.044211, 38.852924],
      [-77.045659, 38.860158],
      [-77.044232, 38.862326],
      [-77.040879, 38.865454],
      [-77.039936, 38.867698],
      [-77.040338, 38.86943],
      [-77.04264, 38.872528],
    ],
  },
};

const array = [lineString, otherLineString];

const ShowAndHideLayer = () => {
  const [show, setShow] = React.useState(true);
  const [visibility, setVisibility] = React.useState('visible');
  const [currentShape, setCurrentShape] = React.useState(lineString);

  const onPress = () => {
    setShow(!show);
    setVisibility(!show ? 'visible' : 'none');
    if (!show) {
      setCurrentShape(lineString);
    } else {
      setCurrentShape(otherLineString);
    }
  };

  return (
    <>
      <MapView onPress={() => onPress()} style={styles.mapView}>
        <Camera defaultSettings={defaultCamera} />
        <FillLayer id="building" existing style={{ visibility }} />
        <LineLayer id="building-outline" existing style={{ visibility }} />
        {show ? (
          <ShapeSource id="firstLineLayerSource" shape={currentShape}>
            <LineLayer
              id="firstLineLayer"
              style={{
                lineColor: '#0f0',
                lineWidth: 10,
              }}
            />
          </ShapeSource>
        ) : null}
        <CustomLineLayer show={show} />
      </MapView>
      <Bubble onPress={() => onPress()}>
        <Text>{show ? 'Hide Buildings' : 'Show Buildings'}</Text>
      </Bubble>
    </>
  );
};

const CustomLineLayer = ({ show }) => {
  const [currentShape, setCurrentShape] = React.useState(lineString);

  React.useEffect(() => {
    if (!show) {
      setCurrentShape(array[Math.floor(Math.random() * array.length)]);
    } else {
      setCurrentShape(array[Math.floor(Math.random() * array.length)]);
    }
  }, [show]);

  if (!show) return null;

  return (
    <ShapeSource id="secondLineLayerSource" shape={currentShape}>
      <LineLayer
        id="secondLineLayer"
        style={{
          lineColor: '#00f',
          lineWidth: 20,
          lineOpacity: 0.5,
        }}
      />
    </ShapeSource>
  );
};

export default ShowAndHideLayer;

/* end-example-doc */

/** @type ExampleWithMetadata['metadata'] */
const metadata = {
  title: 'Show and hide layer',
  tags: [
    'FillLayer#existing',
    'LineLayer#existing',
    'FillLayer#visibility',
    'FillLayer#visibility',
  ],
  docs: `
Changes visibility of layers part of the map
`,
};
ShowAndHideLayer.metadata = metadata;

Question

Might this be a bug because we do something wrong?
Or is it kind of a race condition on the mapbox or rnmapbox side?

If you have any clue what I can investigate further or what we are doing wrong, let me know 👍

[mfazekas]

@andyl-ioki hi, it's very hard to know what's going on, based on the info you've provided.

I really appreciate the effort that you've tried to repro in the example app.

I would suggest you try to simplify the app, by commenting out other layers in the map. Ideally you can either end up with a simple component that you can copy paste as is to the example, or discover that what other layers/feature contributes to this issue.

[andyl-ioki]

@mfazekas thanks for your fast reply!
I set down again and removed one component by another.
In the end the bug stayed 😕 ...
... until I removed the hook for getting the coordinates from the state (redux).

I moved then the redux part to the parent so that the ShapeSource component just took the feature as property. Also the parent component took care of showing/hiding the component (via {point && <ShapeSourceComponent point={point} />}).

I can maybe try to add redux to the example App and see how it behaves there. Don't know if I can manage to do it until the end of the week or if it will be postponed to next month (unfortunately).

[mfazekas]

@andyl-ioki thanks much, Ideally redux is not doing stuff that we can't reproduce with setState etc. But if you can repro with a simple component and simple redux setup that's a good direction already

[andyl-ioki]

Good hint as well. Thanks!
I will try that first 👍