https://github.com/numandev1/react-native-gifsicle
Compress, Optimize and Manipulate GIF in React Native 🚀✨
https://github.com/numandev1/react-native-gifsicle
android compress compress-images compressed compression compressor gif gif-animation gifsicle ios manipulation optimization optimization-algorithms react react-native reactjs
Last synced: 11 months ago
JSON representation
Compress, Optimize and Manipulate GIF in React Native 🚀✨
- Host: GitHub
- URL: https://github.com/numandev1/react-native-gifsicle
- Owner: numandev1
- License: mit
- Created: 2023-10-12T08:16:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T21:46:41.000Z (over 2 years ago)
- Last Synced: 2025-06-16T06:20:24.859Z (about 1 year ago)
- Topics: android, compress, compress-images, compressed, compression, compressor, gif, gif-animation, gifsicle, ios, manipulation, optimization, optimization-algorithms, react, react-native, reactjs
- Language: C
- Homepage: https://www.freeconvert.com/gif-compressor
- Size: 2.81 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](#installation)
[](#managed-expo)
[](https://discord.gg/fgPHnZpH9d)
[](https://github.com/numandev1/react-native-gifsicle/stargazers)
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](#installation)
- [For React Native](#installation)
- [Managed Expo](#managed-expo)
- [Basic Usage](#basic-usage)
- [Setup](#video)
- [IOS](#ios)
- [Android](#android)
## Installation
```sh
yarn add react-native-gifsicle
```
##### [New Architecture (Turbo Module) Supported](https://reactnative.dev/docs/new-architecture-intro)
You can give feedback on [Discord channel](https://discord.gg/fgPHnZpH9d)
### Managed Expo
```
expo install react-native-gifsicle
```
Add the Gifsicle plugin to your Expo config (`app.json`, `app.config.json` or `app.config.js`):
```json
{
"name": "my app",
"plugins": ["react-native-gifsicle"]
}
```
Finally, compile the mods:
```
expo prebuild
```
## Basic Usage
## Javascript
```js
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](https://reactnative.dev/blog/2019/07/03/version-60#native-modules-are-now-autolinked) 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](https://github.com/numandev1/react-native-gifsicle/stargazers)
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](https://github.com/kohler/gifsicle) by [kohler](https://github.com/kohler)
[Author of this package](https://github.com/numandev1/react-native-gifsicle.git) by [Numan](https://github.com/numandev1)