fix(ios): resolve pending layer waiters - #4288

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

const routes = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { kind: 'waiting' },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-74.012, 40.716],
          [-74.0, 40.716],
        ],
      },
    },
    {
      type: 'Feature',
      properties: { kind: 'anchor' },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-74.012, 40.713],
          [-74.0, 40.713],
        ],
      },
    },
  ],
};

const styles = {
  map: { flex: 1 },
  status: {
    position: 'absolute',
    top: 60,
    left: 12,
    right: 12,
    padding: 12,
    backgroundColor: 'white',
  },
  statusText: { color: 'black', fontWeight: '700' },
};

class BugReportExample extends React.Component {
  state = { status: 'CHECKING' };

  checkWaitingLayer = async () => {
    try {
      const result = await this.map.queryRenderedFeaturesInRect([], null, [
        'waiting-layer',
      ]);

      this.setState({
        status: result?.features?.length
          ? 'PASS: WAITING LAYER RENDERED'
          : 'FAIL: WAITING LAYER MISSING',
      });
    } catch {
      this.setState({ status: 'FAIL: WAITING LAYER MISSING' });
    }
  };

  render() {
    return (
      <View style={styles.map}>
        <MapView
          ref={(map) => {
            this.map = map;
          }}
          style={styles.map}
          styleURL={StyleURL.Light}
          onMapIdle={this.checkWaitingLayer}
        >
          <Camera
            defaultSettings={{
              centerCoordinate: [-74.006, 40.7145],
              zoomLevel: 14,
            }}
          />

          <ShapeSource id="layer-waiter-reproducer" shape={routes}>
            <LineLayer
              id="waiting-layer"
              belowLayerID="anchor-layer"
              filter={['==', ['get', 'kind'], 'waiting']}
              style={{ lineColor: '#0066ff', lineWidth: 12 }}
            />

            <LineLayer
              id="anchor-layer"
              filter={['==', ['get', 'kind'], 'anchor']}
              style={{ lineColor: '#ff0066', lineWidth: 12 }}
            />
          </ShapeSource>
        </MapView>

        <View style={styles.status}>
          <Text testID="layer-waiter-status" style={styles.statusText}>
            {this.state.status}
          </Text>
        </View>
      </View>
    );
  }
}

export default BugReportExample;