@amazon-devices/expo-image 2.0.1758683737

package/kepler/ExpoImageCacheHandler.cpp

@@ -0,0 +1,15 @@
+#include "ExpoImageCacheHandler.h"
+
+void ExpoImageCacheHandler::clearMemoryCache() {
+    cacheHandler.clearMemoryCache();
+}
+
+void ExpoImageCacheHandler::clearDiskCache() {
+    cacheHandler.clearPersistentCache();
+}
+
+void ExpoImageCacheHandler::load(
+        volta::ImageDetails& imageDetails,
+        const volta::react::KeplerScriptImageLoaderDelegate::Shared& delegate) {
+    cacheHandler.load(imageDetails, delegate);
+}

package/kepler/ExpoImageCacheHandler.h

@@ -0,0 +1,28 @@
+#pragma once
+
+#include <KeplerScript/utils/image/KeplerScriptImageCacheHandler.h>
+#include <Volta/cache/image/ImageUtil.h>
+
+class IExpoImageCacheHandler {
+public:
+    virtual ~IExpoImageCacheHandler() = default;
+
+    virtual void clearMemoryCache() = 0;
+    virtual void clearDiskCache() = 0;
+
+    virtual void load(
+            volta::ImageDetails& imageDetails,
+            const volta::react::KeplerScriptImageLoaderDelegate::Shared& keplerScriptImageLoaderDelegate) = 0;
+};
+
+class ExpoImageCacheHandler : public IExpoImageCacheHandler {
+public:
+    void clearMemoryCache() override;
+    void clearDiskCache() override;
+    void load(
+            volta::ImageDetails& imageDetails,
+            const volta::react::KeplerScriptImageLoaderDelegate::Shared& keplerScriptImageLoaderDelegate) override;
+
+private:
+    volta::react::KeplerScriptImageCacheHandler cacheHandler;
+};

package/kepler/ExpoImageComponent.cpp

