react-native-kenburns-view

Expo app showcasing the react-native-kenburns-view Ken Burns effect (slow zoom and pan over still images) on iOS and Android.

Back to react-library-demos.

Prerequisites

This demo links to the library from a local sibling checkout, not only from npm.

1. Clone react-library-demos.
2. Clone react-native-kenburns-view next to it:

side-projects/
├── react-library-demos/
│   └── react-native-kenburns-view/    ← you are here (this demo)
└── react-native-kenburns-view/        ← library source (required)

Alternatively, install the published package instead of the local path:

npm install react-native-kenburns-view

and remove or change the file:../../react-native-kenburns-view entry in package.json.

Run locally

From this folder (react-library-demos/react-native-kenburns-view/):

npm install
npm run dev

(or npm start / npx expo start)

Press i for the iOS simulator, a for Android, 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.

Build and preview

npm run build

Exports a production bundle via expo export. For a dev server on web: npm run web.

What you'll see

A scrollable list of three landscape images, each in a KenBurnsView with independent zoom/pan timing (duration, zoomStart, zoomEnd, panX, panY). Sample images load from remote URLs.

Library docs

Installation, API, and usage: react-native-kenburns-view README.