react-native-kenburns-view 4.1.0 → 5.1.1

package/README.md

@@ -1,46 +1,79 @@
-# 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)
+# 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. Based on Image Component [`Image` Component](https://facebook.github.io/react-native/docs/image.html).
-Version: 3.0.0
+## About
 
-Tested on React Native 0.40+ iOS and Android.
+[**Ken Burns effect**](https://en.wikipedia.org/wiki/Ken_Burns_effect)—the slow zoom and pan over still images—for React Native. Drop in a single component, pass an image and size, and get a smooth, cinematic motion that’s great for hero images, galleries, or slideshows.
 
-## Installation
+**Lightweight:** No native code or custom native modules. It uses only React Native’s built-in `Animated` API and core components, so it works with standard RN and Expo and adds minimal bundle size. Each instance uses randomized timing and pan direction so multiple images don’t move in lockstep.
 
-Note: Requires React Timeout. If it's not available, install it from the command below.
-```bash
-$ npm i react-timeout --save
-```
+Version: 5.1.1
+
+## Supported React Native versions
+
+This library uses only React Native’s built-in `Animated` API and core components (`View`, `ImageBackground`). It has **no native code** and no custom native modules.
 
-The proceed to install the library
+- **Compatible with:** React Native **0.76+** (and earlier 0.7x / 0.6x in practice).
+- **Tested with:** React Native **0.76.x** and **0.83.x** (Expo SDK 52 and 55) on iOS and Android.
+
+If you use Expo, the example app runs on **Expo SDK 55** (React Native 0.83.2).
+
+## Installation
 ```bash
 $ npm i react-native-kenburns-view --save
 ```
 
 ## Demo/Example
 
-![kenburns view demo](https://media.giphy.com/media/xTcnT8ju8pHKhIZY9G/giphy.gif)
+![kenburns view demo](https://media.giphy.com/media/792gUTkm8Gic8AieQl/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 +85,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  
+X/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 = [
+  { uri: 'https://i.ibb.co/pjVgZTnf/image1.jpg' },
+  { uri: 'https://i.ibb.co/39n0tghZ/image2.jpg' },
+  { uri: 'https://i.ibb.co/YBcr2vHf/image3.jpg' },
+];
+const PLACEHOLDER = { uri: 'https://i.ibb.co/21NytpJN/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</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,20 @@
+# Ken Burns Example
+
+Expo app that demonstrates `react-native-kenburns-view` with sample images (zoom + pan).
+
+## Run
+
+```bash
+cd example/kenburns-example
+npm install
+npx expo start
+```
+
+Then press `i` for iOS simulator or `a` for Android emulator, or scan the QR code with Expo Go.
+
+If you see "Unable to resolve module" for the library, restart with a clean cache: `npx expo start --clear`.
+
+## Notes
+
+- The library is linked via `"react-native-kenburns-view": "file:../.."`.
+- Sample images are loaded from remote URLs (see `App.js`).

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",
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.kenburns-example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#1a1a2e"
+      }
+    },
+    "plugins": [
+      "expo-asset"
+    ]
+  }
+}

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.swift

@@ -0,0 +1,69 @@
+internal import Expo
+import React
+import ReactAppDependencyProvider
+
+@main
+class AppDelegate: ExpoAppDelegate {
+  var window: UIWindow?
+
+  var reactNativeDelegate: ExpoReactNativeFactoryDelegate?
+  var reactNativeFactory: RCTReactNativeFactory?
+
+  public override func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let delegate = ReactNativeDelegate()
+    let factory = ExpoReactNativeFactory(delegate: delegate)
+    delegate.dependencyProvider = RCTAppDependencyProvider()
+
+    reactNativeDelegate = delegate
+    reactNativeFactory = factory
+
+#if os(iOS) || os(tvOS)
+    window = UIWindow(frame: UIScreen.main.bounds)
+    factory.startReactNative(
+      withModuleName: "main",
+      in: window,
+      launchOptions: launchOptions)
+#endif
+
+    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
+  }
+
+  // Linking API
+  public override func application(
+    _ app: UIApplication,
+    open url: URL,
+    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
+  ) -> Bool {
+    return super.application(app, open: url, options: options) || RCTLinkingManager.application(app, open: url, options: options)
+  }
+
+  // Universal Links
+  public override func application(
+    _ application: UIApplication,
+    continue userActivity: NSUserActivity,
+    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
+  ) -> Bool {
+    let result = RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    return super.application(application, continue: userActivity, restorationHandler: restorationHandler) || result
+  }
+}
+
+class ReactNativeDelegate: ExpoReactNativeFactoryDelegate {
+  // Extension point for config-plugins
+
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    // needed to return the correct URL for expo-dev-client.
+    bridge.bundleURL ?? bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+#if DEBUG
+    return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
+#else
+    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+#endif
+  }
+}

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/{KenBurnsExample/ios/KenBurnsExampleNew → kenburns-example/ios/KenBurnsExample}/Info.plist

@@ -2,55 +2,75 @@
 <!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>en</string>
+	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
-	<string>KenBurnsExampleNew</string>
+	<string>KenBurns Example</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundlePackageType</key>
-	<string>APPL</string>
+	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<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>RCTNewArchEnabled</key>
+	<true/>
 	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
+	<string>SplashScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
-		<string>armv7</string>
+		<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/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
 </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,48 @@
+<?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>0A2A.1</string>
+				<string>3B52.1</string>
+				<string>C617.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryDiskSpace</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>E174.1</string>
+				<string>85F4.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,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="24093.7" 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="24053.1"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.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>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </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"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </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>