React Native: Hotspot / crop not working for images

[jacdx]

trafficstars

This may apply to plain React as well.

Hotspot & crop settings aren't getting translated into image URL parameters for block content images. It looks like it should be happening, but there is some translation in internals happening to the image/asset objects that doesn't allow the crop and hotspot properties to get translated.

Example image node: {_key: "8e61aa8bb377"_type: "image"asset: {_ref: "image-208d3bbfdb69bf70d8101c5d7917e87534e82fc6-2400x3000-jpg", _type: "reference"}, crop: {_type: "sanity.imageCrop", bottom: 0, left: 0, right: 0, top: 0}, hotspot: {_type: "sanity.imageHotspot", height: 0.1439999999999996, width: 0.7633333333333336, x: 0.3816666666666668, y: 0.6746666666666663}, __proto__: Object }

Turns into this URL: https://cdn.sanity.io/images/[mine]/staging/208d3bbfdb69bf70d8101c5d7917e87534e82fc6-2400x3000.jpg

Whereas, a non-Block Content image object: __typename: "Image" asset: __typename: "SanityImageAsset" url: "https://cdn.sanity.io/images/[mine]/staging/e90e33423f8ff21a275dd8b475ab5b5702db638b-1578x876.png" __proto__: Object crop: __typename: "SanityImageCrop" bottom: 0 left: 0 right: 0 top: 0 __proto__: Object hotspot: __typename: "SanityImageHotspot" height: 0.9571509678525129 width: 0.29369797859690766 x: 0.45362663495838296 y: 0.47857548392625643 __proto__: Object

using imageUrlBuilder from @sanity/image-url translates the rect and focal point URL parameters correctly.

[kmelve]

Thanks for reporting – we will look into it when we get the chance!

[rexxars]

Closing this as https://github.com/portabletext/react-native-portabletext is now the successor library to this one for react native