Skip to content

feat: add onLoad prop #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DaveyEke wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add onLoad prop #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab592a1
feat: add onLoad prop
DaveyEke Apr 16, 2026
3f92f19
Merge branch 'main' into feat/on-load-prop
mrousavy Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions example/ios/NitroImageExample.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,10 +191,14 @@
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-frameworks-${CONFIGURATION}-input-files.xcfilelist",
);
inputPaths = (
);
name = "[CP] Embed Pods Frameworks";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-frameworks-${CONFIGURATION}-output-files.xcfilelist",
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-frameworks.sh\"\n";
Expand Down Expand Up @@ -230,10 +234,14 @@
inputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-resources-${CONFIGURATION}-input-files.xcfilelist",
);
inputPaths = (
);
name = "[CP] Copy Pods Resources";
outputFileListPaths = (
"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-resources-${CONFIGURATION}-output-files.xcfilelist",
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-NitroImageExample/Pods-NitroImageExample-resources.sh\"\n";
Expand All @@ -260,7 +268,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = CJW62Q77E7;
DEVELOPMENT_TEAM = B3P8HDC2S6;
ENABLE_BITCODE = NO;
INFOPLIST_FILE = NitroImageExample/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
Expand Down Expand Up @@ -289,7 +297,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 1;
DEVELOPMENT_TEAM = CJW62Q77E7;
DEVELOPMENT_TEAM = B3P8HDC2S6;
INFOPLIST_FILE = NitroImageExample/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = (
Expand Down Expand Up @@ -378,10 +386,7 @@
"-DFOLLY_CFG_NO_COROUTINES=1",
"-DFOLLY_HAVE_CLOCK_GETTIME=1",
);
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
OTHER_LDFLAGS = "$(inherited) ";
REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
SDKROOT = iphoneos;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
Expand Down Expand Up @@ -450,10 +455,7 @@
"-DFOLLY_CFG_NO_COROUTINES=1",
"-DFOLLY_HAVE_CLOCK_GETTIME=1",
);
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
OTHER_LDFLAGS = "$(inherited) ";
REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = true;
Expand Down
122 changes: 61 additions & 61 deletions example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2740,80 +2740,80 @@ SPEC CHECKSUMS:
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
hermes-engine: e7491a2038f2618c8cd444ed411a6deb350a3742
libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
NitroImage: 75df80efc3bebd26e5fbe66a546ca83122773919
NitroModules: 6e73058747e2da022cb4fca5654f39eaf61e3c4f
NitroWebImage: eb1228b7e7dff379f73865465f08b14cad0b7afa
RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
NitroImage: 447896fa03fe0de5213c2dde23752b87d61beced
NitroModules: 1dc73273d6e3aee937eec41ef3ed9470804b9884
NitroWebImage: 02e8aa5d5555b0d6791d13fc670f91bae325cc73
RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
RCTDeprecation: 0735ab4f6b3ec93a7f98187b5da74d7916e2cf4c
RCTRequired: 8fcc7801bfc433072287b0f24a662e2816e89d0c
RCTTypeSafety: 2b2be515d6b968bcba7a68c4179d8199bd8c9b58
React: 1000c0e96d8fb9fbdaf13f7d31d0b09db3cbb4ac
React-callinvoker: 7e52661bfaf5d8881a9cee049792627a00001fbe
React-Core: a9128dd77ec52432727bfbec8c55d17189f6c039
React-CoreModules: 4597116bd78ae2b183547e3700be0dc9537918e9
React-cxxreact: e3a02f535cc1f1b547ac1baafe6ac25552352362
React-Core: 949b436ddfe76cf47ac96375152de2f3506a8421
React-CoreModules: 0f27580d0d82d430fa4f2cf4d970b6ad1120d63a
React-cxxreact: 48754f11f47a29ea4800cbdd694c10f874a26b9b
React-debug: 7a23d96f709f437c5e08973d6e06d0a54dd180a1
React-defaultsnativemodule: f01b6e58a23efe4fc8d74db7dadeea112908f5d5
React-domnativemodule: 2d9796d40ab675e0f91ae8aae26c796b6e9a7499
React-Fabric: f4344b3a882292783de9a5404852023b6c4fdd2d
React-FabricComponents: 7c51eb1619473ae3ed92d8bbf5d5dd3be0c5ef9d
React-FabricImage: 9e743575e67a9c14242bec3ae0e26663eed641bb
React-featureflags: 5188951cc2fc81f4d249dc37e8f96dca7ef50e96
React-featureflagsnativemodule: 0fa7473065377ca4e5651c75614796326ef57aa8
React-graphics: f65ecd0a8c70f9c7dcdae322851c19b21c83ec27
React-hermes: 8418dae38a0513aa66aaa0a1b0904e55c4448644
React-idlecallbacksnativemodule: 540d6f743fcb595b26da8b182b28c878a1176a96
React-ImageManager: 5f9f1e33611a852d21a63e1de76d211fb04ac935
React-jserrorhandler: 9c0a7d69cd07c9ae08fab3a61150d526c0174c83
React-jsi: b711b7a11d77357beb95fa2eabd30c1ae34dcf40
React-jsiexecutor: 0d1c78e666c5be71ff7c0ff5ea7fb043e5b1f14c
React-jsinspector: 5fabd9f0be9390d5b5eb5fc88a8965d97e0c14ac
React-jsinspectorcdp: e78c65e25253999c0efd5e23c99e649e02fd0244
React-jsinspectornetwork: b02c6f7fe00e12b575a7faea0ed9ec9ddbc1c20f
React-jsinspectortracing: c6d8da3c8bcd939b8dcfd5113e247d56af932e1b
React-jsitooling: 4ca9b158d65909590daf6bf30a345b663eb71964
React-jsitracing: d9e9378d5a3e05febea2164a5d0c5fab06492872
React-logger: 839abfd18a3fbdf88132824de584b226d0c5cbce
React-Mapbuffer: bd5b1120c9bbaac6203eb288735e239f04e03009
React-microtasksnativemodule: 10892b00e612d79436022a11e5bc8bdf468a284f
react-native-safe-area-context: 54d812805f3c4e08a4580ad086cbde1d8780c2e4
React-NativeModulesApple: 3f9e97a4a90eeec1ceade511f973b277632650bb
React-defaultsnativemodule: 569d9222a701ed3dc60a60b2ce066b5bd88da059
React-domnativemodule: 34474bda3973bfd0ca2ea9f1b3db20db5d504cc7
React-Fabric: 45c3e9b112075451e592f0e008cabd4b82575355
React-FabricComponents: a428f23938c27a073baacc069d484b3478df85f3
React-FabricImage: 4375129ba8a26e8a7074af1c2468870fb8aab723
React-featureflags: ed973a134993f3be204d0b2d385d386603c9a0af
React-featureflagsnativemodule: aa3e1dc86bc185344d4875e7cb40cce0bd28de76
React-graphics: b5b8709a8216075bb6a5f9e7bb68881212d924ee
React-hermes: c543ffa2866304c582bdcb135c184e0f776f0d0b
React-idlecallbacksnativemodule: f19c4060b12fffc3ad33ce5de190338751b462ef
React-ImageManager: ecaf317aa5dff5eebba178b0813ef998c62547ea
React-jserrorhandler: 92eea1ee4f8c56b466b34e0065def59805e5d3a9
React-jsi: 7336786a4a14c473d104e6b37df935620d218fcd
React-jsiexecutor: 7c750f5b63fbc071d0f0e56e86f1a1589914f7b1
React-jsinspector: da5f336c1aa174a05885d061559a92e1d07b8a80
React-jsinspectorcdp: 0e807e4c2dc8ae8a07f0a6bfe50377f442079ba3
React-jsinspectornetwork: 3399384f2b6b70b287d8b9675452af4cec21dc65
React-jsinspectortracing: 030af0e9dca9a4eaa1d0ba258c7bd859fb90f61d
React-jsitooling: f8ed67814b17ebb124c48fccdf587ee1e02f16f4
React-jsitracing: 5cf6b84d46a4653895e30956a0ce3a315244c10a
React-logger: 04ce9229cb57db2c2a8164eaec1105f89da7fb22
React-Mapbuffer: e402e7a0535b2213c50727553621480fe8cd8ade
React-microtasksnativemodule: a63ce5595016996a9bac1f10c70a7a7fe6506649
react-native-safe-area-context: c00143b4823773bba23f2f19f85663ae89ceb460
React-NativeModulesApple: b3766e1f87b08064ebc459b9e1538da2447ca874
React-oscompat: 34f3d3c06cadcbc470bc4509c717fb9b919eaa8b
React-perflogger: 95dff8cc9901777360716cbdcb2998849f133a4f
React-performancetimeline: 2937a27399b52ca8baf46f22c39087f617e626b5
React-perflogger: a1edb025fd5d44f61bf09307e248f7608d7b2dcf
React-performancetimeline: 1f86dc9782e3fe78727c5fbb3e2178b9fd1aa6fd
React-RCTActionSheet: 550c9c6c2e7dcd85a51954dc08e2f3837a148e7c
React-RCTAnimation: 0008bfe273566acd3128da13598073383325ac7a
React-RCTAppDelegate: 8b9452baef5548856a22f4710d4135cf68746cf5
React-RCTBlob: 60006ab743e5fd807aaf536092f5ce86e87df526
React-RCTFabric: 8d5d1006b3812c35fd0f37c117ff7bcf6449e20d
React-RCTFBReactNativeSpec: 3cb4265fa9a4e4f8250ae89feb345edc542731da
React-RCTImage: f40a2ee0f79c1666e8b81da4ea2d9d1182c94962
React-RCTLinking: cfe6995bdd8d08d0bb0df12771f4d28fd5fd54ff
React-RCTNetwork: 565c0cd46313f2cad0e4db70a44958b2842c372b
React-RCTRuntime: 971a71a42d8979475a380e5179083302e5506cdd
React-RCTSettings: afcec6060d916e9c0410004ad8419d45f9dbcd36
React-RCTText: 952f2a1b618d3f3872e7e5a82aefc5e5082c59aa
React-RCTVibration: 2a7e7497ffefa135c7f0fee8ee10e3505ab5cc61
React-RCTAnimation: 19d4bb6d2190983d1354b096b7b65dbd591924da
React-RCTAppDelegate: 6c71d16eef920831a312ff363355fc3b99c02a98
React-RCTBlob: b81a0cffe1a083bcf9d8aa9f27f4d37864579e90
React-RCTFabric: 01005d2fa799bba6e21aae18820498f56fe0be5f
React-RCTFBReactNativeSpec: 5adb84a81c4ed7a1f2661835d166e4b2c4320cd4
React-RCTImage: 607e5e373fb56d72417464bd82e8046af81ab502
React-RCTLinking: 301434c7bf1100458be5a3866326ba33491e3687
React-RCTNetwork: a118a47bd123ac96c9877e04f5731a1d6545aba5
React-RCTRuntime: 85fdbf469fe8a12c4db6c836731b190efc33d11d
React-RCTSettings: 5a5aa2cf9ac40f7a8897cc0f9d945ac803886604
React-RCTText: e6e00bee9847a8af1218079b73c8bfed16c75b8d
React-RCTVibration: 5a05fa0ef05ee73d074a3314e57586afc969f1ba
React-rendererconsistency: c2cb23365f4a7b511893748fe8cad1830bbae637
React-renderercss: 621b2b85af14694e93c2bcd63986fb57bcceab2e
React-rendererdebug: 4ba0769131e20347b900757fcac3c7919b27080c
React-RuntimeApple: c1a211351c14d35805d45a94094cfb3e5649552c
React-RuntimeCore: b7c7d8dffa3728a9e9616e0e8b5b6b41037ebcca
React-runtimeexecutor: e931e48afc888fe459f6ffb481971e23bb34f7ee
React-RuntimeHermes: 5763230801ee57d9f414818f48e44b874f3ce1be
React-runtimescheduler: b2e99f9702705fc8c11cf3c51f9911f478ee2210
React-renderercss: 0c1472d6572c05e493aee476598c3ed6234b6c33
React-rendererdebug: d6335da9730fa5a151537aa976a16d48de6135e2
React-RuntimeApple: 5684c2a5d8768e5728a5817c21e5dba798d54c58
React-RuntimeCore: 52428a1b48fb3c50ddf4dd5eee494486e4ecffc6
React-runtimeexecutor: 1b4e99e5c27d2cb8bdeca9773ff5f1a8eac7709c
React-RuntimeHermes: a688639233a3ea44b4f8e4d448f51943d7e00815
React-runtimescheduler: b833f0fc8c788329a497e93f55ce30508f56307a
React-timing: 25e8229ad1cf6874e9f0711515213cb2bc322215
React-utils: 7ea6e4d300c43a763e4e08091413aec962588f93
ReactAppDependencyProvider: 562d731311d0524a577cf8a01faa97874bacbdfe
ReactCodegen: 0fc801cfa34581b2acfb9568ef6180042043826a
ReactCommon: c235ebd26d63fde9a2dfa72cee9f8294b910fee1
RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
RNScreens: ec8bdc9f024d5828e5adf4f5e8870d5260cff616
React-utils: 068cec677032ba78ca0700f2dcbe6d08a0939647
ReactAppDependencyProvider: c91900fa724baee992f01c05eeb4c9e01a807f78
ReactCodegen: c3a2e945d68bcf8839624acaf1b276acbb41e9ba
ReactCommon: 116d6ee71679243698620d8cd9a9042541e44aa6
RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87
RNScreens: afaf526a9c804c3b4503f950cf3e67ed81e29ada
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
Yoga: b01392348aeea02064c21a2762a42893d82b60a7
Yoga: 00013dd9cde63a2d98e8002fcc4f5ddb66c10782

