react-native-gif-search v1.3.2

react-native-gif-search

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

This package allows you to present a searchable list of gifs to the user, from which the user can select the desired gif. In the beginning and when the search term is empty, a list of trending gifs is shown. You can use this component inside a chat screen, for posts, comments or wherever else you need. The gifs that are displayed in the gifs list are low quality previews, in order to load faster and minimize mobile data usage. The gif that the user selects is given in a higher quality, so that it can be used and displayed properly in the app. These are the default settings, but can be changed (see Data Usage section below).

This package uses the Giphy API so you need to create an account and obtain an API key which is free and easy. This article was helpful for creating this package and has instructions on how to get a Giphy API key. The Tenor API has also been added, for which an API key can be obtained here. This means that you can present gifs using the Giphy API, the Tenor API or both.

Installation

npm install react-native-gif-search --save

Android

In your project's folder go to file android/app/build.gradle and inside dependencies block add these lines:

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

Usage

Example Projects

For a plain Javascript example project go to Examples/js-example

If you use TypeScript for your project go to Examples/ts-example

Import

import {
  GifSearch,
  poweredByTenorLogoWhite,
  poweredByTenorLogoGrey,
  poweredByTenorLogoBlue,
  viaTenorLogoWhite,
  viaTenorLogoGrey,
  viaTenorLogoBlue,
  poweredByGiphyLogoGrey,
  poweredByGiphyLogoWhite
} from 'react-native-gif-search'

• GifSearch: The gif searching component
• poweredByTenorLogoWhite: The white powered by Tenor logo for use in an Image
• poweredByTenorLogoGrey: The grey powered by Tenor logo for use in an Image
• poweredByTenorLogoBlue: The blue powered by Tenor logo for use in an Image
• viaTenorLogoWhite: The white via Tenor logo for use in an Image
• viaTenorLogoGrey: The grey via Tenor logo for use in an Image
• viaTenorLogoBlue: The blue via Tenor logo for use in an Image
• poweredByGiphyLogoWhite: The white powered by Giphy logo for use in an Image
• poweredByGiphyLogoGrey: The grey powered by Giphy logo for use in an Image

You can import only the logos that you need and use them like this: <Image source={poweredByTenorLogoGrey} />

Minimal example

<GifSearch
  tenorApiKey={YOUR_TENOR_API_KEY}
  giphyApiKey={YOUR_GIPHY_API_KEY}  
  onGifSelected={(gif_url)=>{alert(gif_url)}}
/>

Bigger example

<GifSearch
  tenorApiKey={YOUR_TENOR_API_KEY}
  gifsToLoad={10}
  maxGifsToLoad={25}
  style={{backgroundColor: 'white', borderWidth: 3, borderRadius: 10}}
  textInputStyle={{fontWeight: 'bold', color: 'black'}}
  gifListStyle={{height:320}}
  gifStyle={{height:160}}
  loadingSpinnerColor={'black'}
  placeholderTextColor={'grey'}
  placeholderText={'Search'}
  onGifSelected={(gif_url, gif_object) => {console.log(gif_url); console.log(gif_object)}}
  onGifLongPress={(gif_url, gif_object) => {console.log(gif_url); console.log(gif_object)}}
  visible={this.state.visible}
  onBackPressed={() => {this.setState({visible: false})}}
  horizontal={false}
  showScrollBar={false}  
  noGifsFoundText={"No Gifs found :("}
  noGifsFoundTextStyle={{fontWeight: 'bold'}}
  provider={"tenor"}
  providerLogo={poweredByTenorLogoGrey}
  textInputProps={{autoFocus: true}}
  onError={(error) => {console.log(error)}}
/>

Multiple columns example

<GifSearch
  giphyApiKey={YOUR_GIPHY_API_KEY}
  onGifSelected={(gif_url)=>{alert(gif_url)}}
  style={{backgroundColor: '#9fd4ab', height:300}}
  textInputStyle={{fontWeight: 'bold', color: 'black'}}
  loadingSpinnerColor={'black'}
  placeholderTextColor={'grey'}
  numColumns={5}
  provider={"giphy"}
  providerLogo={poweredByGiphyLogoGrey}
  showScrollBar={false}
  noGifsFoundText={"No Gifs found :("}
/>

Stickers example

<GifSearch
  giphyApiKey={YOUR_GIPHY_API_KEY}
  onGifSelected={(gif_url)=>{alert(gif_url)}}
  textInputStyle={{fontWeight: 'bold', color: 'white'}}
  loadingSpinnerColor={'white'}
  placeholderTextColor={'grey'}
  providerLogo={poweredByGiphyLogoWhite}
  providerLogoStyle={{width:'40%'}}
  showScrollBar={false}
  noGifsFoundText={"No stickers found :("}
  stickersPlaceholderText={"Search for stickers"}
  gifType={"sticker"}
/>

Usage examples: JS code, TS code.

Properties

Attribution

If you wish to publish your app and go from development to production you need to follow some steps for every API that you use.

