react-native-kenburns-view 5.0.0 → 5.2.0

package/example/kenburns-example/package.json

@@ -2,18 +2,22 @@
   "name": "kenburns-example",
   "version": "1.0.0",
   "private": true,
+  "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios"
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~52.0.0",
-    "expo-asset": "~11.0.1",
-    "expo-status-bar": "~2.0.0",
-    "react": "18.3.1",
-    "react-native": "0.76.5",
-    "react-native-kenburns-view": "file:../.."
+    "expo": "~55.0.4",
+    "expo-asset": "~55.0.8",
+    "expo-status-bar": "~55.0.4",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-kenburns-view": "file:../..",
+    "prop-types": "^15.8.1",
+    "babel-preset-expo": "~55.0.10"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2"

package/lib/KenBurnsView.js

@@ -13,6 +13,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -26,6 +27,17 @@ import {
 const DEFAULT_DURATION = 20000;
 const FILL_SCALE = 1.15;
 
+function getRandomCycle(zoomStart, zoomEnd, panXAmount, panYAmount) {
+  return {
+    scaleFrom: zoomStart + Math.random() * (zoomEnd - zoomStart),
+    scaleTo: zoomStart + Math.random() * (zoomEnd - zoomStart),
+    txFrom: -panXAmount + Math.random() * 2 * panXAmount,
+    txTo: -panXAmount + Math.random() * 2 * panXAmount,
+    tyFrom: -panYAmount + Math.random() * 2 * panYAmount,
+    tyTo: -panYAmount + Math.random() * 2 * panYAmount,
+  };
+}
+
 const KenBurnsView = forwardRef((props, ref) => {
   const {
     imageWidth,
@@ -43,14 +55,24 @@ const KenBurnsView = forwardRef((props, ref) => {
     ...rest
   } = props;
 
+  const w = imageWidth || 0;
+  const h = imageHeight || 0;
+  const panXAmount = w * panX;
+  const panYAmount = h * panY;
+
   const progress = useRef(new Animated.Value(0)).current;
   const animationRef = useRef(null);
+  const configRef = useRef({ zoomStart, zoomEnd, panXAmount, panYAmount });
+  configRef.current = { zoomStart, zoomEnd, panXAmount, panYAmount };
+
+  const [cycle, setCycle] = useState(() =>
+    getRandomCycle(zoomStart, zoomEnd, panXAmount, panYAmount),
+  );
+  const cycleRef = useRef(cycle);
+  cycleRef.current = cycle;
 
   const randomRef = useRef({
-    phase: Math.random(),
     durationFactor: 0.7 + Math.random() * 0.6,
-    panXSign: Math.random() > 0.5 ? 1 : -1,
-    panYSign: Math.random() > 0.5 ? 1 : -1,
   }).current;
 
   const stop = useCallback(() => {
@@ -60,32 +82,37 @@ const KenBurnsView = forwardRef((props, ref) => {
     }
   }, []);
 
-  const start = useCallback(() => {
-    stop();
-    progress.setValue(randomRef.phase);
-
+  const runNextCycle = useCallback(() => {
+    const { zoomStart: zs, zoomEnd: ze, panXAmount: pxa, panYAmount: pya } =
+      configRef.current;
+    const prev = cycleRef.current;
+    const nextTo = getRandomCycle(zs, ze, pxa, pya);
+    setCycle({
+      scaleFrom: prev.scaleTo,
+      scaleTo: nextTo.scaleTo,
+      txFrom: prev.txTo,
+      txTo: nextTo.txTo,
+      tyFrom: prev.tyTo,
+      tyTo: nextTo.tyTo,
+    });
+    progress.setValue(0);
     const d = Math.round(duration * randomRef.durationFactor);
+    animationRef.current = Animated.timing(progress, {
+      toValue: 1,
+      duration: d,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: true,
+    });
+    animationRef.current.start(({ finished }) => {
+      if (finished) runNextCycle();
+    });
+  }, [duration, progress, randomRef.durationFactor]);
 
-    animationRef.current = Animated.loop(
-      Animated.sequence([
-        Animated.timing(progress, {
-          toValue: 1,
-          duration: d,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-        Animated.timing(progress, {
-          toValue: 0,
-          duration: d,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-      ]),
-      {resetBeforeIteration: false},
-    );
-
-    animationRef.current.start();
-  }, [duration, progress, stop, randomRef]);
+  const start = useCallback(() => {
+    stop();
+    progress.setValue(0);
+    runNextCycle();
+  }, [progress, runNextCycle, stop]);
 
   useImperativeHandle(
     ref,
@@ -110,24 +137,19 @@ const KenBurnsView = forwardRef((props, ref) => {
     };
   }, [autoStart, start, stop]);
 
-  const w = imageWidth || 0;
-  const h = imageHeight || 0;
-  const panXAmount = w * panX * randomRef.panXSign;
-  const panYAmount = h * panY * randomRef.panYSign;
-
   const translateX = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-panXAmount, panXAmount],
+    outputRange: [cycle.txFrom, cycle.txTo],
   });
 
   const translateY = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [-panYAmount, panYAmount],
+    outputRange: [cycle.tyFrom, cycle.tyTo],
   });
 
   const scale = progress.interpolate({
     inputRange: [0, 1],
-    outputRange: [zoomStart, zoomEnd],
+    outputRange: [cycle.scaleFrom, cycle.scaleTo],
   });
 
   const innerSize = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-kenburns-view",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "KenBurns Image Effect for React Native",
   "main": "index.js",
   "scripts": {

package/example/kenburns-example/ios/KenBurnsExample/AppDelegate.h

@@ -1,7 +0,0 @@
-#import <RCTAppDelegate.h>
-#import <UIKit/UIKit.h>
-#import <Expo/Expo.h>
-
-@interface AppDelegate : EXAppDelegateWrapper
-
-@end

package/example/kenburns-example/ios/KenBurnsExample/AppDelegate.mm

@@ -1,62 +0,0 @@
-#import "AppDelegate.h"
-
-#import <React/RCTBundleURLProvider.h>
-#import <React/RCTLinkingManager.h>
-
-@implementation AppDelegate
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-  self.moduleName = @"main";
-
-  // You can add your custom initial props in the dictionary below.
-  // They will be passed down to the ViewController used by React Native.
-  self.initialProps = @{};
-
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
-}
-
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-  return [self bundleURL];
-}
-
-- (NSURL *)bundleURL
-{
-#if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@".expo/.virtual-metro-entry"];
-#else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-}
-
-// Linking API
-- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
-  return [super application:application openURL:url options:options] || [RCTLinkingManager application:application openURL:url options:options];
-}
-
-// Universal Links
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
-  BOOL result = [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
-  return [super application:application continueUserActivity:userActivity restorationHandler:restorationHandler] || result;
-}
-
-// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
-- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
-{
-  return [super application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
-}
-
-// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
-- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
-{
-  return [super application:application didFailToRegisterForRemoteNotificationsWithError:error];
-}
-
-// Explicitly define remote notification delegates to ensure compatibility with some third-party libraries
-- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
-{
-  return [super application:application didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
-}
-
-@end

package/example/kenburns-example/ios/KenBurnsExample/main.m

@@ -1,10 +0,0 @@
-#import <UIKit/UIKit.h>
-
-#import "AppDelegate.h"
-
-int main(int argc, char * argv[]) {
-  @autoreleasepool {
-    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
-  }
-}
-

package/example/kenburns-example/ios/KenBurnsExample/noop-file.swift

@@ -1,4 +0,0 @@
-//
-// @generated
-// A blank Swift file must be created for native modules with Swift files to work correctly.
-//