@depup/react-native-web 0.21.2-depup.1 → 0.21.3-depup.0

package/README.md

@@ -13,8 +13,8 @@ npm install @depup/react-native-web
 
 | Field | Value |
 |-------|-------|
-| Original | [react-native-web](https://www.npmjs.com/package/react-native-web) @ 0.21.2 |
-| Processed | 2026-04-07 |
+| Original | [react-native-web](https://www.npmjs.com/package/react-native-web) @ 0.21.3 |
+| Processed | 2026-09-27 |
 | Smoke test | failed |
 | Deps updated | 4 |
 
@@ -22,8 +22,8 @@ npm install @depup/react-native-web
 
 | Dependency | From | To |
 |------------|------|-----|
-| @babel/runtime | ^7.18.6 | ^7.29.2 |
-| @react-native/normalize-colors | ^0.74.1 | ^0.85.0 |
+| @babel/runtime | ^7.18.6 | ^8.0.5 |
+| @react-native/normalize-colors | ^0.74.1 | ^0.87.1 |
 | fbjs | ^3.0.4 | ^3.0.5 |
 | styleq | ^0.1.3 | ^0.2.1 |
 

package/changes.json

@@ -2,11 +2,11 @@
   "bumped": {
     "@babel/runtime": {
       "from": "^7.18.6",
-      "to": "^7.29.2"
+      "to": "^8.0.5"
     },
     "@react-native/normalize-colors": {
       "from": "^0.74.1",
-      "to": "^0.85.0"
+      "to": "^0.87.1"
     },
     "fbjs": {
       "from": "^3.0.4",
@@ -17,6 +17,6 @@
       "to": "^0.2.1"
     }
   },
-  "timestamp": "2026-04-07T16:32:46.975Z",
+  "timestamp": "2026-09-27T01:02:09.872Z",
   "totalUpdated": 4
 }

package/dist/cjs/exports/Image/index.js

@@ -26,6 +26,7 @@ var _ImageLoader = _interopRequireDefault(require("../../modules/ImageLoader"));
 var _PixelRatio = _interopRequireDefault(require("../PixelRatio"));
 var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
 var _TextAncestorContext = _interopRequireDefault(require("../Text/TextAncestorContext"));
+var _useLayoutEffect = _interopRequireDefault(require("../../modules/useLayoutEffect"));
 var _View = _interopRequireDefault(require("../View"));
 var _warnOnce = require("../../modules/warnOnce");
 var _excluded = ["aria-label", "accessibilityLabel", "blurRadius", "defaultSource", "draggable", "onError", "onLayout", "onLoad", "onLoadEnd", "onLoadStart", "pointerEvents", "source", "style"];
@@ -227,16 +228,36 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
 
   // Image loading
+  // Read the load handlers through a ref, so that a new handler identity does
+  // not abort and restart the request for the same uri.
+  var loadEventHandlersRef = React.useRef({
+    onError,
+    onLoad,
+    onLoadEnd,
+    onLoadStart
+  });
+  (0, _useLayoutEffect.default)(() => {
+    loadEventHandlersRef.current = {
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadStart
+    };
+  });
   var uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();
     if (uri != null) {
       updateState(LOADING);
-      if (onLoadStart) {
-        onLoadStart();
+      var _onLoadStart = loadEventHandlersRef.current.onLoadStart;
+      if (_onLoadStart) {
+        _onLoadStart();
       }
       requestRef.current = _ImageLoader.default.load(uri, function load(e) {
         updateState(LOADED);
+        var _loadEventHandlersRef = loadEventHandlersRef.current,
+          onLoad = _loadEventHandlersRef.onLoad,
+          onLoadEnd = _loadEventHandlersRef.onLoadEnd;
         if (onLoad) {
           onLoad(e);
         }
@@ -245,6 +266,9 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }, function error() {
         updateState(ERRORED);
+        var _loadEventHandlersRef2 = loadEventHandlersRef.current,
+          onError = _loadEventHandlersRef2.onError,
+          onLoadEnd = _loadEventHandlersRef2.onLoadEnd;
         if (onError) {
           onError({
             nativeEvent: {
@@ -264,7 +288,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, requestRef, updateState]);
   return /*#__PURE__*/React.createElement(_View.default, (0, _extends2.default)({}, rest, {
     "aria-label": ariaLabel,
     onLayout: handleLayout,

package/dist/cjs/exports/useColorScheme/index.js

@@ -28,7 +28,7 @@ function useColorScheme() {
     var _Appearance$addChange = _Appearance.default.addChangeListener(listener),
       remove = _Appearance$addChange.remove;
     return remove;
-  });
+  }, []);
   return colorScheme;
 }
 module.exports = exports.default;

package/dist/cjs/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 exports.__esModule = true;
-exports.useWindowDimensions = exports.useLocaleContext = exports.useColorScheme = exports.unstable_createElement = exports.unmountComponentAtNode = exports.render = exports.processColor = exports.findNodeHandle = exports.YellowBox = exports.VirtualizedList = exports.View = exports.Vibration = exports.UIManager = exports.TouchableWithoutFeedback = exports.TouchableOpacity = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.Touchable = exports.TextInput = exports.Text = exports.Switch = exports.StyleSheet = exports.StatusBar = exports.Share = exports.SectionList = exports.ScrollView = exports.SafeAreaView = exports.RefreshControl = exports.ProgressBar = exports.Pressable = exports.Platform = exports.PixelRatio = exports.Picker = exports.PanResponder = exports.NativeModules = exports.NativeEventEmitter = exports.Modal = exports.LogBox = exports.Linking = exports.LayoutAnimation = exports.KeyboardAvoidingView = exports.Keyboard = exports.InteractionManager = exports.ImageBackground = exports.Image = exports.I18nManager = exports.FlatList = exports.Easing = exports.Dimensions = exports.DeviceEventEmitter = exports.Clipboard = exports.CheckBox = exports.Button = exports.BackHandler = exports.Appearance = exports.AppState = exports.AppRegistry = exports.Animated = exports.Alert = exports.ActivityIndicator = exports.AccessibilityInfo = void 0;
+exports.useWindowDimensions = exports.useLocaleContext = exports.useColorScheme = exports.unstable_createElement = exports.unmountComponentAtNode = exports.render = exports.processColor = exports.findNodeHandle = exports.YellowBox = exports.VirtualizedList = exports.View = exports.Vibration = exports.UIManager = exports.TouchableWithoutFeedback = exports.TouchableOpacity = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.Touchable = exports.TextInput = exports.Text = exports.Switch = exports.StyleSheet = exports.StatusBar = exports.Share = exports.SectionList = exports.ScrollView = exports.SafeAreaView = exports.RefreshControl = exports.ProgressBar = exports.Pressable = exports.Platform = exports.PixelRatio = exports.Picker = exports.PanResponder = exports.NativeModules = exports.NativeEventEmitter = exports.Modal = exports.LogBox = exports.Linking = exports.LayoutAnimation = exports.KeyboardAvoidingView = exports.Keyboard = exports.InteractionManager = exports.InputAccessoryView = exports.ImageBackground = exports.Image = exports.I18nManager = exports.FlatList = exports.Easing = exports.Dimensions = exports.DeviceEventEmitter = exports.Clipboard = exports.CheckBox = exports.Button = exports.BackHandler = exports.Appearance = exports.AppState = exports.AppRegistry = exports.Animated = exports.Alert = exports.ActivityIndicator = exports.AccessibilityInfo = void 0;
 var _createElement = _interopRequireDefault(require("./exports/createElement"));
 exports.unstable_createElement = _createElement.default;
 var _findNodeHandle = _interopRequireDefault(require("./exports/findNodeHandle"));
@@ -73,6 +73,8 @@ var _Image = _interopRequireDefault(require("./exports/Image"));
 exports.Image = _Image.default;
 var _ImageBackground = _interopRequireDefault(require("./exports/ImageBackground"));
 exports.ImageBackground = _ImageBackground.default;
+var _InputAccessoryView = _interopRequireDefault(require("./exports/InputAccessoryView"));
+exports.InputAccessoryView = _InputAccessoryView.default;
 var _KeyboardAvoidingView = _interopRequireDefault(require("./exports/KeyboardAvoidingView"));
 exports.KeyboardAvoidingView = _KeyboardAvoidingView.default;
 var _Modal = _interopRequireDefault(require("./exports/Modal"));

package/dist/exports/Image/index.js

@@ -22,6 +22,7 @@ import ImageLoader from '../../modules/ImageLoader';
 import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
+import useLayoutEffect from '../../modules/useLayoutEffect';
 import View from '../View';
 import { warnOnce } from '../../modules/warnOnce';
 var ERRORED = 'ERRORED';
@@ -222,16 +223,36 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
 
   // Image loading
+  // Read the load handlers through a ref, so that a new handler identity does
+  // not abort and restart the request for the same uri.
+  var loadEventHandlersRef = React.useRef({
+    onError,
+    onLoad,
+    onLoadEnd,
+    onLoadStart
+  });
+  useLayoutEffect(() => {
+    loadEventHandlersRef.current = {
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadStart
+    };
+  });
   var uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();
     if (uri != null) {
       updateState(LOADING);
-      if (onLoadStart) {
-        onLoadStart();
+      var _onLoadStart = loadEventHandlersRef.current.onLoadStart;
+      if (_onLoadStart) {
+        _onLoadStart();
       }
       requestRef.current = ImageLoader.load(uri, function load(e) {
         updateState(LOADED);
+        var _loadEventHandlersRef = loadEventHandlersRef.current,
+          onLoad = _loadEventHandlersRef.onLoad,
+          onLoadEnd = _loadEventHandlersRef.onLoadEnd;
         if (onLoad) {
           onLoad(e);
         }
@@ -240,6 +261,9 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }, function error() {
         updateState(ERRORED);
+        var _loadEventHandlersRef2 = loadEventHandlersRef.current,
+          onError = _loadEventHandlersRef2.onError,
+          onLoadEnd = _loadEventHandlersRef2.onLoadEnd;
         if (onError) {
           onError({
             nativeEvent: {
@@ -259,7 +283,7 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, requestRef, updateState]);
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
     "aria-label": ariaLabel,
     onLayout: handleLayout,

package/dist/exports/Image/index.js.flow

@@ -19,6 +19,7 @@ import ImageLoader from '../../modules/ImageLoader';
 import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
+import useLayoutEffect from '../../modules/useLayoutEffect';
 import View from '../View';
 import { warnOnce } from '../../modules/warnOnce';
 export type { ImageProps };
@@ -97,16 +98,39 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
   }) : null;
   declare function getBackgroundSize(): ?string;
   declare function handleLayout(e: any): any; // Image loading
+  // Read the load handlers through a ref, so that a new handler identity does
+  // not abort and restart the request for the same uri.
+  const loadEventHandlersRef = React.useRef({
+    onError,
+    onLoad,
+    onLoadEnd,
+    onLoadStart
+  });
+  useLayoutEffect(() => {
+    loadEventHandlersRef.current = {
+      onError,
+      onLoad,
+      onLoadEnd,
+      onLoadStart
+    };
+  });
   const uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();
     if (uri != null) {
       updateState(LOADING);
+      const {
+        onLoadStart
+      } = loadEventHandlersRef.current;
       if (onLoadStart) {
         onLoadStart();
       }
       requestRef.current = ImageLoader.load(uri, function load(e) {
         updateState(LOADED);
+        const {
+          onLoad,
+          onLoadEnd
+        } = loadEventHandlersRef.current;
         if (onLoad) {
           onLoad(e);
         }
@@ -115,6 +139,10 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
         }
       }, function error() {
         updateState(ERRORED);
+        const {
+          onError,
+          onLoadEnd
+        } = loadEventHandlersRef.current;
         if (onError) {
           onError({
             nativeEvent: {
@@ -129,7 +157,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     }
     declare function abortPendingRequest(): any;
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, requestRef, updateState]);
   return <View {...rest} aria-label={ariaLabel} onLayout={handleLayout} pointerEvents={pointerEvents} ref={ref} style={[styles.root, hasTextAncestor && styles.inline, imageSizeStyle, style, styles.undo,
   // TEMP: avoid deprecated shadow props regression
   // until Image refactored to use createElement.

package/dist/exports/useColorScheme/index.js

@@ -23,6 +23,6 @@ export default function useColorScheme() {
     var _Appearance$addChange = Appearance.addChangeListener(listener),
       remove = _Appearance$addChange.remove;
     return remove;
-  });
+  }, []);
   return colorScheme;
 }

package/dist/index.js

@@ -37,6 +37,7 @@ export { default as CheckBox } from './exports/CheckBox';
 export { default as FlatList } from './exports/FlatList';
 export { default as Image } from './exports/Image';
 export { default as ImageBackground } from './exports/ImageBackground';
+export { default as InputAccessoryView } from './exports/InputAccessoryView';
 export { default as KeyboardAvoidingView } from './exports/KeyboardAvoidingView';
 export { default as Modal } from './exports/Modal';
 export { default as Picker } from './exports/Picker';

package/dist/index.js.flow

@@ -38,6 +38,7 @@ export { default as CheckBox } from './exports/CheckBox';
 export { default as FlatList } from './exports/FlatList';
 export { default as Image } from './exports/Image';
 export { default as ImageBackground } from './exports/ImageBackground';
+export { default as InputAccessoryView } from './exports/InputAccessoryView';
 export { default as KeyboardAvoidingView } from './exports/KeyboardAvoidingView';
 export { default as Modal } from './exports/Modal';
 export { default as Picker } from './exports/Picker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depup/react-native-web",
-  "version": "0.21.2-depup.1",
+  "version": "0.21.3-depup.0",
   "description": "React Native for Web (with updated dependencies)",
   "module": "dist/index.js",
   "main": "dist/cjs/index.js",
@@ -21,8 +21,8 @@
     "dev": "npm-run-all clean -p \"build:* {@} -- --watch\""
   },
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
-    "@react-native/normalize-colors": "^0.85.0",
+    "@babel/runtime": "^8.0.5",
+    "@react-native/normalize-colors": "^0.87.1",
     "fbjs": "^3.0.5",
     "inline-style-prefixer": "^7.0.1",
     "memoize-one": "^6.0.0",
@@ -38,7 +38,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git://github.com/necolas/react-native-web.git"
+    "url": "git+https://github.com/necolas/react-native-web.git"
   },
   "tags": [
     "react"
@@ -59,11 +59,11 @@
     "changes": {
       "@babel/runtime": {
         "from": "^7.18.6",
-        "to": "^7.29.2"
+        "to": "^8.0.5"
       },
       "@react-native/normalize-colors": {
         "from": "^0.74.1",
-        "to": "^0.85.0"
+        "to": "^0.87.1"
       },
       "fbjs": {
         "from": "^3.0.4",
@@ -76,8 +76,8 @@
     },
     "depsUpdated": 4,
     "originalPackage": "react-native-web",
-    "originalVersion": "0.21.2",
-    "processedAt": "2026-04-07T16:32:49.553Z",
+    "originalVersion": "0.21.3",
+    "processedAt": "2026-09-27T01:02:11.181Z",
     "smokeTest": "failed"
   }
 }

package/src/exports/Image/index.js

@@ -20,6 +20,7 @@ import ImageLoader from '../../modules/ImageLoader';
 import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
+import useLayoutEffect from '../../modules/useLayoutEffect';
 import View from '../View';
 import { warnOnce } from '../../modules/warnOnce';
 
@@ -274,12 +275,26 @@ const Image: React.AbstractComponent<
   }
 
   // Image loading
+  // Read the load handlers through a ref, so that a new handler identity does
+  // not abort and restart the request for the same uri.
+  const loadEventHandlersRef = React.useRef({
+    onError,
+    onLoad,
+    onLoadEnd,
+    onLoadStart
+  });
+
+  useLayoutEffect(() => {
+    loadEventHandlersRef.current = { onError, onLoad, onLoadEnd, onLoadStart };
+  });
+
   const uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();
 
     if (uri != null) {
       updateState(LOADING);
+      const { onLoadStart } = loadEventHandlersRef.current;
       if (onLoadStart) {
         onLoadStart();
       }
@@ -288,6 +303,7 @@ const Image: React.AbstractComponent<
         uri,
         function load(e) {
           updateState(LOADED);
+          const { onLoad, onLoadEnd } = loadEventHandlersRef.current;
           if (onLoad) {
             onLoad(e);
           }
@@ -297,6 +313,7 @@ const Image: React.AbstractComponent<
         },
         function error() {
           updateState(ERRORED);
+          const { onError, onLoadEnd } = loadEventHandlersRef.current;
           if (onError) {
             onError({
               nativeEvent: {
@@ -319,7 +336,7 @@ const Image: React.AbstractComponent<
     }
 
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, requestRef, updateState]);
 
   return (
     <View

package/src/exports/useColorScheme/index.js

@@ -25,7 +25,7 @@ export default function useColorScheme(): ColorSchemeName {
     }
     const { remove } = Appearance.addChangeListener(listener);
     return remove;
-  });
+  }, []);
 
   return colorScheme;
 }

package/src/index.js

@@ -38,6 +38,7 @@ export { default as CheckBox } from './exports/CheckBox';
 export { default as FlatList } from './exports/FlatList';
 export { default as Image } from './exports/Image';
 export { default as ImageBackground } from './exports/ImageBackground';
+export { default as InputAccessoryView } from './exports/InputAccessoryView';
 export { default as KeyboardAvoidingView } from './exports/KeyboardAvoidingView';
 export { default as Modal } from './exports/Modal';
 export { default as Picker } from './exports/Picker';