PODFILE CHECKSUM: 8c90c25c7a6bc16ec7b3ed7968df16467ab0fc35

COCOAPODS: 1.15.2
COCOAPODS: 1.16.2
1 change: 1 addition & 0 deletions example/src/NitroImageTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export function NitroImageTab() {
recyclingKey={url}
style={styles.image}
resizeMode="cover"
onLoad={() => console.log(`[NitroImage] onLoad: ${url}`)}
/>
)}
/>
Expand Down
2 changes: 2 additions & 0 deletions ...react-native-nitro-image/android/src/main/java/com/margelo/nitro/image/HybridImageView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class HybridImageView(context: Context): HybridNitroImageViewSpec(), RecyclableV
resetImageBeforeLoad = field != value
field = value
}
override var onLoad: (() -> Unit)? = null

override fun prepareForRecycle() {
onDisappear()
Expand All @@ -70,6 +71,7 @@ class HybridImageView(context: Context): HybridNitroImageViewSpec(), RecyclableV
// Image
if (actualImage is HybridImage) {
imageView.setImageBitmap(actualImage.bitmap)
onLoad?.invoke()
} else {
throw Error("Image is a different type than HybridImage!")
}
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native-nitro-image/ios/HybridImageView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ class HybridImageView: HybridNitroImageViewSpec {
resetImageBeforeLoad = recyclingKey != oldValue
}
}
var onLoad: (() -> Void)? = nil

private func updateResizeMode() {
let mode = resizeMode ?? .cover
Expand All @@ -60,6 +61,7 @@ class HybridImageView: HybridNitroImageViewSpec {
fatalError("Can't set `image` to a type that doesn't conform to `NativeImage`!")
}
view.image = image.uiImage
onLoad?()
case .second:
// Image Loader - trigger a load or drop
didSetImageLoader()
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native-nitro-image/nitrogen/generated/android/NitroImageOnLoad.cpp
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

75 changes: 75 additions & 0 deletions packages/react-native-nitro-image/nitrogen/generated/android/c++/JFunc_void.hpp
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 21 additions & 1 deletion ...ges/react-native-nitro-image/nitrogen/generated/android/c++/JHybridNitroImageViewSpec.cpp
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions ...ges/react-native-nitro-image/nitrogen/generated/android/c++/JHybridNitroImageViewSpec.hpp
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading