Awesome
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> </p>KenBurns Image Effect for React Native. Based on Image Component Image Component.
Version: 4.1.0
Tested on React Native 0.62.2 iOS and Android.
Installation
Note: Requires React Timeout. If it's not available, install it from the command below.
$ npm i react-timeout --save
The proceed to install the library
$ npm i react-native-kenburns-view --save
Demo/Example
Go to react-native-kenburns-view/example/KenBurnsExample to view the example.
Usage
<BurnsImage tension={4} friction={50} imageWidth={200} imageHeight={100} sourceUri={require(./images/kenburnsimage.jpg)} placeholderSource={require( './images/placeholder.jpg')}>
</BurnsImage>
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. |
npm
Link: react-native-kenburns-view on npm
License
ISC License
Feedback
Email: nimilahiran@gmail.com
Twitter: nHiRanZ on Twitter