[Bug]: images not being stretched?

[thomasgrivet]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.1.15

Standalone component to reproduce

import React  from 'react';
import { Camera, Image, Images, MapView, setAccessToken, ShapeSource, SymbolLayer } from '@rnmapbox/maps';
import { View } from 'react-native';
import { useEffect, useMemo } from 'react';
import { feature, featureCollection } from '@turf/turf';

export default function Map() {
    const source = useMemo(() => {
        return featureCollection([
            feature({
                coordinates: [3.0573, 50.6292],
                type: 'Point'
            })
        ]);
    }, []);

    useEffect(() => {
        (async () => {
            await setAccessToken('[MAPBOX_TOKEN]');
        })();
    });

    return (
        <MapView
            style={{
                height: '100%',
                width: '100%'
            }}
        >
            <Camera centerCoordinate={[3.0573, 50.6292]} />
            <Images>
                <Image name="pin" content={[8, 4, 100 - 8, 50 - 4]} stretchX={[[8, 100 - 8]]} stretchY={[[4, 50 - 4]]}>
                    <View
                        style={{
                            height: 50,
                            width: 100,
                            backgroundColor: 'red',
                            borderRadius: 8
                        }}
                    />
                </Image>
            </Images>
            <ShapeSource id="pins-souce" shape={source}>
                <SymbolLayer
                    id="stretchable-pins"
                    sourceID="pins-source"
                    style={{
                        textField: 'hello',
                        textSize: 14,
                        textColor: '#000',
                        iconAllowOverlap: true,
                        textAllowOverlap: true,
                        iconImage: 'pin',
                        iconTextFit: 'both'
                    }}
                />
            </ShapeSource>
        </MapView>
    );
};

Observed behavior and steps to reproduce

Hello, the 'pin' image is being resized to fit the text, but is not being stretched. Did I miss something? Thanks!

Expected behavior

There should be a padding of 8px vertically & 4px horizontally

Notes / preliminary analysis

No response

Additional links and references

I have created a minimum reproductible example here : https://github.com/Cocolis-1/blank-expo/tree/feat/mapbox-stretchable-images If you want to try it, you have to edit the MAPBOX_DOWNLOAD_TOKEN in app.json and the MAPBOX_TOKEN in Map.tsx. To create a dev client, run eas build --profile development -p ios --local, please ping me if you need any help, thanks!

[mfazekas]

@thomasgrivet can you explain this a bit further:

Hello, the 'pin' image is being resized to fit the text, but is not being stretched. Did I miss something? Thanks!

Images are resized by stretching the parts that specified. So being resized but not being stretched, doesn't make sense to me. Can you explain?

[thomasgrivet]

Hello! Sorry for the confusion, what I meant was that even though the pin image is being resized to fit the text, I would have expected it to have some spacing around my text (8px horizontally with stretchX={[[8, 100 - 8]]} and 4px vertically with stretchY={[[4, 50 - 4]]}). But I may have misunderstood how to use those props, let me know if I haven't been clear. Thanks!

[mfazekas]

stretch doesn't add padding, it just means that For that you can use content or https://rnmapbox.github.io/docs/components/SymbolLayer#icontextfitpadding

https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable/

[thomasgrivet]

Thanks for the quick answer! I initially wanted to use iconTextFitPadding but this would distort the borderRadius of the image, which is why I though using stretchX would be ideal. In their example, they use a stretchX which starts at 25 to avoid having the bubble's top left borderRadius change due to the resizing of the asset. I can add an example of the result with iconTextFitPadding if you want!