@@ -0,0 +1,579 @@
+/*
+ * Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL
+ *
+ * Use is subject to license terms.
+ */
+
+#include "ExpoImageComponent.h"
+
+#include <KeplerScript/logger/KPLog.h>
+#include <KeplerScript/utils/image/LocalAssetImageLoader.h>
+#include <curl/curl.h>
+
+#include <unordered_map>
+
+#include "ImageWrapper/BlurhashImageWrapper.h"
+#include "ImageWrapper/CacheImageWrapper.h"
+#include "ImageWrapper/LocalImageWrapper.h"
+#include "ImageWrapper/ThumbhashImageWrapper.h"
+#include "boost/algorithm/string.hpp"
+#include "utils/PlaceholderImageLoaderDelegate.h"
+#include "utils/SourceImageLoaderDelegate.h"
+
+using namespace volta::react;
+
+namespace {
+bool startsWith(const std::string& string, const std::string& pattern) {
+    return boost::algorithm::istarts_with(string, pattern);
+}
+
+std::shared_ptr<ImageWrapper> createImageWrapper(
+        const facebook::react::ImageSource& source,
+        const std::weak_ptr<LocalAssetImageLoader>& localImageLoader,
+        const std::shared_ptr<KeplerScriptImageCacheHandler>& cacheHandler,
+        const volta::IImageLoaderDelegate::Shared& loaderDelegate,
+        const ImagePriority priority) {
+    if (source.uri.empty()) return nullptr;
+
+    if (startsWith(source.uri, "blurhash")) {
+        return std::make_shared<BlurHashImageWrapper>(source, loaderDelegate);
+    } else if (startsWith(source.uri, "thumbhash")) {
+        return std::make_shared<ThumbHashImageWrapper>(source, loaderDelegate);
+    } else if (startsWith(source.uri, "file:///")) {
+        return std::make_shared<LocalImageWrapper>(source, localImageLoader, loaderDelegate);
+    }
+
+    // CacheImageWrapper should handle following cases:
+    // - Raw data URI starting with `data:`
+    // - Remote URI
+    return std::make_shared<CacheImageWrapper>(source, cacheHandler, loaderDelegate, priority);
+}
+
+void paintImage(
+        const volta::graphics::Image& image,
+        volta::graphics::Canvas& canvas,
+        const volta::graphics::Paint& paint,
+        const volta::graphics::Size& size,
+        float scale) {
+    KPLog.debug("ExpoImage :: paintImage");
+    const auto& content = volta::graphics::Size{image.width() * scale, image.height() * scale};
+    const volta::graphics::Alignment alignment = volta::graphics::Alignment::center();
+    const auto& offset = content.align(size, alignment);
+    canvas.drawImageRect2(image, {offset, content}, volta::graphics::Image::FilterQuality::Medium, &paint);
+}
+
+}  // namespace
+
+ExpoImageDrawableLayer::ExpoImageDrawableLayer() :
+        tintColor_(volta::graphics::Color(std::numeric_limits<int>::max())),
+        overlayColor_(volta::graphics::Color(std::numeric_limits<int>::max())),
+        imageContentFit_(ImageContentFit::Cover),
+        imagePlaceholderContentFit_(ImageContentFit::ScaleDown) {}
+
+void ExpoImageDrawableLayer::setSize(const volta::graphics::Size& size) {
+    KPLog.debug("ExpoImage :: setSize");
+    size_ = size;
+}
+
+void ExpoImageDrawableLayer::paintImageWithContentFit(
+        const volta::graphics::Image& image,
+        volta::graphics::Canvas& canvas,
+        const volta::graphics::Paint& paint,
+        const ImageContentFit imageContentFit,
+        const bool isPlaceholderUsed) {
+    const auto& scaleWidth = size_.width() / image.width();
+    const auto& scaleHeight = size_.height() / image.height();
+
+    switch (imageContentFit) {
+        case ImageContentFit::Cover: {
+            auto scale = imageAllowDownscaling_ ? std::max(scaleWidth, scaleHeight) : 1;
+            paintImage(image, canvas, paint, size_, scale);
+            break;
+        }
+        case ImageContentFit::Contain: {
+            auto scale = imageAllowDownscaling_ ? std::min(scaleWidth, scaleHeight) : 1;
+            paintImage(image, canvas, paint, size_, scale);
+            break;
+        }
+        case ImageContentFit::Fill: {
+            canvas.drawImageRect2(image, size_, volta::graphics::Image::FilterQuality::Medium, &paint);
+            break;
+        }
+        case ImageContentFit::None: {
+            if (isPlaceholderUsed) {
+                paintImage(image, canvas, paint, size_, 1);
+            } else {
+                const auto& content =
+                        volta::graphics::Size{static_cast<float>(image.width()), static_cast<float>(image.height())};
+                float offsetX = imageContentPosition_.offsetX(content, size_);
+                float offsetY = imageContentPosition_.offsetY(content, size_);
+                canvas.drawImageRect2(
+                        image,
+                        {{offsetX, offsetY}, content},
+                        volta::graphics::Image::FilterQuality::Medium,
+                        &paint);
+            }
+            break;
+        }
+        case ImageContentFit::ScaleDown: {
+            auto scale = imageAllowDownscaling_ ? std::min<float>(std::min(scaleWidth, scaleHeight), 1) : 1;
+            paintImage(image, canvas, paint, size_, scale);
+            break;
+        }
+    }
+}
+
+void ExpoImageDrawableLayer::onDraw(volta::graphics::Canvas& canvas) {
+    KPLog.debug("ExpoImage :: onDraw");
+    volta::graphics::Image* image = imageWrapper_ ? imageWrapper_->getImage() : nullptr;
+    ImageContentFit imageContentFit = imageContentFit_;
+    bool isPlaceholderUsed = false;
+
+    if (image == nullptr && placeholderWrapper_ != nullptr) {
+        image = placeholderWrapper_->getImage();
+        imageContentFit = imagePlaceholderContentFit_;
+        isPlaceholderUsed = true;
+    }
+
+    // draw overlay color
+    if (overlayColor_ != volta::graphics::Color(std::numeric_limits<int>::max()) &&
+        imageContentFit != ImageContentFit::Cover) {
+        volta::graphics::Paint overlayPaint;
+        overlayPaint.setAntiAlias(true);
+        overlayPaint.setColor(overlayColor_);
+        overlayPaint.setStyle(volta::graphics::Paint::Style::Fill);
+        auto overlayColorPath = borderCalculatedMetrics_.outerDrawPath();
+        overlayColorPath.setFillType(volta::graphics::Path::FillType::EvenOdd);
+        canvas.drawPath(overlayColorPath, overlayPaint);
+    }
+
+    // clip rectangle based on borders
+    if (!borderCalculatedMetrics_.innerClipPathForBorderRadius().isEmpty()) {
+        canvas.clipRRect(borderCalculatedMetrics_.innerClipRRectForBorderRadius());
+    } else {
+        canvas.clipRect({size_});
+    }
+
+    if (image == nullptr) {
+        return;
+    }
+
+    // draw tint color
+    volta::graphics::Paint paint;
+    if (tintColor_ != volta::graphics::Color(std::numeric_limits<int>::max())) {
+        paint.setColorFilter(volta::graphics::PorterDuffColorFilter::makePorterDuffColorFilter(
+                tintColor_.argb(),
+                volta::graphics::PorterDuffMode::SrcATop));
+    }
+
+    // Blur Radius
+    if (blurRadius_ > 0.0) {
+        auto blurFilter = volta::graphics::BlurImageFilter::makeBlurImageFilter(
+                blurRadius_,
+                blurRadius_,
+                volta::graphics::TileMode::Decal);
+        paint.setImageFilter(blurFilter);
+    }
+
+    // Src change animation
+    volta::graphics::Image* oldImage = oldImageWrapper_ ? oldImageWrapper_->getImage() : nullptr;
+    if (oldImage != nullptr) {
+        paint.setAlpha(255 - opacity_);
+        paintImageWithContentFit(*oldImage, canvas, paint, imageContentFit, isPlaceholderUsed);
+    }
+    paint.setAlpha(opacity_);
+    paintImageWithContentFit(*image, canvas, paint, imageContentFit, isPlaceholderUsed);
+
+    if (shouldInitializeAnimation_) {
+        onAnimationInit_();
+        shouldInitializeAnimation_ = false;
+    }
+}
+
+ExpoImageComponent::ExpoImageComponent(
+        const std::shared_ptr<volta::react::KeplerScriptImageCacheHandler>& cacheHandler) :
+        tintColor_(volta::graphics::Color(std::numeric_limits<int>::max())),
+        overlayColor_(volta::graphics::Color(std::numeric_limits<int>::max())),
+        animator_(volta::Animator(volta::Duration{0.0f})),
+        cacheHandler_(cacheHandler) {
+    opacityLayer_.addChild(imageDrawableLayer_);
+    animation_ = animator_.animate(0.0f);
+}
+
+void ExpoImageComponent::startImageAnimation() {
+    imageDrawableLayer_.onAnimationInit_ = [this]() { this->init(); };
+    imageDrawableLayer_.shouldInitializeAnimation_ = true;
+    imageDrawableLayer_.opacity_ = 0;
+    animator_.reset();
+    animator_.start();
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::animateImage() {
+    if (animator_.animating()) {
+        imageDrawableLayer_.opacity_ = static_cast<uint8_t>(std::floor((*animation_ / opacityTargetValue_) * 255));
+        imageDrawableLayer_.invalidate();
+    }
+}
+
+void ExpoImageComponent::event(volta::EventContext& context) {
+    if (context.event().type() == volta::Event::Type::Frame) {
+        if (animator_.animating()) {
+            animateImage();
+            context.markNeedFrame();
+        }
+    }
+}
+
+void ExpoImageComponent::setTintColor(const int& newValue) {
+    KPLog.debug("ExpoImage :: setTintcolor");
+    tintColor_ = volta::graphics::Color(newValue);
+    imageDrawableLayer_.tintColor_ = tintColor_;
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::setBlurRadius(const double& newValue) {
+    KPLog.debug("ExpoImage :: setBlurRadius");
+    imageDrawableLayer_.blurRadius_ = newValue;
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::setOverlayColor(const int& newValue) {
+    KPLog.debug("ExpoImage :: setOverlayColor");
+    overlayColor_ = volta::graphics::Color(newValue);
+    imageDrawableLayer_.overlayColor_ = overlayColor_;
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::setRecyclingKey(const std::string& newValue) {
+    KPLog.debug("ExpoImage :: setRecyclingKey");
+    shouldClearOnSourceChange_ = recyclingKey_ != "" && recyclingKey_ != newValue;
+    recyclingKey_ = newValue;
+}
+
+ImageContentFit parseImageContentFit(
+        const std::string& contentFit,
+        ImageContentFit defaultValue = ImageContentFit::Cover) {
+    KPLog.debug("ExpoImage :: parseImageContentFit");
+    if (contentFit == "contain") {
+        return ImageContentFit::Contain;
+    } else if (contentFit == "fill") {
+        return ImageContentFit::Fill;
+    } else if (contentFit == "scale-down") {
+        return ImageContentFit::ScaleDown;
+    } else if (contentFit == "none") {
+        return ImageContentFit::None;
+    } else if (contentFit == "cover") {
+        return ImageContentFit::Cover;
+    }
+    return defaultValue;
+}
+
+void ExpoImageComponent::setContentFit(const std::string& newValue) {
+    KPLog.debug("ExpoImage :: setContentFit");
+    contentFit_ = newValue;
+    imageDrawableLayer_.imageContentFit_ = parseImageContentFit(newValue);
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::setPlaceholderContentFit(const std::string& newValue) {
+    KPLog.debug("ExpoImage :: setPlaceholderContentFit");
+    placeholderContentFit_ = newValue;
+    imageDrawableLayer_.imagePlaceholderContentFit_ = parseImageContentFit(newValue, ImageContentFit::ScaleDown);
+    imageDrawableLayer_.invalidate();
+}
+
+void ExpoImageComponent::setAllowDownscaling(const bool& newValue) {
+    KPLog.debug("ExpoImage :: setAllowDownscaling");
+    imageDrawableLayer_.imageAllowDownscaling_ = newValue;
+    imageDrawableLayer_.invalidate();
+}
+
+facebook::react::ImageSource parseImageSource(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    auto imageSourceJsonContainer = newValue;
+    // JSON will look akin to:
+    // {
+    //    "__packager_asset":true,
+    //    "width":200.0,
+    //    "uri":"file:///Volumes/MyHD/workspace/src/somepath/default-loading-image.png",
+    //    "height":200.0,
+    //    "scale":1.0
+    // }
+
+    facebook::react::ImageSource imageSource;
+
+    std::string decodedUrl;
+    folly::uriUnescape(imageSourceJsonContainer["uri"].getValue<std::string>(""), decodedUrl);
+
+    imageSource.uri = decodedUrl;
+    imageSource.size.height = imageSourceJsonContainer["height"].getValue<float>(0.0);
+    imageSource.size.width = imageSourceJsonContainer["width"].getValue<float>(0.0);
+    return imageSource;
+}
+
+void ExpoImageComponent::setSource(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    KPLog.debug("ExpoImage :: setSource {}", newValue.toJson());
+    if (newValue.getType() == utils::json::JsonContainer::Type::ARRAY) {
+        sources_.resize(newValue.size());
+        for (int i = 0; i < newValue.size(); ++i) {
+            auto jsonContainer = newValue[i];
+            sources_[i] = parseImageSource(jsonContainer);
+        }
+        rerenderIfNeeded();
+    }
+}
+
+std::optional<facebook::react::ImageSource> ExpoImageComponent::getBestSource(
+        const std::vector<facebook::react::ImageSource>& sources) {
+    if (sources.empty()) return std::nullopt;
+
+    if (sources.size() == 1) {
+        return sources.front();
+    }
+
+    int targetPixelCount = imageDrawableLayer_.size_.width() * imageDrawableLayer_.size_.height();
+    if (targetPixelCount == 0) return std::nullopt;
+
+    facebook::react::ImageSource bestSource;
+    double bestFit = std::numeric_limits<double>::max();
+    for (auto& source : sources) {
+        int pixelCount = source.size.width * source.size.height;
+        double fit = abs(1 - (pixelCount / targetPixelCount));
+
+        if (fit < bestFit) {
+            bestSource = source;
+            bestFit = fit;
+        }
+    }
+
+    return bestSource;
+}
+
+void ExpoImageComponent::setPlaceholder(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    KPLog.debug("ExpoImage :: setPlaceholder {}", newValue.toJson());
+    if (newValue.getType() == utils::json::JsonContainer::Type::ARRAY) {
+        placeholders_.resize(newValue.size());
+        for (int i = 0; i < newValue.size(); ++i) {
+            auto jsonContainer = newValue[i];
+            placeholders_[i] = parseImageSource(jsonContainer);
+        }
+        rerenderIfNeeded();
+    }
+}
+
+ImagePriority parseImagePriority(const std::string& priority) {
+    KPLog.debug("ExpoImage :: parseImagePriority");
+    if (priority == "low") {
+        return ImagePriority::Low;
+    } else if (priority == "normal") {
+        return ImagePriority::Normal;
+    } else if (priority == "high") {
+        return ImagePriority::High;
+    }
+    return ImagePriority::Normal;
+}
+
+void ExpoImageComponent::setPriority(const std::string& newValue) {
+    KPLog.debug("ExpoImage :: setPriority");
+    priority_ = parseImagePriority(newValue);
+}
+
+std::optional<float> tryParseStringToFloat(const std::string& value) {
+    if (!value.empty()) {
+        try {
+            return std::stof(value);
+        } catch (const std::logic_error& e) {
+            return std::nullopt;
+        }
+    }
+    return std::nullopt;
+}
+
+ImageContentPositionValue parseContentPositionValue(const utils::json::JsonContainer constNewValue) {
+    auto newValue = constNewValue;
+    KPLog.debug("ExpoImage :: parseContentPositionValue");
+    ImageContentPositionValue imageContentPositionValue;
+    switch (newValue.getType()) {
+        case utils::json::JsonContainer::Type::STRING: {
+            std::string value = newValue.getValue<std::string>("");
+            if (value.back() == '%') {
+                auto parsedValue = tryParseStringToFloat(value);
+                imageContentPositionValue.value_ = parsedValue;
+                imageContentPositionValue.isPercentage_ = true;
+            }
+            break;
+        }
+        case utils::json::JsonContainer::Type::DOUBLE:
+            imageContentPositionValue.value_ = static_cast<float>(newValue.getValue<double>(0.0));
+            imageContentPositionValue.isPercentage_ = false;
+            break;
+        case utils::json::JsonContainer::Type::INT64:
+            imageContentPositionValue.value_ = static_cast<float>(newValue.getValue<int64_t>(0));
+            imageContentPositionValue.isPercentage_ = false;
+            break;
+    }
+    return imageContentPositionValue;
+}
+
+void ExpoImageComponent::setContentPosition(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    KPLog.debug("ExpoImage :: setContentPosition {}", newValue.toJson());
+
+    auto map = newValue.getValuesToMap<utils::json::JsonContainer>();
+    ImageContentPositionValue top = parseContentPositionValue(map["top"]);
+    ImageContentPositionValue bottom = parseContentPositionValue(map["bottom"]);
+    ImageContentPositionValue right = parseContentPositionValue(map["right"]);
+    ImageContentPositionValue left = parseContentPositionValue(map["left"]);
+
+    imageDrawableLayer_.imageContentPosition_ = ImageContentPosition(top, bottom, right, left);
+    imageDrawableLayer_.invalidate();
+}
+
+ImageTransition parseTransition(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    ImageTransition imageTransition;
+    imageTransition.duration = newValue["duration"].getValue<float>(0.0f) / 1000.0f;
+    imageTransition.timing = newValue["timing"].getValue<std::string>("");
+    return imageTransition;
+}
+
+void ExpoImageComponent::createImageAnimation(ImageTransition& imageTransition) {
+    animator_ = volta::Animator(volta::Duration{imageTransition.duration});
+    auto animation = animator_.animate(opacityTargetValue_);
+    if (imageTransition.timing == "ease-in") {
+        animation_ = animation.transform(volta::curve::easeInCubic);
+    } else if (imageTransition.timing == "ease-out") {
+        animation_ = animation.transform(volta::curve::easeOutCubic);
+    } else if (imageTransition.timing == "ease-in-out") {
+        animation_ = animation.transform(volta::curve::easeInOutCubic);
+    } else if (imageTransition.timing == "linear") {
+        animation_ = animation;
+    } else {
+        animation_ = animation.transform(volta::curve::easeInOutCubic);
+    }
+    // we should check that running animation makes sense, otherwise it may lead to unexpected behaviors
+    shouldAnimateOnSrcChange_ = imageTransition.duration != 0;
+}
+
+void ExpoImageComponent::setTransition(const utils::json::JsonContainer& constNewValue) {
+    auto newValue = constNewValue;
+    KPLog.debug("ExpoImage :: setTransition {}", newValue.toJson());
+    auto imageTransition = parseTransition(newValue);
+    createImageAnimation(imageTransition);
+}
+
+void ExpoImageComponent::createCurrentSource(facebook::react::ImageSource bestSource) {
+    currentSource_ = createImageWrapper(
+            bestSource,
+            getLocalAssetImageLoader(),
+            cacheHandler_,
+            createSourceLoaderDelegate([weakSelf = weak_from_this()]() {
+                if (auto self = weakSelf.lock()) {
+                    auto strongSelf = std::static_pointer_cast<ExpoImageComponent>(self);
+                    strongSelf->imageDrawableLayer_.imageWrapper_ = strongSelf->currentSource_;
+                    if (strongSelf->shouldAnimateOnSrcChange_) {
+                        strongSelf->imageDrawableLayer_.oldImageWrapper_ = strongSelf->oldSource_;
+                        strongSelf->startImageAnimation();
+                    } else {
+                        strongSelf->imageDrawableLayer_.invalidate();
+                    }
+                }
+            }),
+            priority_);
+}
+
+void ExpoImageComponent::rerenderIfNeeded() {
+    auto bestSourceA = getBestSource(sources_);
+    if (bestSourceA != std::nullopt) {
+        auto bestSource = bestSourceA.value();
+        volta::react::KPLog.warn("ExpoImage :: currentSource nullptr {} ", currentSource_ == nullptr);
+        if (currentSource_ != nullptr) {
+            if (bestSource == currentSource_->getSource() && currentSource_->isLoaded())
+                return;
+            else if (bestSource != currentSource_->getSource()) {
+                oldSource_ = currentSource_;
+
+                createCurrentSource(bestSource);
+                if (shouldClearOnSourceChange_) {
+                    imageDrawableLayer_.imageWrapper_ = currentSource_;
+                    imageDrawableLayer_.invalidate();
+                    shouldClearOnSourceChange_ = false;
+                }
+            }
+        } else {
+            createCurrentSource(bestSource);
+        }
+        if (currentSource_ != nullptr && !currentSource_->isLoaded()) currentSource_->load();
+    }
+
+    auto bestPlaceholderA = getBestSource(placeholders_);
+    if (bestPlaceholderA != std::nullopt) {
+        auto bestPlaceholder = bestPlaceholderA.value();
+        if (currentPlaceholder_ != nullptr) {
+            if (bestPlaceholder == currentPlaceholder_->getSource() && currentPlaceholder_->isLoaded()) return;
+        } else {
+            currentPlaceholder_ = createImageWrapper(
+                    bestPlaceholder,
+                    getLocalAssetImageLoader(),
+                    cacheHandler_,
+                    createPlaceholderLoaderDelegate([weakSelf = weak_from_this()]() {
+                        if (auto self = weakSelf.lock()) {
+                            auto strongSelf = std::static_pointer_cast<const ExpoImageComponent>(self);
+                            strongSelf->imageDrawableLayer_.placeholderWrapper_ = strongSelf->currentPlaceholder_;
+                            strongSelf->imageDrawableLayer_.invalidate();
+                        }
+                    }),
+                    priority_);
+        }
+        if (currentPlaceholder_ != nullptr && !currentPlaceholder_->isLoaded()) currentPlaceholder_->load();
+    }
+}
+
+void ExpoImageComponent::updateLayoutMetrics(
+        const std::shared_ptr<KeplerViewComponentLayoutMetrics>& oldLayoutMetrics,
+        const std::shared_ptr<KeplerViewComponentLayoutMetrics>& newLayoutMetrics) {
+    KPLog.debug("ExpoImage :: updateLayoutMetrics");
+    KeplerViewComponent::updateLayoutMetrics(oldLayoutMetrics, newLayoutMetrics);
+    if (oldLayoutMetrics != newLayoutMetrics) {
+        const auto& contentFrame = layoutMetrics_->frame;
+        imageDrawableLayer_.setSize(volta::graphics::Size(contentFrame.size.width, contentFrame.size.height));
+        imageDrawableLayer_.setDimensions(imageDrawableLayer_.size_);
+        imageDrawableLayer_.borderCalculatedMetrics_ = borderDrawableLayer_.getBorderCalculatedMetrics();
+        rerenderIfNeeded();
+    }
+}
+
+void ExpoImageComponent::updateState(
+        const std::shared_ptr<const void>& oldState,
+        const std::shared_ptr<const void>& newState) {
+    KPLog.debug("ExpoImage :: updateState");
+
+    auto oldImageState = std::static_pointer_cast<facebook::react::ImageShadowNode::ConcreteState const>(oldState);
+    auto newImageState = std::static_pointer_cast<facebook::react::ImageShadowNode::ConcreteState const>(newState);
+    const bool havePreviousData =
+            oldImageState && oldImageState->getData().getImageSource() != facebook::react::ImageSource{};
+    if (!havePreviousData ||
+        (newImageState && newImageState->getData().getImageSource() != oldImageState->getData().getImageSource())) {
+    }
+}
+
+std::shared_ptr<volta::IImageLoaderDelegate> ExpoImageComponent::createSourceLoaderDelegate(
+        std::function<void()> onLoad) {
+    return std::make_shared<SourceImageLoaderDelegate>(eventEmitter_, onLoad);
+}
+
+std::shared_ptr<volta::IImageLoaderDelegate> ExpoImageComponent::createPlaceholderLoaderDelegate(
+        std::function<void()> onLoad) {
+    return std::make_shared<PlaceholderImageLoaderDelegate>(onLoad);
+}
+
+void ExpoImageComponent::init() {
+    if (auto eventController = getEventController().lock()) {
+        eventController->markNeedFrame(shared_from_this());
+    }
+}