react-native-kenburns-view 4.1.0 → 5.0.0

package/example/kenburns-example/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "kenburns-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
+  },
+  "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:../.."
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2"
+  }
+}

package/lib/KenBurnsView.js

@@ -4,120 +4,220 @@
  *
  * Version: 4.1.0
  *
- * Description: This reflects the KenBurns effect in a React Native Image
+ * Description: Ken Burns effect (zoom + pan) for React Native images.
  */
 
-'use strict';
-import React, {Component} from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import PropTypes from 'prop-types';
-import rebound from 'rebound';
-import {Image, View} from 'react-native';
-import ReactTimeout from 'react-timeout';
-
-class KenBurnsView extends Component {
-    static defaultProps = {
-        tension: 6,
-        friction: 50,
-        min: 1.3,
-        max: 1.6,
-        autoStart: true,
-    };
-
-    state = {
-        scale: null,
-    };
-
-    UNSAFE_componentWillMount() {
-        if (!this._mounted) {
-            this.springSystemFunctions();
-        }
-    }
-
-    componentWillUnmount() {
-        this._mounted = false;
-        this._scrollSpring && this._scrollSpring.destroy();
-    }
-
-    springSystemFunctions() {
-        this.springSystem = new rebound.SpringSystem();
-        this._scrollSpring = this.springSystem.createSpring();
-        var springConfig = this._scrollSpring.getSpringConfig();
-        const {tension, friction} = this.props;
-
-        springConfig.tension = tension;
-        springConfig.friction = friction;
-
-        this._scrollSpring.addListener({
-            onSpringUpdate: () => {
-                this.setState({scale: this._scrollSpring.getCurrentValue()});
-            },
-        });
-
-        this._scrollSpring.setCurrentValue(1);
+import {
+  Animated,
+  Easing,
+  ImageBackground,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const DEFAULT_DURATION = 20000;
+const FILL_SCALE = 1.15;
+
+const KenBurnsView = forwardRef((props, ref) => {
+  const {
+    imageWidth,
+    imageHeight,
+    sourceUri,
+    placeholderSource,
+    autoStart = true,
+    duration = DEFAULT_DURATION,
+    zoomStart = 1,
+    zoomEnd = 1.3,
+    panX = 0.1,
+    panY = 0.1,
+    children,
+    style,
+    ...rest
+  } = props;
+
+  const progress = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+
+  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(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
     }
-
-    componentDidMount() {
-        this._mounted = true;
-        const {autoStart} = this.props;
-        if (autoStart) {
-            this.animLoop();
-        }
+  }, []);
+
+  const start = useCallback(() => {
+    stop();
+    progress.setValue(randomRef.phase);
+
+    const d = Math.round(duration * 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]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      start,
+      stop,
+      reset: () => {
+        stop();
+        progress.setValue(0);
+      },
+    }),
+    [start, stop, progress],
+  );
+
+  useEffect(() => {
+    if (autoStart) {
+      start();
     }
 
-    animLoop = () => {
-        this.animationFunc();
-
-        setTimeout(() => {
-            this.animLoop();
-        }, Math.floor((Math.random() * 11000) + 10000));
-    };
-
-    animationFunc = () => {
-        const {min, max} = this.props;
-        const endValue = parseFloat((Math.random() * (max - min) + min).toFixed(2));
-        this._scrollSpring.setEndValue(endValue);
-
-        setTimeout(() => {
-            this._scrollSpring.setEndValue(1);
-        }, Math.floor((Math.random() * 11000) + 10000));
+    return () => {
+      stop();
     };
-
-    resetAnimation = () => {
-        this._scrollSpring && this._scrollSpring.setCurrentValue(1);
-    };
-
-    render() {
-        var imageStyle = {
-            alignItems: 'stretch',
-            width: this.props.imageWidth,
-            height: this.props.imageHeight,
-            transform: [
-                {
-                    scale: this.state.scale,
-                },
-            ],
-        };
-
-        return (
-            <View>
-                <Image
-                    defaultSource={this.props.placeholderSource}
-                    source={this.props.sourceUri}
-                    style={imageStyle}
-                >
-                    {this.props.children}
-                </Image>
-            </View>
-        );
-    }
-}
+  }, [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],
+  });
+
+  const translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-panYAmount, panYAmount],
+  });
+
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [zoomStart, zoomEnd],
+  });
+
+  const innerSize = {
+    width: w * FILL_SCALE,
+    height: h * FILL_SCALE,
+  };
+  const innerOffset = {
+    left: -w * (FILL_SCALE - 1) / 2,
+    top: -h * (FILL_SCALE - 1) / 2,
+  };
+
+  const outerStyle = [
+    styles.outer,
+    {
+      width: imageWidth,
+      height: imageHeight,
+    },
+    style,
+  ];
+
+  const animatedStyle = {
+    ...innerSize,
+    ...innerOffset,
+    transform: [{scale}, {translateX}, {translateY}],
+  };
+
+  return (
+    <View style={outerStyle}>
+      <Animated.View style={[styles.inner, animatedStyle]}>
+        <ImageBackground
+          defaultSource={placeholderSource}
+          source={sourceUri}
+          style={styles.image}
+          imageStyle={styles.imageCover}
+          resizeMode="cover"
+          {...rest}>
+          {children}
+        </ImageBackground>
+      </Animated.View>
+    </View>
+  );
+});
+
+KenBurnsView.displayName = 'KenBurnsView';
 
 KenBurnsView.propTypes = {
-    autoStart: PropTypes.bool,
-    tension: PropTypes.number,
-    friction: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
+  autoStart: PropTypes.bool,
+  imageWidth: PropTypes.number.isRequired,
+  imageHeight: PropTypes.number.isRequired,
+  sourceUri: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
+    .isRequired,
+  placeholderSource: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.object,
+  ]),
+  duration: PropTypes.number,
+  zoomStart: PropTypes.number,
+  zoomEnd: PropTypes.number,
+  panX: PropTypes.number,
+  panY: PropTypes.number,
+  children: PropTypes.node,
+  style: PropTypes.any,
+};
+
+KenBurnsView.defaultProps = {
+  autoStart: true,
+  duration: DEFAULT_DURATION,
+  zoomStart: 1,
+  zoomEnd: 1.3,
+  panX: 0.1,
+  panY: 0.1,
 };
 
