feat: add resizeMode prop to ImageWidget

sAleksovski · sAleksovski · commit cc7bf6a00e24 · 2026-07-11T15:38:47.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `lineHeight` and `lineSpacingExtra` style props to `TextWidget`
+- Add `resizeMode` prop to `ImageWidget`
 
 ### Fixed
 
diff --git a/android/src/main/java/com/reactnativeandroidwidget/builder/widget/ImageWidget.java b/android/src/main/java/com/reactnativeandroidwidget/builder/widget/ImageWidget.java
@@ -36,6 +36,10 @@ protected void applyProps() {
             bitmapDrawable.setCornerRadius(dpToPx(props.getDouble("radius")));
         }
 
+        if (props.hasKey("resizeMode")) {
+            view.setScaleType(getScaleType(props.getString("resizeMode")));
+        }
+
         view.setImageDrawable(bitmapDrawable);
     }
 
@@ -51,4 +55,18 @@ private Bitmap getBitmapFromURL(String src, int width, int height) {
             return null;
         }
     }
+
+    private ImageView.ScaleType getScaleType(String resizeMode) {
+        switch (resizeMode) {
+            case "cover":
+                return ImageView.ScaleType.CENTER_CROP;
+            case "stretch":
+                return ImageView.ScaleType.FIT_XY;
+            case "center":
+                return ImageView.ScaleType.CENTER;
+            case "contain":
+            default:
+                return ImageView.ScaleType.FIT_CENTER;
+        }
+    }
 }
diff --git a/example-expo/app.config.ts b/example-expo/app.config.ts
@@ -15,6 +15,13 @@ const widgetConfig: WithAndroidWidgetsParams = {
       description: 'Track your fitness level',
       previewImage: './assets/widget-preview/fitness.png',
     },
