0.0.10 • Public • Published

GitHub Repo stars GitHub Repo stars GitHub Repo stars GitHub Repo stars npm

REACT-NATIVE-GIFSICLE is a react-native package, which helps us to Compress, Optimize and Manipulate Gif, It is a using Gifsicle under the hood

Table of Contents

Open Table of Contents


yarn add react-native-gifsicle
New Architecture (Turbo Module) Supported

You can give feedback on Discord channel

Managed Expo

expo install react-native-gifsicle

Add the Gifsicle plugin to your Expo config (app.json, app.config.json or app.config.js):

  "name": "my app",
  "plugins": ["react-native-gifsicle"]

Finally, compile the mods:

expo prebuild

Basic Usage


import RNGifsicle from 'react-native-gifsicle';

const manipulatedUri = await RNGifsicle.compressGif(uri, {
  lossy: 100,
  colors: 250,
  // scale_x: 2,
  // scale_y: 2,
  // optimize:3
  // height: 250,
  // width: 300,


Install the package:

yarn add react-native-gifsicle

Link the library:

(Note: For React Native 0.60 or greater, autolinking is available)

or later. For earlier versions you need to manually link the module.)

react-native link react-native-gifsicle


if cocoapods are used in the project then pod has to be installed as well:

(cd ios; pod install)
  • Manual Link (iOS)

    1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    2. Go to node_modulesreact-native-gifsicle and add Gifsicle.xcodeproj
    3. Expand the Gifsicle.xcodeprojProducts folder
    4. In the project navigator, select your project. Add Gifsicle.a to your project's Build PhasesLink Binary With Libraries
    5. And go the Build Settings tab. Make sure All is toggled on (instead of Basic)
    6. Look for Header Search Paths and add $(SRCROOT)/../node_modules/react-native-gifsicle/ios/** as non-recursive


compressGif(uri, options)

Compresses a GIF located at the specified URI using the provided options.


  • uri (string): The URI of the GIF to compress.
  • options (object): The options for compression. Available options are:
    • lossy (number): Alter image colors to shrink output file size at the cost of artifacts and noise. default=200 range [0-200]
    • optimize (number): Optimize output GIFs. default=3 range [1-3]
    • colors (number): Reduce the number of colors to N. default=255 rage [0-255]
    • scale_x (number): Scale the image in the x-axis.
    • scale_y (number): Scale the image in the y-axis.
    • height (number): Resize the output GIF height.
    • width (number): Resize the output GIF width.


  • A Promise that resolves to a URI of the compressed GIF.

Consider supporting with a ⭐️ star on GitHub

If you are using the library in one of your projects, consider supporting it with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you.

Credits goes to

Gifsicle by kohler

Author of this package by Numan

Package Sidebar


npm i react-native-gifsicle

Weekly Downloads






Unpacked Size

775 kB

Total Files


Last publish


  • nomi9995