-export default ReactTimeout(KenBurnsView);
+const styles = StyleSheet.create({
+  outer: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  inner: {
+    position: 'absolute',
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    width: '100%',
+    height: '100%',
+  },
+  imageCover: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default KenBurnsView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-kenburns-view",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "KenBurns Image Effect for React Native",
   "main": "index.js",
   "scripts": {
@@ -27,9 +27,6 @@
     "example": "example"
   },
   "dependencies": {
-    "prop-types": "^15.6.0",
-    "react-mixin": "2",
-    "react-timer-mixin": "^0.13.3",
-    "rebound": "^0.0.15"
+    "prop-types": "^15.8.1"
   }
 }

package/example/KenBurnsExample/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["react-native"]
-}

package/example/KenBurnsExample/.buckconfig

@@ -1,6 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2

package/example/KenBurnsExample/.flowconfig

@@ -1,67 +0,0 @@
-[ignore]
-; We fork some components by platform
-.*/*[.]android.js
-
-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-
-; Ignore polyfills
-.*/Libraries/polyfills/.*
-
-; Ignore metro
-.*/node_modules/metro/.*
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow/
-node_modules/react-native/flow-github/
-
-[options]
-emoji=true
-
-module.system=haste
-module.system.haste.use_name_reducers=true
-# get basename
-module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
-# strip .js or .js.flow suffix
-module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
-# strip .ios suffix
-module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
-module.system.haste.paths.blacklist=.*/__tests__/.*
-module.system.haste.paths.blacklist=.*/__mocks__/.*
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
-
-munge_underscores=true
-
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
-
-module.file_ext=.js
-module.file_ext=.jsx
-module.file_ext=.json
-module.file_ext=.native.js
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FlowFixMeProps
-suppress_type=$FlowFixMeState
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-[version]
-^0.75.0

