A <ImageSequence> component for react-native
npm install react-native-image-sequence-2UIImageView.animationImages and Android AnimationDrawable
npm i --save react-native-image-sequence-2
cd ios && pod install
javascript
import ImageSequence from 'react-native-image-sequence-2';
const images = [
require('1.jpg'),
require('2.jpg'),
require('3.jpg'),
require('4.jpg'),
require('5.jpg'),
];
const centerIndex = Math.round(images.length / 2);
images={images}
startFrameIndex={centerIndex}
style={{width: 50, height: 50}}
/>
`
$3
You can change the speed of the animation by setting the framesPerSecond property.
`javascript
images={images}
framesPerSecond={24}
/>
`
$3
You can change if animation loops indefinitely by setting the loop property.
`javascript
images={images}
framesPerSecond={24}
loop={false}
/>
`
$3
Loading and using an image with a higher resolution than the size of the image display area does not provide any visible benefit, but still takes up precious memory and incurs additional performance overhead due to additional on the fly scaling. So choosing to downsample an image before rendering saves memory and CPU time during the rendering process, but costs more CPU time during the image loading process.
You can set the images to be downsampled by setting both the downsampleWidth and downsampleHeight properties. Both properties must be set to positive numbers to enable downsampling.
`javascript
images={images}
downsampleWidth={32}
downsampleHeight={32}
/>
`
IMPORTANT: The final image width and height will not necessarily match downsampleWidth and downsampleHeight but will just be a target for the per-platform logic on how to downsample.
On Android, the logic for how to downsample is taken from here. The image's aspect ratio will stay consistent after downsampling.
On iOS, the max value of downsampleWidth and downsampleHeight` will be used as the max pixel count for both dimensions in the final image. The image's aspect ratio will stay consistent after downsampling.