numandev1 / react-native-gifsicle

Compress, Optimize and Manipulate GIF in React Native 🚀✨

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

• Installation
  • For React Native
  • Managed Expo
• Basic Usage
• Setup
  • IOS
  • Android

Installation

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

Javascript

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,
});

Setup

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

IOS

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 Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ react-native-gifsicle and add Gifsicle.xcodeproj
  3. Expand the Gifsicle.xcodeproj ➜ Products folder
  4. In the project navigator, select your project. Add Gifsicle.a to your project's Build Phases ➜ Link 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

API

compressGif(uri, options)

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

Parameters

• 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.

Returns

• 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

react-native-gifsicle's Issues

Need to add web support using web assembly