react-native-kenburns-view

About

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.

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.

For the React (web) version of this effect, see react-kenburns-view.

Version: 5.2.0

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.

• 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

$ npm i react-native-kenburns-view --save

Demo/Example

Run the example app (Expo) from example/kenburns-example: cd example/kenburns-example && npm install && npx expo start.

Usage

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

Link: react-native-kenburns-view on npm

License

ISC License

Feedback

Website: nimila.online
Email: [email protected]
X/Twitter: @nHiRanZ