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