+    {
+      name: 'ImageResize',
+      label: 'Image Resize',
+      minHeight: '160dp',
+      minWidth: '300dp',
+      description: 'Test image resize modes',
+    },
     {
       name: 'Resizable',
       minHeight: '100dp',
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -56,6 +56,19 @@
                 android:resource="@xml/widgetprovider_fitness" />
         </receiver>
 
+        <receiver
+            android:name=".widget.ImageResize"
+            android:exported="false"
+            android:label="Image Resize">
+            <intent-filter>
+                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
+                <action android:name="com.androidwidgetexample.WIDGET_CLICK" />
+            </intent-filter>
+            <meta-data
+                android:name="android.appwidget.provider"
+                android:resource="@xml/widgetprovider_imageresize" />
+        </receiver>
+
         <receiver
             android:name=".widget.Resizable"
             android:exported="false"
diff --git a/example/android/app/src/main/java/com/androidwidgetexample/widget/ImageResize.java b/example/android/app/src/main/java/com/androidwidgetexample/widget/ImageResize.java
@@ -0,0 +1,6 @@
+package com.androidwidgetexample.widget;
+
+import com.reactnativeandroidwidget.RNWidgetProvider;
+
+public class ImageResize extends RNWidgetProvider {
+}
diff --git a/example/android/app/src/main/res/xml/widgetprovider_imageresize.xml b/example/android/app/src/main/res/xml/widgetprovider_imageresize.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:minWidth="300dp"
+    android:minHeight="160dp"
+
+    android:updatePeriodMillis="0"
+
+    android:initialLayout="@layout/rn_widget"
+
+    android:resizeMode="none"
+
+    android:widgetCategory="home_screen">
+</appwidget-provider>
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -12,6 +12,7 @@ import { ClickDemoWidgetPreviewScreen } from './screens/widget-preview/ClickDemo
 import { DarkModeDemoWidgetPreviewScreen } from './screens/widget-preview/DarkModeDemoWidgetPreviewScreen';
 import { DebugEventsWidgetPreviewScreen } from './screens/widget-preview/DebugEventsWidgetPreviewScreen';
 import { FitnessWidgetPreviewScreen } from './screens/widget-preview/FitnessWidgetPreviewScreen';
+import { ImageResizeWidgetPreviewScreen } from './screens/widget-preview/ImageResizeWidgetPreviewScreen';
 import { ListDemoWidgetPreviewDeepLinkScreen } from './screens/widget-preview/ListDemoWidgetPreviewDeepLinkScreen';
 import { ListDemoWidgetPreviewScreen } from './screens/widget-preview/ListDemoWidgetPreviewScreen';
 import { ResizableMusicWidgetPreviewScreen } from './screens/widget-preview/ResizableMusicWidgetPreviewScreen';
@@ -59,6 +60,11 @@ export function App() {
           component={FitnessWidgetPreviewScreen}
           options={{ title: 'Fitness Widget Preview' }}
         />
+        <Stack.Screen
+          name="ImageResizeWidgetPreviewScreen"
+          component={ImageResizeWidgetPreviewScreen}
+          options={{ title: 'Image Resize Widget Preview' }}
+        />
         <Stack.Screen
           name="ResizableMusicWidgetPreviewScreen"
           component={ResizableMusicWidgetPreviewScreen}
diff --git a/example/src/screens/ListScreen.tsx b/example/src/screens/ListScreen.tsx
@@ -16,6 +16,7 @@ function Separator() {
 export type ExampleScreens = {
   ListScreen: undefined;
   FitnessWidgetPreviewScreen: undefined;
+  ImageResizeWidgetPreviewScreen: undefined;
   ResizableMusicWidgetPreviewScreen: undefined;
   RotatedWidgetPreviewScreen: undefined;
   ShopifyWidgetPreviewScreen: undefined;
@@ -41,6 +42,10 @@ const items: Item[] = [
     title: 'Fitness Widget Preview',
     screen: 'FitnessWidgetPreviewScreen',
   },
+  {
+    title: 'Image Resize Widget Preview',
+    screen: 'ImageResizeWidgetPreviewScreen',
+  },
   {
     title: 'Resizable Music Widget Preview',
     screen: 'ResizableMusicWidgetPreviewScreen',
diff --git a/example/src/screens/widget-preview/ImageResizeWidgetPreviewScreen.tsx b/example/src/screens/widget-preview/ImageResizeWidgetPreviewScreen.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { Button, StyleSheet, View } from 'react-native';
+import {
+  WidgetPreview,
+  type ImageWidgetResizeMode,
+} from 'react-native-android-widget';
+
+import { ImageResizeWidget } from '../../widgets/ImageResizeWidget';
+
+const resizeModes: ImageWidgetResizeMode[] = [
+  'cover',
+  'contain',
+  'stretch',
+  'center',
+];
+
+export function ImageResizeWidgetPreviewScreen() {
+  const [resizeMode, setResizeMode] =
+    React.useState<ImageWidgetResizeMode>('cover');
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.buttonContainer}>
+        {resizeModes.map((mode) => (
+          <View key={mode} style={styles.button}>
+            <Button
+              title={mode}
+              onPress={() => setResizeMode(mode)}
+              color={resizeMode === mode ? '#1f6feb' : undefined}
+            />
+          </View>
+        ))}
+      </View>
+
+      <WidgetPreview
+        renderWidget={({ width, height }) => (
+          <ImageResizeWidget
+            height={height}
+            width={width}
+            resizeMode={resizeMode}
+          />
+        )}
+        height={180}
+        width={320}
+        showBorder
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  button: {
+    margin: 4,
+  },
+});
diff --git a/example/src/widgetTaskHandler.tsx b/example/src/widgetTaskHandler.tsx
@@ -10,6 +10,7 @@ import {
   DebugEventsWidget,
 } from './widgets/DebugEventsWidget';
 import { FitnessWidget } from './widgets/FitnessWidget';
+import { ImageResizeWidget } from './widgets/ImageResizeWidget';
 import { ListDemoWidget } from './widgets/ListDemoWidget';
 import { ResizableMusicWidget } from './widgets/ResizableMusicWidget';
 import { RotatedWidget } from './widgets/RotatedWidget';
@@ -25,6 +26,7 @@ const nameToWidget = {
   List: ListDemoWidget,
   DebugEvents: DebugEventsWidget,
   Configurable: ConfigurableWidget,
+  ImageResize: ImageResizeWidget,
 };
 
 const COUNTER_STORAGE_KEY = 'CounterWidget:count';
diff --git a/example/src/widgets/ImageResizeWidget.tsx b/example/src/widgets/ImageResizeWidget.tsx
@@ -0,0 +1,71 @@
+'use no memo';
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  FlexWidget,
+  ImageWidget,
+  OverlapWidget,
+  TextWidget,
+  type ImageWidgetResizeMode,
+} from 'react-native-android-widget';
+
+interface ImageResizeWidgetProps {
+  height?: number;
+  width?: number;
+  resizeMode?: ImageWidgetResizeMode;
+}
+
+export function ImageResizeWidget({
+  height = 180,
+  width = 320,
+  resizeMode = 'cover',
+}: ImageResizeWidgetProps) {
+  return (
+    <OverlapWidget
+      style={{
+        height: 'match_parent',
+        width: 'match_parent',
+        borderRadius: 24,
+        overflow: 'hidden',
+      }}
+    >
+      <ImageWidget
+        image={require('../../assets/music/sinatra.jpg')}
+        imageHeight={320}
+        imageWidth={320}
+        resizeMode={resizeMode}
+        style={{
+          height,
+          width,
+        }}
+      />
+
+      <FlexWidget
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 'match_parent',
+          width: 'match_parent',
+          padding: 20,
+        }}
+      >
+        <TextWidget
+          text="Image Resize"
+          style={{
+            color: '#ffffff',
+            fontSize: 24,
+            fontWeight: 'bold',
+          }}
+        />
+        <TextWidget
+          text={resizeMode}
+          style={{
+            color: '#ffffff',
+            fontSize: 14,
+            marginTop: 6,
+          }}
+        />
+      </FlexWidget>
+    </OverlapWidget>
+  );
+}
diff --git a/src/widgets/ImageWidget.tsx b/src/widgets/ImageWidget.tsx
@@ -15,10 +15,13 @@ interface ImageWidgetInternalProps extends CommonInternalProps {
   imageWidth: number;
   imageHeight: number;
   image: Pick<ImageResolvedAssetSource, 'uri'>;
+  resizeMode?: ImageWidgetResizeMode;
 }
 
 type ImageWidgetStyle = CommonStyleProps;
 