Tenor

All content retrieved from Tenor must be properly attributed by including one of the three following options:

• Powered By Tenor - to be used in the GIF browsing experience
• Search Tenor - to be used as the placeholder text in the search bar
• Via Tenor - to be used in the footer of a shared GIF

Source: https://tenor.com/gifapi/documentation#attribution

Giphy

For the Giphy API you need to upgrade the Giphy API key. To do so, you must verify that you have used the Giphy attribution marks (Giphy logos) in your app, by providing screenshots and videos from your app. The verification process can take up to 3 days. The react-native-gif-search package can help you with this too, because it has a property for adding a logo on top right corner (see providerLogo in Properties section) or you can include a Giphy logo near your shared GIF using the logos you can import from this package (see Import section).

Data usage

The quality of the GIFs is an important factor when it comes to how much mobile data the component uses. When the user is connected through cellular data and not wifi, then it is easy to consume a lot of data while loading GIFs. That's why react-native-gif-search uses by default a low quality for the preview of the GIFs and a better (medium) quality for the selected GIF. Of course the developer can change this according to the specifications of the app that uses this package. If you are concerned about data usage, you can also have a look at this article for Giphy API. Also click here to see available format types for Giphy, and here for Tenor.

The values of the previewGifQuality and selectedGifQuality properties correspond to these (Giphy/Tenor) API values:

If you wish to use other quality values or in general have more control over API request values, you can use tenorApiProps and giphyApiProps properties (see Properties section above).

Warnings :warning:

• If your GifSearch component is nested in a ScrollView you should add keyboardShouldPersistTaps={"handled"} property in the ScrollView (like in example code), otherwise the scrolling will probably be luggy.
• If you want to have borderRadius for a GIF, you should also use overlayColor, otherwise there will probably be no border radius when you test it. See gifComponent style in GifPicker example code). To find out more about this issue check this StackOverflow answer.

Version History

• v1.3.2

  • Fixed the #11 bug.

• v1.3.1

  • Added previewGifQuality and selectedGifQuality
    • Credits to anthlasserre for adding properties that handle the quality of the gifs (see pull request #10).

• v1.3.0

  • Added support for TypeScript
    • Credits to anthlasserre for adding TS support and an example project (see pull request #9).

• v1.2.1

  • providerLogoStyle: Now you can change the style of the provider logo (e.g. width, height etc.)
  • Fixes:
    • When using columns, the last column now has no right margin.
    • Credits to devautor for locating and helping fix this and other UI problems (see pull request #8).

• v1.2.0

  • Added support for Stickers from GIPHY API
  • onGifLongPress: Now you can provide a function used when the user long presses a gif (e.g. for showing a preview before selecting)
  • New properties: gifType, stickersPlaceholderText, onGifLongPress, showGifsButtonText, showGifsButtonTextStyle, showGifsButtonSelectedTextStyle, showGifsButtonStyle, showGifsButtonSelectedStyle, showStickersButtonText, showStickersButtonTextStyle, showStickersButtonSelectedTextStyle, showStickersButtonStyle, showStickersButtonSelectedStyle (see Properties section for explanation).

• v1.1.0

  • Added support for Tenor API
  • New properties: tenorApiKey, provider, providerLogo, tenorApiProps, giphyApiProps (see Properties section for explanation).
  • Removed properties: developmentMode, darkGiphyLogo. Anyone who used developmentMode={false} with darkGiphyLogo={true} should replace these with providerLogo={poweredByGiphyLogoGrey} and import poweredByGiphyLogoGrey (see Import section) in order to have the same results (use providerLogo={poweredByGiphyLogoWhite} in case you had darkGiphyLogo={false}). Notice that if you intend to use only Giphy API you must add the property provider={"giphy"}.
  • Fixes:
    • After typing the search term, the gifs of the final search term will be displayed. Previously there were cases where the user would type "test" and the gifs for "tes" would appear.

• v1.0.10

  • giphyLogo, giphyLogoDark: Now you can also import the giphyLogo and the giphyLogoDark from the module and use it as a source of an Image component (like in example code).
  • Fixes:
    • Bigger width for "no gifs found" text.

• v1.0.8

  • No GIFS found: Displaying a text when there are no gifs matching the search term. See Properties section.
  • Autofocus on open: Now you can autofocus on the search input when the GifSearch component is displayed. Just use textInputProps={{autoFocus: true}}.
  • Fixes:
    • The selected gif is now better quality with no lag (credits to anthlasserre for noticing).
    • When keyboard is open and the user selects a gif, the keyboard now closes and the gif is selected. Previously it did not select the gif on first tap.

• v1.0.7

  • numColumns: Displaying gifs in grid view with specific number of columns. See Properties section. Credits to anthlasserre for suggesting and helping add this feature.
  • gifListProps: See Properties section. Credits to anthlasserre for suggesting and helping add this feature.
  • onGifLongPress: Function for when the user long presses on a link. This can be used to show a bigger preview. See Properties section.

License

ISC