react-native-image-sequence-podspec
v1.1.5
Published
A <ImageSequence> component for react-native, but this package is not update anymore, so I(lhl09120) fork the old package and fix some problems and add some features
Downloads
15
Maintainers
Readme
react-native-image-sequence
native modules for handling image sequence animations. (created because i had performance issues with a javascript only solution like: https://github.com/remobile/react-native-image-animation)
its a simple wrapper around iOS UIImageView.animationImages
and Android AnimationDrawable
Installation
npm i --save react-native-image-sequence
react-native link react-native-image-sequence
Features
These features only added to package react-native-image-sequence
// read image from Assets.xcassets (Only iOS)
const images = [
{
uri: 'path',
// add this property
useXcassets: true,
},
];
// read image from bundle (Only iOS)
const images = [
{
uri: 'path',
// add this property
bundleName: 'bundleName',
},
];
// read image from assets floder (Only Android)
const images = [
{
// add assets:/ scheme
uri: 'asset:/{picPath}',
},
];
Examples
import ImageSequence from 'react-native-image-sequence';
const images = [
require('1.jpg'),
require('2.jpg'),
require('3.jpg'),
require('4.jpg'),
require('5.jpg'),
];
const centerIndex = Math.round(images.length / 2);
<ImageSequence
images={images}
startFrameIndex={centerIndex}
style={{width: 50, height: 50}} />
Change animation speed
You can change the speed of the animation by setting the framesPerSecond
property.
<ImageSequence
images={images}
framesPerSecond={24}
/>
Looping
You can change if animation loops indefinitely by setting the loop
property.
<ImageSequence
images={images}
framesPerSecond={24}
loop={false}
/>