1.0.1 • Published 7 years ago
react-native-animated-image-entrances
Wrap any image in various components and have them render with cool effects after loading.
Installation
npm install --save react-native-animated-image-entrances
Usage
import {
FadeIn,
PulsateIn,
RotateIn,
SlideInFromTop,
SlideInFromLeft,
SlideInFromRight,
SlideInFromBottom,
SpringIn,
ZoomIn
} from 'react-native-animated-image-entrances';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<FadeIn
source='https://images.unsplash.com/photo-1539744208579-527f98343df2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d232c4048911a75aa1522a1244d0e99c&auto=format&fit=crop&w=281&q=80'
style={{ height: 300, width: 300 }}
animationDuration={5000}
/>
</View>
);
}
}
Props
FadeIn
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| animationDuration | integer | 4000 | The duration the animation lasts in ms. Lower number means faster animation |
SpringIn
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| friction | integer | 2 | the friction for the spring animation |
PulsateIn
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| animationDuration | integer | 2000 | The duration the animation lasts in ms. Lower number means faster animation |
| inputRange . | array | 0, 0.2, 0.5, 0.7, 0.9, 1 | 0 to 1 |
| outputRange . | array | 0.9, 1, 0.9, 1, 0.9, 1 | output array |
RotateIn
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| animationDuration | integer | 2000 | The duration the animation lasts in ms. Lower number means faster animation |
| inputRange . | array | 0, 1 | input array |
| outputRange . | array | '0deg', '360deg' | use 720deg to rotate twice, 1080deg to rotate thrice and so on |
ZoomIn
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| animationDuration | integer | 2000 | The duration the animation lasts in ms. Lower number means faster animation |
| inputRange . | array | 0, 0.2, 0.5, 0.7, 0.9, 1] | input range |
| outputRange . | array | 0.3, 0.5, 0.6, 0.8, 0.9, 1 | output range |
SlideInFromLeft, SlideInFromRight, SlideInFromTop, SlideInFromBottom
| Property | Type | Default | Description |
|---|
| source (required) | string | null | remote url of image |
| animationDuration | integer | 2000 | The duration the animation lasts in ms. Lower number means faster animation |
| inputRange . | array | 0, 1] | input range |
| outputRange . | array | -100, 100 | Specify final placement or where image slides to. |
Other Props
| Property | Type | Default | Description |
|---|
| resizeMode | string | cover | image resizeMode |
| onLoad | function | - | Override the current animation with your own method |
| style . | object | { height: 100, width: 100 } | style attributes for image |
| onProgress . | function | null | - |
| onLoadStart . | function null | - |
| onLoadEnd . | function | null | - |
| onError . | function | null | - |