+export type ImageWidgetResizeMode = 'cover' | 'contain' | 'stretch' | 'center';
+
 export type ImageWidgetSource =
   | ImageRequireSource
   | `http:${string}`
@@ -45,6 +48,12 @@ export interface ImageWidgetProps extends ClickActionProps {
    * Image radius
    */
   radius?: number;
+  /**
+   * How the image should be resized when its aspect ratio differs from the view.
+   *
+   * Defaults to Android's ImageView behavior, which is equivalent to `contain`.
+   */
+  resizeMode?: ImageWidgetResizeMode;
 }
 
 export function ImageWidget(_: ImageWidgetProps) {
@@ -64,5 +73,6 @@ ImageWidget.convertProps = (
         ? Image.resolveAssetSource(props.image)
         : { uri: props.image },
     ...(props.radius ? { radius: props.radius } : {}),
+    ...(props.resizeMode ? { resizeMode: props.resizeMode } : {}),
   };
 };

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,10 @@ protected void applyProps() {`
`36`	`36`	`bitmapDrawable.setCornerRadius(dpToPx(props.getDouble("radius")));`
`37`	`37`	`}`
`38`	`38`
	`39`	`+ if (props.hasKey("resizeMode")) {`
	`40`	`+ view.setScaleType(getScaleType(props.getString("resizeMode")));`
	`41`	`+ }`
	`42`	`+`
`39`	`43`	`view.setImageDrawable(bitmapDrawable);`
`40`	`44`	`}`
`41`	`45`
`@@ -51,4 +55,18 @@ private Bitmap getBitmapFromURL(String src, int width, int height) {`
`51`	`55`	`return null;`
`52`	`56`	`}`
`53`	`57`	`}`
	`58`	`+`
	`59`	`+ private ImageView.ScaleType getScaleType(String resizeMode) {`
	`60`	`+ switch (resizeMode) {`
	`61`	`+ case "cover":`
	`62`	`+ return ImageView.ScaleType.CENTER_CROP;`
	`63`	`+ case "stretch":`
	`64`	`+ return ImageView.ScaleType.FIT_XY;`
	`65`	`+ case "center":`
	`66`	`+ return ImageView.ScaleType.CENTER;`
	`67`	`+ case "contain":`
	`68`	`+ default:`
	`69`	`+ return ImageView.ScaleType.FIT_CENTER;`
	`70`	`+ }`
	`71`	`+ }`
`54`	`72`	`}`