https://github.com/bradmartin/nativescript-gif

NativeScript plugin to use native gifs
https://github.com/bradmartin/nativescript-gif

android gif ios nativescript nativescript-gif nativescript-plugin typescript

Last synced: about 1 month ago
JSON representation

NativeScript plugin to use native gifs

• Host: GitHub
• URL: https://github.com/bradmartin/nativescript-gif
• Owner: bradmartin
• License: other
• Created: 2016-03-25T18:38:00.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-14T01:01:14.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T22:41:01.937Z (about 1 month ago)
• Topics: android, gif, ios, nativescript, nativescript-gif, nativescript-plugin, typescript
• Language: TypeScript
• Homepage:
• Size: 37.3 MB
• Stars: 50
• Watchers: 4
• Forks: 18
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


    
NativeScript-Gif




NativeScript plugin to use GIFs in your application.




 

        

    

    

        

    

    

        

    

    




---

## Installation

NativeScript Version 7+:

`tns plugin add nativescript-gif`

NativeScript Version prior to 7:

`tns plugin add [email protected]`

The native libraries used to handle rendering GIFs for Android & iOS.

| Android Library                                                                   | iOS CocoaPod                                                                 |

| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |

| [Koral-- / android-gif-drawable](https://github.com/koral--/android-gif-drawable) | [FLAnimatedImage by Flipboard](https://github.com/Flipboard/FLAnimatedImage) |

| Android Screen                           | iOS Screen                          |

| ---------------------------------------- | ----------------------------------- |

| ![GifExample](images/android_sample.gif) | ![iOSSample](images/ios_sample.gif) |

## Usage

#### Plain NativeScript

IMPORTANT: _Make sure you include

`xmlns:Gif="nativescript-gif"` on the Page element._

```XML

  

    

    

  

```

### NativeScript Angular

```typescript

import { registerElement } from 'nativescript-angular/element-registry';

import { Gif } from 'nativescript-gif';

registerElement('Gif', () => Gif);

```

##### HTML

```HTML

    

    

```

### Bundling Note:

Be sure that you have your `.gifs` added to the globs of the CopyWebpackPlugin as part of your webpack.config.

#### Prior to Webpack 5

Demo app sample: https://github.com/bradmartin/nativescript-gif/blob/master/demo/webpack.config.js#L282

```javascript

{

  from: {

    glob: '**/*.gif';

  }

}

```

#### Webpack 5+

```javascript

const webpack = require('@nativescript/webpack')

module.exports = env => {

  webpack.init(env)

  webpack.Utils.addCopyRule('**/*.gif')

  return webpack.resolveConfig()

}

```

## Properties

- **src** - _required_

  Set the gif file to play.

- **headers - (JSON Object)** - _optional_

  Set headers to add when loading a gif from URL

## API

##### start()

- starts playing the .gif

##### stop()

- stops playing the .gif

##### getFrameCount()

- returns the number of frames in the current .gif

##### isPlaying()

- returns boolean value indicating if the gif is playing.

---

###### _Android Only_

##### getDuration()

- returns the .gif duration

##### reset()

- resets the .gif to its initial frame

##### setSpeed(speedFactor: _Number_)

- sets the .gif play speed

##### recycle()

- provided to speed up freeing memory _advanced usage - you shouldn't need this often_