Add support for using SDF template images

[Buthrakaur]

style.addImages supports sdf flag on both Android and iOS but React Native didn't support it - this PR adds the support so it's possible to use SDF template images on the map by settings the sdf flag to true along with relevant icon re-coloring styles e.g. iconColor. Code sample:

const images = {  x: { uri: 'https://example.com/1.png', sdf: true } };
...
<Images images={images} />

[KiwiKilian]

@Buthrakaur could you give an example here too? Thanks!

[Buthrakaur]

@KiwiKilian

import { Images, MapView, ShapeSource, SymbolLayer } from '@maplibre/maplibre-react-native';
import React, { useEffect, useMemo, useState } from 'react';

export function BugReport() {
  const featuresCollection: GeoJSON.FeatureCollection = useMemo(() => {
    const features: GeoJSON.Feature[] = [];

    for (let i = 1; i <= 10; i++) {
      features.push({
        type: 'Feature',
        id: i,
        properties: {
          icon: 'icon1',
          title: `POI ${i}`,
        },
        geometry: {
          type: 'Point',
          coordinates: [14.4282 + i * 0.02, 50.0806125],
        },
      });
    }

    return { type: 'FeatureCollection', features };
  }, []);

  const images = useMemo(
    () => ({
      icon1: { uri: 'https://placehold.co/32/orange/white/png', sdf: true },
    }),
    []
  );

  return (
    <MapView style={{ flex: 1 }}>
      <Images images={images} />
      <ShapeSource id="ss-1" shape={featuresCollection}>
        <SymbolLayer id="sl-1" style={{ iconImage: ['get', 'icon'], iconSize: 1 / 2, iconColor: 'pink' }} />
      </ShapeSource>
    </MapView>
  );
}

[KiwiKilian]

Thanks, I still have this on my radar. Hoping to have some time soon. Thanks for your patience!