react-native-kenburns-view 4.0.0 → 5.0.0

package/README.md

@@ -1,18 +1,25 @@
-# react-native-kenburns-view [![npm version](https://badge.fury.io/js/react-native-kenburns-view.svg)](https://badge.fury.io/js/react-native-kenburns-view)
-
-[`KenBurns`](https://en.wikipedia.org/wiki/Ken_Burns_effect) Image Effect for React Native. Based on Image Component [`Image` Component](https://facebook.github.io/react-native/docs/image.html).
-Version: 3.0.0
-
-Tested on React Native 0.40+ iOS and Android.
+# react-native-kenburns-view 
+<p align="left">
+  <a href="http://opensource.org/licenses/ISC">
+    <img src="https://img.shields.io/badge/license-ISC-blue.svg" alt="react-native-kenburns-view is released under the ISC license." />
+  </a>
+  <a href="https://www.npmjs.com/package/react-native-kenburns-view">
+    <img src="https://badge.fury.io/js/react-native-kenburns-view.svg" alt="Current npm package version." />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=nHiRanZ">
+    <img src="https://img.shields.io/twitter/follow/nHiRanZ.svg?label=Follow%20@nHiRanZ" alt="Follow @nHiRanZ" />
+  </a>
+  <a href="https://nimila.online">
+    <img src="https://img.shields.io/badge/website-nimila.online-blue" alt="Website" />
+  </a>
+</p>
+
+[`KenBurns`](https://en.wikipedia.org/wiki/Ken_Burns_effect) Image Effect for React Native. Now implemented with the modern `Animated` API, supporting both smooth **zoom** and **pan**.
+Version: 5.0.0
+
+Tested on React Native 0.76.5 iOS and Android.
 
 ## Installation
-
-Note: Requires React Timeout. If it's not available, install it from the command below.
-```bash
-$ npm i react-timeout --save
-```
-
-The proceed to install the library
 ```bash
 $ npm i react-native-kenburns-view --save
 ```
@@ -21,26 +28,40 @@ $ npm i react-native-kenburns-view --save
 
 ![kenburns view demo](https://media.giphy.com/media/xTcnT8ju8pHKhIZY9G/giphy.gif)
 
-Go to `react-native-kenburns-view/example/KenBurnsExample` to view the example.
+Run the example app (Expo) from `example/kenburns-example`: `cd example/kenburns-example && npm install && npx expo start`.
 
 ## Usage
 
 ```jsx
-<BurnsImage tension={4} friction={50} imageWidth={200} imageHeight={100} sourceUri={require(./images/kenburnsimage.jpg)} placeholderSource={require( './images/placeholder.jpg')}>
-</BurnsImage>
+import KenBurnsImage from 'react-native-kenburns-view';
+
+<KenBurnsImage
+  imageWidth={200}
+  imageHeight={100}
+  sourceUri={require('./images/kenburnsimage.jpg')}
+  placeholderSource={require('./images/placeholder.jpg')}
+  // optional, see API below:
+  zoomStart={1}
+  zoomEnd={1.3}
+  panX={0.1}
+  panY={0.1}
+/>
 ```
 
 ## API (props)
 
 | Prop | Description |
 |---|---|
-|**`tension`**| `int` Tension Value. |
-|**`friction`**| `int` Friction Value. |
-|**`imageWidth`**| `int` Image Width. |
-|**`imageHeight`**| `int` Image Height. |
-|**`sourceUri`**| `URI String` Image URL. |
-|**`placeholderSource`**| `URI String` Placeholder Image URL (Possibly a Local Image). |
-|**`autoStart`**| `boolean` Autostarts the animation. |
+| **`imageWidth`** | `number` Image width. |
+| **`imageHeight`** | `number` Image height. |
+| **`sourceUri`** | `ImageSource` Image source (e.g. `require()` or `{ uri: string }`). |
+| **`placeholderSource`** | `ImageSource` Placeholder image source (optional). |
+| **`autoStart`** | `boolean` Autostarts the animation. Default: `true`. |
+| **`duration`** | `number` Duration (ms) for a full zoom/pan in one direction before reversing. Default: `20000`. |
+| **`zoomStart`** | `number` Start zoom factor. Default: `1`. |
+| **`zoomEnd`** | `number` End zoom factor. Default: `1.3`. |
+| **`panX`** | `number` Horizontal pan amount as a fraction of `imageWidth`. Default: `0.1` (10% each way). |
+| **`panY`** | `number` Vertical pan amount as a fraction of `imageHeight`. Default: `0.1` (10% each way). |
 
 ## npm
 
@@ -52,5 +73,7 @@ Link: [`react-native-kenburns-view on npm`](https://www.npmjs.com/package/react-
 
 ## Feedback
 
-Email: nimilahiran@gmail.com
-Twitter: [`nHiRanZ on Twitter`](https://twitter.com/nHiRanZ)
+Website: [nimila.online](https://nimila.online)  
+Email: nimilahiran@gmail.com  
+Twitter: [@nHiRanZ](https://twitter.com/nHiRanZ)
+

package/example/kenburns-example/App.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Dimensions, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import KenBurnsView from 'react-native-kenburns-view';
+
+const { width } = Dimensions.get('window');
+const CARD_HEIGHT = 220;
+
+const IMAGES = [
+  require('./assets/images/image1.jpg'),
+  require('./assets/images/image2.jpg'),
+  require('./assets/images/image3.jpg'),
+];
+const PLACEHOLDER = require('./assets/images/placeholder.jpg');
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <StatusBar style="light" />
+      <Text style={styles.title}>Ken Burns Effect</Text>
+      <Text style={styles.subtitle}>Zoom + pan animation</Text>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {IMAGES.map((source, index) => (
+          <View key={index} style={styles.card}>
+            <KenBurnsView
+              imageWidth={width}
+              imageHeight={CARD_HEIGHT}
+              sourceUri={source}
+              placeholderSource={PLACEHOLDER}
+              duration={15000}
+              zoomStart={1}
+              zoomEnd={1.2}
+              panX={0.08}
+              panY={0.08}
+            />
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#1a1a2e',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#eee',
+    textAlign: 'center',
+    marginTop: 60,
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#888',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  scroll: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 40,
+  },
+  card: {
+    width,
+    height: CARD_HEIGHT,
+    marginBottom: 16,
+    overflow: 'hidden',
+  },
+});

package/example/kenburns-example/README.md

@@ -0,0 +1,32 @@
+# Ken Burns Example
+
+Example app for `react-native-kenburns-view` using Expo.
+
+## Run
+
+From this folder:
+
+```bash
+npm install
+```
+
+**Option A – development build (iOS simulator):**
+
+```bash
+npx expo run:ios
+```
+
+**Option B – Expo Go (no native build):**
+
+```bash
+npx expo start
+```
+
+Then scan the QR code or press `i` / `a` for simulator.
+
+If you see "Unable to resolve module react-native-kenburns-view", clear Metro’s cache and try again: `npx expo start --clear` (then run `npx expo run:ios` in another terminal, or run `expo run:ios` after the dev server is up).
+
+## Notes
+
+- The library is linked via `"react-native-kenburns-view": "file:../.."`.
+- Test images are in `assets/images/` (image1–3 and placeholder).

package/example/kenburns-example/app.json

@@ -0,0 +1,21 @@
+{
+  "expo": {
+    "name": "KenBurns Example",
+    "slug": "kenburns-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "light",
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.kenburns-example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#1a1a2e"
+      }
+    }
+  }
+}

package/example/kenburns-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/example/kenburns-example/ios/.xcode.env

@@ -0,0 +1,11 @@
+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

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

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

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

@@ -0,0 +1,62 @@
+#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/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images": [
+    {
+      "filename": "App-Icon-1024x1024@1x.png",
+      "idiom": "universal",
+      "platform": "ios",
+      "size": "1024x1024"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

package/example/{KenBurnsExample/ios/KenBurnsExampleNew → kenburns-example/ios/KenBurnsExample}/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
   "info" : {
     "version" : 1,
-    "author" : "xcode"
+    "author" : "expo"
   }
 }

package/example/kenburns-example/ios/KenBurnsExample/Images.xcassets/SplashScreenBackground.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors": [
+    {
+      "color": {
+        "components": {
+          "alpha": "1.000",
+          "blue": "1.00000000000000",
+          "green": "1.00000000000000",
+          "red": "1.00000000000000"
+        },
+        "color-space": "srgb"
+      },
+      "idiom": "universal"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

package/example/kenburns-example/ios/KenBurnsExample/Info.plist

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>CADisableMinimumFrameDurationOnPhone</key>
+    <true/>
+    <key>CFBundleDevelopmentRegion</key>
+    <string>$(DEVELOPMENT_LANGUAGE)</string>
+    <key>CFBundleDisplayName</key>
+    <string>KenBurns Example</string>
+    <key>CFBundleExecutable</key>
+    <string>$(EXECUTABLE_NAME)</string>
+    <key>CFBundleIdentifier</key>
+    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+    <key>CFBundleInfoDictionaryVersion</key>
+    <string>6.0</string>
+    <key>CFBundleName</key>
+    <string>$(PRODUCT_NAME)</string>
+    <key>CFBundlePackageType</key>
+    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
+    <key>CFBundleShortVersionString</key>
+    <string>1.0.0</string>
+    <key>CFBundleSignature</key>
+    <string>????</string>
+    <key>CFBundleURLTypes</key>
+    <array>
+      <dict>
+        <key>CFBundleURLSchemes</key>
+        <array>
+          <string>com.anonymous.kenburns-example</string>
+        </array>
+      </dict>
+    </array>
+    <key>CFBundleVersion</key>
+    <string>1</string>
+    <key>LSMinimumSystemVersion</key>
+    <string>12.0</string>
+    <key>LSRequiresIPhoneOS</key>
+    <true/>
+    <key>NSAppTransportSecurity</key>
+    <dict>
+      <key>NSAllowsArbitraryLoads</key>
+      <false/>
+      <key>NSAllowsLocalNetworking</key>
+      <true/>
+    </dict>
+    <key>UILaunchStoryboardName</key>
+    <string>SplashScreen</string>
+    <key>UIRequiredDeviceCapabilities</key>
+    <array>
+      <string>arm64</string>
+    </array>
+    <key>UIRequiresFullScreen</key>
+    <false/>
+    <key>UIStatusBarStyle</key>
+    <string>UIStatusBarStyleDefault</string>
+    <key>UISupportedInterfaceOrientations</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
+    </array>
+    <key>UISupportedInterfaceOrientations~ipad</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
+    <key>UIUserInterfaceStyle</key>
+    <string>Light</string>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
+    <false/>
+  </dict>
+</plist>

package/example/kenburns-example/ios/KenBurnsExample/KenBurnsExample-Bridging-Header.h

@@ -0,0 +1,3 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//

package/example/kenburns-example/ios/KenBurnsExample/KenBurnsExample.entitlements

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict/>
+</plist>

package/example/kenburns-example/ios/KenBurnsExample/PrivacyInfo.xcprivacy

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>CA92.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>C617.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategorySystemBootTime</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>35F9.1</string>
+			</array>
+		</dict>
+	</array>
+	<key>NSPrivacyCollectedDataTypes</key>
+	<array/>
+	<key>NSPrivacyTracking</key>
+	<false/>
+</dict>
+</plist>

package/example/kenburns-example/ios/KenBurnsExample/SplashScreen.storyboard

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <scene sceneID="EXPO-SCENE-1">
+            <objects>
+                <viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
+                    <view key="view" userInteractionEnabled="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="EXPO-ContainerView" userLabel="ContainerView">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                        <subviews/>
+                        <viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
+                        <constraints>
+                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="0VC-Wk-OaO"/>
+                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="zR4-NK-mVN"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="0.0" y="0.0"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="SplashScreenLogo" width="100" height="90.333335876464844"/>
+    </resources>
+</document>

package/example/kenburns-example/ios/KenBurnsExample/Supporting/Expo.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>EXUpdatesCheckOnLaunch</key>
+    <string>ALWAYS</string>
+    <key>EXUpdatesEnabled</key>
+    <false/>
+    <key>EXUpdatesLaunchWaitMs</key>
+    <integer>0</integer>
+  </dict>
+</plist>

package/example/{KenBurnsExample/ios/KenBurnsExampleNew → kenburns-example/ios/KenBurnsExample}/main.m

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 #import <UIKit/UIKit.h>
 
 #import "AppDelegate.h"
@@ -14,3 +7,4 @@ int main(int argc, char * argv[]) {
     return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
   }
 }
+

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

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