Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-native-image-sequence-podspec

1.1.5 • Public • Published

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

  1. npm i --save react-native-image-sequence
  2. 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}
  />

Install

npm i react-native-image-sequence-podspec

DownloadsWeekly Downloads

0

Version

1.1.5

License

MIT

Unpacked Size

94.9 kB

Total Files

20

Last publish

Collaborators

  • avatar