Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nHiRanZ/react-native-kenburns-view
KenBurns Image Effect for React Native Applications
https://github.com/nHiRanZ/react-native-kenburns-view
Last synced: about 1 month ago
JSON representation
KenBurns Image Effect for React Native Applications
- Host: GitHub
- URL: https://github.com/nHiRanZ/react-native-kenburns-view
- Owner: nHiRanZ
- Created: 2016-01-18T04:26:59.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-11T14:10:12.000Z (about 1 year ago)
- Last Synced: 2023-12-11T15:31:44.678Z (about 1 year ago)
- Language: JavaScript
- Size: 4.52 MB
- Stars: 58
- Watchers: 2
- Forks: 18
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-web-effect - react-native-kenburns-view - KenBurns Image Effect for React Native Applications (🚀 A series of exquisite and compact web page cool effects / Image Effect)
- awesome-web-effect - react-native-kenburns-view - KenBurns Image Effect for React Native Applications (🚀 A series of exquisite and compact web page cool effects / Image Effect)
README
# react-native-kenburns-view
[`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: 4.1.0Tested 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.
```bash
$ npm i react-timeout --save
```The proceed to install the library
```bash
$ npm i react-native-kenburns-view --save
```## Demo/Example
![kenburns view demo](https://media.giphy.com/media/xTcnT8ju8pHKhIZY9G/giphy.gif)
Go to `react-native-kenburns-view/example/KenBurnsExample` to view the example.
## Usage
```jsx
```
## 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`](https://www.npmjs.com/package/react-native-kenburns-view)
## License
[`ISC`](http://opensource.org/licenses/ISC) License
## Feedback
Email: [email protected]
Twitter: [`nHiRanZ on Twitter`](https://twitter.com/nHiRanZ)