package/example/KenBurnsExample/.gitattributes

@@ -1 +0,0 @@
-*.pbxproj -text

package/example/KenBurnsExample/.snyk

@@ -1,10 +0,0 @@
-# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.13.5
-ignore: {}
-# patches apply the minimum changes required to fix a vulnerability
-patch:
-  SNYK-JS-LODASH-450202:
-    - react-native > metro-babel-register > @babel/core > lodash:
-        patched: '2019-07-30T00:35:40.351Z'
-    - react-native > metro-babel-register > @babel/core > @babel/generator > lodash:
-        patched: '2019-07-30T00:35:40.351Z'

package/example/KenBurnsExample/.watchmanconfig

@@ -1 +0,0 @@
-{}

package/example/KenBurnsExample/App.js

@@ -1,64 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-import KenBurnsImage from 'react-native-kenburns-view';
-const Dimensions = require('Dimensions');
-
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-        <View style={styles.container}>
-            <Text style={styles.title}>
-                Using KenBurns View!
-            </Text>
-            <View style={styles.imageContainer}>
-                <KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={require('./images/image1.jpg')} placeholderSource={require('./images/placeholder.jpg')}>
-                </KenBurnsImage>
-            </View>
-            <View style={styles.imageContainer}>
-                <KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={require('./images/image2.jpg')} placeholderSource={require('./images/placeholder.jpg')}>
-                </KenBurnsImage>
-            </View>
-            <View style={styles.imageContainer}>
-                <KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={require('./images/image3.jpg')} placeholderSource={require('./images/placeholder.jpg')}>
-                </KenBurnsImage>
-            </View>
-        </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#F5FCFF',
-    },
-    title: {
-        fontSize: 20,
-        textAlign: 'center',
-        margin: 10,
-    },
-    innerText: {
-        textAlign: 'center',
-        color: '#333333',
-        marginBottom: 5,
-    },
-    imageContainer: {
-        overflow: 'hidden',
-        width: Dimensions.get('window').width,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-});

package/example/KenBurnsExample/android/app/BUCK

@@ -1,65 +0,0 @@
-# To learn about Buck see [Docs](https://buckbuild.com/).
-# To run your application with Buck:
-# - install Buck
-# - `npm start` - to start the packager
-# - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
-# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
-# - `buck install -r android/app` - compile, install and run application
-#
-
-lib_deps = []
-
-for jarfile in glob(['libs/*.jar']):
-  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
-  lib_deps.append(':' + name)
-  prebuilt_jar(
-    name = name,
-    binary_jar = jarfile,
-  )
-
-for aarfile in glob(['libs/*.aar']):
-  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
-  lib_deps.append(':' + name)
-  android_prebuilt_aar(
-    name = name,
-    aar = aarfile,
-  )
-
-android_library(
-    name = "all-libs",
-    exported_deps = lib_deps,
-)
-
-android_library(
-    name = "app-code",
-    srcs = glob([
-        "src/main/java/**/*.java",
-    ]),
-    deps = [
-        ":all-libs",
-        ":build_config",
-        ":res",
-    ],
-)
-
-android_build_config(
-    name = "build_config",
-    package = "com.kenburnsexamplenew",
-)
-
-android_resource(
-    name = "res",
-    package = "com.kenburnsexamplenew",
-    res = "src/main/res",
-)
-
-android_binary(
-    name = "app",
-    keystore = "//android/keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    package_type = "debug",
-    deps = [
-        ":app-code",
-    ],
-)