Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Compress, Optimize and Manipulate GIF in React Native 🚀✨

License

NotificationsYou must be signed in to change notification settings

numandev1/react-native-gifsicle

Repository files navigation

GitHub Repo starsGitHub Repo starsGitHub Repo starsGitHub Repo starsnpm

REACT-NATIVE-GIFSICLE is a react-native package, which helps us toCompress,Optimize andManipulate Gif, It is a usingGifsicle under the hood

Table of Contents

Open Table of Contents

Installation

yarn add react-native-gifsicle

You can give feedback onDiscord channel

Managed Expo

expo install react-native-gifsicle

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

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

Finally, compile the mods:

expo prebuild

Basic Usage

Javascript

importRNGifsiclefrom'react-native-gifsicle';constmanipulatedUri=awaitRNGifsicle.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 clickLibrariesAdd Files to [your project's name]
    2. Go tonode_modulesreact-native-gifsicle and addGifsicle.xcodeproj
    3. Expand theGifsicle.xcodeprojProducts folder
    4. In the project navigator, select your project. AddGifsicle.a to your project'sBuild 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/** asnon-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 bykohler

Author of this package byNuman

Sponsor this project

    Packages

    No packages published

    [8]ページ先頭

    ©2009-2025 Movatter.jp